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.
Raven Form 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 an Email action 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