Form Widget (Pro)
How to Use the Elementor Form Widget
With the Forms 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.
Form Name - Here you can insert the name of the form.
Form Fields - A list of all the fields in the form. You can duplicate, add or delete fields as you please. You can also drag and drop them to change the order.
When you click on each field all its settings are displayed.
- 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.
Input Size - Set the size of the fields, from extra small to extra large.
Labels - You can choose to show or hide the labels on the form.
- 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
Elementor's Forms widget works perfectly with the popular Contact Form DB plugin, which lets you save all the messages sent on your site in an organized table.
In the Contact Form DB dashboard, you'll be able to see all the messages sent on your site. You can choose between different forms, see all the details of the forms sent, as well as export the results.
- 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.
Normal / Hover - Choose to change the button settings for normal and hover states.
- 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.
A recent update has included an added spam filter that works behind the scenes. The Honeypot technique works by adding a form field which is hidden from the user but seen by the spambot. This way, the visitor's experience is the same, but if the form is submitted with the hidden field filled, it is recognized as spam and gets filtered. To use this option, add an item to the form and in the drop-down menu called type select honeypot.