Email Field Element

About the Email Field Element

The Email Field element is a form field designed to collect users’ valid email addresses.

It is integrated into the Contact Form or Newsletter Form element, so you’ll need to add one of these forms to your page first to use the Email Field.

To use the email field element, drag and drop it into the Contact/Newsletter form. Please refer to the article: How to Build a Contact Form for a better understanding.

Configure the Settings tab

Under the Settings tab, you can adjust the following sections:

Text style

Define the placeholder text that appears within the field. 

• Placeholder: Guide users on what type of input is expected, such as “Enter your email”.
• Styles: Choose the text style from Heading 1-6 or Paragraph 1-3 as the global style. 
• Font: Select a font style that matches your brand identity.
• Size: Adjust the font size to make the text prominent.
• Font Weight: Control how thick or thin the text appears.
• Line Height: Adjust the space between lines for better readability.
• Letter Spacing: Create a more modern or compact look by changing the space between letters.
• Transform: Convert the text to uppercase, lowercase, or capitalize the first letter of each word.

Size

Adjust the size of the Email Field element to fit your form design. 

• Width: Customize the width of the Email Field. You can set it to fit perfectly within your form layout or make it larger for better readability.
• Padding: Define internal spacing inside the button.

Configuration

• If the Required = Yes, the Email Field will be mandatory to prevent incomplete submissions. Otherwise, users can submit the form while skipping this field.
• Hide on client: Set it to Yes if you don’t want the field to appear for users on the live page. This is useful for fields you only need internally or plan to use later.

Align

Align your text area to the left, center, or right. However, if the width is set to 100% or greater, the horizontal alignment will be disabled.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.