Form Widget (Pro)
How to Use the Elementor Form Widget
With the Form widget, you don't have to leave the page you're designing when you're creating a new form. In this tutorial, we will go over all the options available on this widget.
- Type - Choose the type of field you want.
- Label - The name of the field, displayed on the form and on the email you get from the user.
- Placeholder - The text inside the field, which helps the user fill in the field.
- Required - Set the field as required, if you don't want to give the user the option to skip the field.
- Column Width - Enable you to set the width of the field. This is useful when you want to get several fields in one row. If you would like to get 3 fields in one row, for example, you would need to set each field 33% width.
- Message - A text area field that allows you to set the number of rows displayed.
Types of Fields
- Text - A simple text field. Example field that would use this type: Name
- Tel - A telephone number type. The keyboard automatically adjusts for this type.
- Email - An email type. Includes validation for email.
- Textarea - A textarea type that allows you to set the number of rows.
- Number - A number type. The keyboard automatically adjusts for this type.
- Select - A select type lets the user choose from a dropdown list of options. The options are created by writing separated lines of text in the Options setting.
- URL - With this type the user can fill in their website URL.
- Checkbox - A checkbox type lets the user check one or more of the options. The options are again created by writing separated lines of text in the Options setting. With this type you also have the setting of 'Inline List', allowing to display the checkboxes in one horizontal line.
- Radio - A radio type lets the user check one option. The options are again created by writing separated lines. With this type, you again have the 'Inline List' setting.
- reCAPTCHA - Add a reCAPTCHA to your form to verify the user is not a robot. You can set the size as normal or compact, and the style as light or dark.
- Text - Choose the text displayed on the submit button.
- Size - Set the size of the submit button.
- Column Width - Set the width of the button by percentage.
- Alignment - Set the alignment right, center, left or justified.
- Icon - Add an icon to the submit button, from the Font Awesome icon list.
- Icon Position - Before or after the text in the button.
- Icon Spacing - Set the space between the icon and the button.
Emails & Options
- Email To - Set where the email is sent to. You can set several emails, by separating each email with a comma.
- Email Subject - Set the subject line of the email.
- From Email - This will set the from email field.
- From Name - This will set the name of the person who sent the email.
- Reply To - When you get the email and hit reply, this is the email the reply will be sent to. To reply to the user who sent the message, choose the 'Email Field' option.
- Meta Data - Include more information in the email, like Date, Time, Page URL, User Agent, Remote IP and Credit.
- Send HTML - This option will send the email notifications in HTML.
- Redirect to - Add the link the user will automatically get redirected to after successfully submitting the form.
- Custom Messages - Edit the messages the user will see: Success message, error message, required field message and invalid message.
Using Contact Form DB to save all messages in a table
- Column Gap - Set the exact gap between the columns of the form fields.
- Row Gap - Set the space between the rows
- Spacing - Set the space between the labels and the fields.
- Text Color - Set the color of the fields labels
- Typography - Customize the typography of the label
- Text Color - Set the color of the input text (The text the user fills in)
- Typography - Set the typography of the input text.
- Background Color - Set the background color of the fields.
- Border Color - Set the border color of the fields.
- Border Width - Set the width of the field borders.
- Border Radius - Set the radius of the border. The default has a rounded edge border.
- Text Color - Set the text color of the button.
- Typography - Set the typography for the button text.
- Background Color - Set the background color for the button.
- Border Type - Choose the type of button border.
- Width - Set the width of the border.
- Color - Set the color of the border.
- Border Radius - Give the button a more rounded edges shape.
- Text Padding - Insert the space between the text and the edge of the button.
- Text Color - Set the text color for the button for the hover mode.
- Background Color - Set the background color for the button for the hover mode.
- Border Color - Set the border color on hover mode.
- Animation - Add hover animation to the button.
Webhook, MailPoet & MailChimp Integration
With Form, you can quickly integrate with any email marketing service through the webhook and Zapier. You can also integrate with MailChimp and MailPoet with Elementor's built in integration. Check out these Zapier and MailChimp tutorial videos.
For troubleshooting procedures, please check the following articles: