How to add a contact form or newsletter to my web page in Elementor?
Most of the time you need to add a newsletter subscription form to your website or have a Contact form to be in touch with your customers.
RavenForm element is the best choice for you due to its significant features and multiple customizations it provides for you.
Beware!Form element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor.
Creating both a Contact Form and a Newsletter can be done by Form widget and you can use similar input types for both of them (for example an Email input type). To make it crystal clear, we will describe creating of Contact Form and also Newsletterstep by step:
1. In Elementor, drag and drop a Raven Form widget into your layout, then a new panel will open on the left side of the Elementor with the element specific settings.
2. The most important fields of a Contact form are Name, Email and Message fields. For having a more secure form, you are capable of using the reCaptcha field as well. Adding these fields to your form can be done from Content tab and under the Form Fields section. You can customize the pre-added fields or add your own fields to the Form by clicking on + ADD ITEM.
3. By clicking on each added field, you can change the name, label and also type of the field. In order to learn more about adding an Email field and reCaptcha to your form you can refer to this and this article respectively.
4. After adding the necessary fields to your form, you can set an action for it. The action will occur after a user submitted your form. There are different types of actions in Form element such as Email, MailChimp and Redirect. If you’d like to create a contact form you can set anEmailaction for it. If you want to add a newsletter to your web page you can integrate it with MailChimp. Adding an action can be done from the Content tab and under the Settings section. You are also allowed to add your preferable action to your form from Add Action option.
5. Customize your form based on your needs. You can learn more about other customizations in Form element by referring to this article.
6. Update the settings
Note: There are so many features and customizations in Form element. We suggest you read these articles to get more information about Raven Form element:
Adding Email field to a Form widget in Elementor
Removing field labels in the Form element
Adding reCAPTCHA to a Form widget in Elementor
Adding Mailchimp to the Form element
Redirecting to a page when the form is submitted in Elementor
Sending an email via form in Elementor
Making the form fields required in Elementor
Adding custom feedback messages to the Form element
Adding phone number to a form widget in Elementor