Logo
Logo

Forgot Password Form

The Forgot Password Form element allows users to add a password recovery form to their website, enabling visitors to request a password reset link. This element offers a variety of customization options, including form labels, success messages, and redirect URLs. Additionally, design controls are available to adjust the form’s width, background, padding, borders, and shadows, ensuring seamless integration with the site’s overall design. You may also configure spacing, typography, and button styles for a fully customized and user-friendly password recovery experience.

Content Controls

Form

These controls allow you to customize the content and behavior of the Forgot Password form. You can set labels, placeholder text, submit button text, success messages, and redirect settings after the form is submitted.

  • Labels – Customize the labels for form fields.
    • Username Label – Set the label text for the username field.
    • Username Placeholder – Set placeholder text for the username field.
  • Submit Text – Change the text on the submit button.
  • Success Message – Define the message displayed upon successful form submission.
  • Redirect After Submit – Enable redirection after the form is submitted.
  • Redirect URL – Set the URL to redirect to after submission (available only when Redirect After Submit is enabled).

Design Controls

Container

These controls let you style the container of the Forgot Password form. You can adjust its width, background color, padding, borders, and shadow to match your website’s design.

  • Width – Set the width of the container.
  • Background – Choose a background color for the container.
  • Padding – Customize the padding inside the container.
  • Borders – Configure the border, radius, and shadow settings 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 manage the spacing around the Forgot Password Form element, helping you to maintain a well-balanced and visually appealing layout. Adjust margins to ensure proper alignment with other page elements.

  • Margin Top – Set the top margin of the Forgot Password Form element.
  • Margin Bottom – Set the bottom margin of the Forgot Password Form element.