Register Form

The Register Form (Sign-up Form) widget simplifies the process of creating a custom registration form for your WordPress site.

View Live Demo

Content Tab

Form Fields

• Email
  • Type: Set to 'Email' to ensure proper validation.
  • Map to: Link this field to the 'Email' attribute in your database.
  • Label: Enter 'Email' or a label of your choice.
  • Placeholder: Input placeholder text such as 'Enter your email'.
  • Required: Toggle on to make this field mandatory.
  • Column Width: Adjust to '100%' for full width or set as desired.

• Full Name
  • Type: Set as 'Text'.
  • Map to: Associate this field with the 'Full name' attribute.
  • Label: Label it 'Full Name'.
  • Placeholder: Add a placeholder like 'Full Name'.
  • Required: Toggle on if the field is mandatory.
  • Column Width: Typically set to '100%'. Adjust according to layout needs.

• Password
  • Type: Choose 'Password' to hide input during typing.
  • Map to: Connect this to the 'Password' attribute.
  • Label: Label as 'Password'.
  • Placeholder: Use placeholder text such as 'Create a password'.
  • Required: Toggle on to ensure users don't skip this field.
  • Confirm Password?: Enable this to require users to enter their password twice for verification.
• reCaptcha
  • Type: Select 'reCAPTCHA' to add a CAPTCHA challenge.
  • Label: Customize the label, default is 'reCaptcha'.
  • Theme: Choose between 'Light' or 'Dark' theme.
  • Size: Select 'Normal' or 'Compact' based on your design preference.
• + Add Item: Click this button to add additional custom fields to the registration form.

Settings

• Label: Toggle 'Show' to display labels above or next to the form fields.
• Required Mark: Toggle 'Show' to display an asterisk or other symbol indicating required fields.
• Add Action: Add custom actions that trigger upon form submission.

Submit Button

• Text: Enter the text for the button, such as 'Register'.
• Submit Button Icon: Choose an icon to display on the submit button.
• Column Width: Set the width of the button; usually '100%' for full width.
• Hover Effects: Select an effect for when the cursor hovers over the button.

Custom Messages

• Enable Custom Messages: Toggle on to customize messages.
• Success: Customize the message displayed after successful registration, e.g., 'You have been successfully registered.'
• Emails Already Exist: Message for indicating an email already in use, e.g., 'An account is already registered with your email address.'
• Password And Confirm Password Is Not Same: Message to show when the passwords do not match, for example, 'Your password and confirmation password do not match.'

Style Tab

General

• Column Spacing: Adjust the space between columns, if applicable.
• Row Spacing: Modify the space between rows for alignment and design preferences.

Label

• Color: Choose a color for your labels to enhance visibility or match your theme.
• Typography: Customize the font, size, weight, transform, style, decoration, line-height, and letter spacing.
• Spacing: Set the margin around the label for top, right, bottom, and left.

Field

• Background Color: Select a background color for the input fields.
• Border Type: Choose from various border styles such as solid, dashed, dotted, etc.
• Border Radius: Define the roundness of the field corners.
• Box Shadow: Apply a shadow effect to the input fields.
• Placeholder:
  • Color: Set the color for the placeholder text.
  • Typography: Customize the typography of the placeholder text.
• Value (The actual text entered by the user):
  • Color: Decide the text color for user input.
  • Typography: Set the typography for the entered text.
• Padding: Adjust the padding inside the fields to control the text's inset.

Select

• Icon: Choose an icon to display for the dropdown indicator.
• Color: Set the color of the dropdown icon.
• Size: Adjust the size to make the icon larger or smaller.
• Vertical Offset: Shift the icon up or down.
• Horizontal Offset: Move the icon left or right.

Checkbox

• Size: Change the size of the checkbox.
• Color: Select the color for the checkbox.
• Typography: Customize the font properties of the label next to the checkbox.
• Spacing Between: Adjust the space between the checkbox and its label.
• Spacing: Configure the margin around the checkbox for top, right, bottom, and left.

Radio

• Size: Adjust the size of the radio button.
• Color: Choose a color for the radio button.
• Typography: Customize the font properties of the label next to the radio button.
• Spacing Between: Set the space between the radio button and its label.
• Spacing: Modify the margin around the radio button.

Buttons

• Width: Control the width of the button relative to its container.
• Height: Set the height of the button.
• Spacing: Adjust the margin around the button for top, right, bottom, and left.
• Alignment: Choose the alignment of the button within its container.
• Typography: Customize the font properties of the button text.
• Color: Select colors for the text and background of the button in different states (Normal, Hover).
• Border:
  • Border Type: Choose the border style for the button.
  • Border Width: Define the thickness of the border.
  • Border Color: Pick a color for the border.
  • Border Radius: Set the roundness of the button corners.
  • Box Shadow: Apply a shadow effect to the button.

Messages

• Typography: Customize the typography of the form messages.
• Success Message Color: Select a color for the success message after registration.
• Error Message Color: Choose a color for error messages, like invalid input or failed submission.
• Inline Message Color: Set the color for inline messages, such as validation errors next to form fields.