The Register Form element is used to create user registration forms on your website. This element includes a variety of content controls to customize labels, placeholders, and success messages, as well as options for automatic login and redirection after registration. The design controls allow you to adjust the form’s appearance, including container width, background, padding, borders, shadows, and typography. Advanced settings include field-specific design adjustments, spacing controls, and additional customizations for stepper navigation in multi-step forms.
Content Controls
Form
These controls allow you to customize the labels, placeholders, and success messages for the registration form. You can also enable auto login for the user after registration and set a redirect URL for post-registration.
- Labels – Customize the labels for form fields.
- Username Label – Customize the label for the username field.
- Username Placeholder – Set a placeholder for the username input field.
- Email Label – Customize the label for the email field.
- Email Placeholder – Set a placeholder for the email input field.
- Password Label – Customize the label for the password field.
- Password Placeholder – Set a placeholder for the password input field.
- Submit Text – Set the text for the submit button.
Success Message – Define the message displayed upon successful registration.
Auto Log In User – Enable or disable automatic login after registration.
Redirect After Registration – Enable or disable redirecting the user after registration.
Redirect URL – Specify the URL to redirect to after registration. (This control is only available when Redirect After Registration is enabled)
Design Controls
Container
These controls let you adjust the design of the form container, including its width, background, padding, borders, and shadow effects.
- Width – Set the width of the container.
- Background – Choose a background color for the container.
- Padding – Adjust the padding inside the container.
- Borders – Set the borders for the container.
Form
These controls allow you to style the form fields, labels, and overall layout. Customize spacing, background colors, borders, shadows, and focus styles to ensure the form fits your site’s design.
- Spacing – Adjust the spacing around form elements.
- Between Fields – Set the space between form fields.
- After Label – Set the space after labels.
- Sub Label – Adjust the space below sub-labels.
- Fields – Customize the form fields’ appearance.
- Background – Choose a background color for the fields.
- Borders – Configure border, radius, styling, and shadow settings for the fields.
- Focused – Customize the appearance of focused fields.
- Background – Set the background color for focused fields.
- Border – Choose a border color for focused fields.
- Shadow – Add a shadow effect to focused fields.
- Padding – Customize the padding inside the fields.
- Placeholder – Set the placeholder text color.
- Required – Customize the required field indicator.
- Color – Choose a color for the required field indicator.
- Size – Set the size of the required field indicator.
- Nudge X – Adjust the horizontal position of the required field indicator.
- Nudge Y – Adjust the vertical position of the required field indicator.
- Advanced – Access advanced field customization options.
- Hide Labels – Toggle the visibility of field labels.
- Radio & Checkbox – Customize radio buttons and checkboxes.
- Size – Set the size of radio buttons and checkboxes.
- Color – Choose a color for radio buttons and checkboxes.
- File Input – Customize file input fields.
- Drag & Drop – Configure drag & drop settings for file input.
- Button – Customize the file input button settings.
- Quantity Input – Customize the quantity input fields.
- Max Width – Set the maximum width for the quantity input.
- Background – Choose a background color for the quantity input.
- Typography – Set the typography for the quantity input.
- Borders – Configure the border settings for the quantity input.
- Padding – Adjust the padding for the quantity input.
- Buttons – Customize the buttons in the quantity input.
- Responsive – Configure responsive settings for the fields.
- Full Width At – Define the breakpoint for full-width fields.
- Typography – These controls allow you to style the text within the form, including labels, sub-labels, values, and links. Adjust typography settings to ensure the form text matches your website’s design.
- Labels – Customize the typography for form labels.
- Sub Labels – Set the typography for sub-labels.
- Values – Adjust the typography for form values.
- Links – Configure the typography for links within the form.
- Messages – These controls let you style the messages displayed in the form, such as error and success messages. Customize background colors, borders, shadows, and typography to ensure these messages are clear and match your site’s design.
- Space Above – Set the space above messages.
- Padding – Adjust the padding for messages.
- Error – Customize the appearance of error messages.
- Background – Set the background color for error messages.
- Borders – Configure border settings for error messages.
- Typography – Adjust the typography for error messages.
- Success – Customize the appearance of success messages.
- Background – Set the background color for success messages.
- Borders – Configure border settings for success messages.
- Typography – Adjust the typography for success messages.
- Submit Button – These controls let you customize the appearance and behavior of the submit button. Adjust alignment, styles, typography, and effects to ensure the button fits your form’s design and functions as needed.
- Alignment – Set the alignment of the submit button.
- Styles – Customize the styles for the submit button.
- Other – These controls provide additional customization options for the form, such as stepper settings for multi-step forms. Adjust the appearance and behavior of the stepper and its components to ensure smooth navigation.
Spacing
These controls allow you to adjust the spacing around the form to ensure proper layout and design.
- Margin Top – Set the top margin for the form.
- Margin Bottom – Set the bottom margin for the form.
