The Styling tab controls the overall appearance of the Registration and Login forms, including field design, sizing, button width, shape, and container spacing.
Open the Registration Form Builder and select:
Styling
Choose a Field Style
Open the Field Style dropdown to view the available designs.
[Insert Field Style options image here]
Each preset shows a preview of its label placement, input border, and general field appearance. Select the style that best matches your site design.
The selected style applies consistently across the form fields.
Set the Field Size
Choose one of the available sizes:
- Small
- Medium
- Large
The field size changes the height and spacing of the form inputs.
Use Small for compact forms, Medium for a standard layout, and Large when you want more prominent and touch-friendly fields.
Configure the Buttons
Button Size
Choose the height and overall size of the Login and Register buttons.
Available options include:
- Small
- Medium
- Large
[Insert Button Size options image here]
Button Width
Choose how much horizontal space the buttons use.
Fixed
The button uses a fixed width based on its content and styling.
Full
The button expands across the available form width.
[Insert Button Width options image here]
A full-width button often works better on narrow forms and mobile devices.
Set the Field and Button Shape
Choose the corner style applied to both the fields and buttons.
Sharp
Uses square or minimally rounded corners.
Rounded
Uses moderately rounded corners.
Pill
Uses heavily rounded corners, creating a capsule-shaped appearance.
Choose one shape and use it consistently with the rest of your website’s buttons and form elements.
Adjust the Form Container
Padding
Padding controls the space between the form content and the edges of its container.
Increase it for a more open layout. Reduce it when you need a compact form.
You can adjust the value with the slider or enter a specific number in the value box.
Corner Radius
Corner Radius controls how rounded the outer form container appears.
A low value creates sharper corners. A higher value produces a softer, more rounded container.
This setting affects the form container rather than the individual input fields.
Select a Color Theme
The Color Theme section includes ready-made color palettes.
Select a theme to apply its colors to the forms. Click Customize when you need to change individual colors.
Detailed color controls are covered in the How to Customize Registration and Login Form Colors in WholesaleX guide.
Save and Preview
Click Save Changes after styling the form.
Check the form on both desktop and mobile. Confirm that the field size, button width, spacing, and shape remain clear and easy to use at different screen sizes.