The Login Form element allows users to create and customize a login form for their website. It provides controls for configuring form labels, placeholders, submit button text, and success messages. It also includes options for redirecting users after login and customizing the design of the form container, fields, and buttons. This element is essential for creating user login functionality with a personalized design.
Content Controls
Form
Use these controls to customize the content and behavior of your login form. You can set labels for various fields, define placeholder text, and customize messages shown to users upon successful login. Additionally, you can enable or disable certain features such as the “Remember Me” option and redirect users after login.
- Labels – Customize the text labels for different fields in the form.
- Username Label – Set the label for the username field.
- Username Placeholder – Set the placeholder text for the username field.
- Password Label – Set the label for the password field.
- Password Placeholder – Set the placeholder text for the password field.
- Remember Me – Customize the text for the “Remember Me” checkbox.
- Lost Password – Customize the text for the “Lost Password” link.
- Lost Password – Enable or disable the “Lost Password” feature.
- Custom Lost Password Page – Specify a custom URL for the “Lost Password” page. (Note: This control is only available when “Lost Password” is enabled)
- Remember Me – Enable or disable the “Remember Me” checkbox.
- Submit Text – Set the text for the submit button.
- Success Message – Define the message shown to users upon successful login.
- Redirect After Login – Enable or disable redirection after login.
- Redirect URL – Specify the URL to redirect to after login. (Note: This control is only available when “Redirect After Login” is enabled)
Design Controls
Container
These controls allow you to adjust the overall appearance of the form container, including its width, background, padding, borders, and shadows. Customize the container to match the design and style of your website.
- Width – Set the width of the container.
- Background – Choose a background color for the container.
- Padding – Adjust the padding inside the container.
- Borders – Customize the borders around the container.
Form
Customize the appearance of the form fields, including spacing, backgrounds, borders, and shadows. Adjust the styling for focused fields, placeholders, and required indicators. You can also fine-tune advanced options like hiding labels, configuring radio buttons and checkboxes, and styling file inputs.
- 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
Adjust the spacing around the form using these controls. You can set the top and bottom margins to create the desired amount of space above and below the form.
- Margin Top – Set the top margin of the form.
- Margin Bottom – Set the bottom margin of the form.
