You can use any of the contact form plugins with Elementor. However, to show how to embed a contact form in elementor, we will work with WP Forms.
Here’s how you embed a contact form with WP Forms and Elementor.
Step 1: Create A Contact Form
Install WP Forms using the usual method. Then go to WP Forms > Add new from your WordPress dashboard.
Here you can select a form from the given templates and name your form.
Step 2: Customize the Form
Now you can edit and add required fields into your contact form. You can also remove the fields that you do not want in this section.
Once you are done with the edits, you can click ‘Preview’ to check how the form looks.
If you are happy with the form, click ‘Save’ to save the changes.
Step 3: Create the Shortcode
Once you click embed, WP Forms asks if it should add the form for you in a certain page or post. Though it might seem like the easier option, we recommend you choose ‘use a shortcode’ link just below the buttons.
Once you click the link, it will generate a shortcode. Just copy the shortcode for now. We’re going to need it in the next step.
Step 4: Embedding the Form
Now’s the time to start editing.
Open up the page that you need and select ‘Edit with Elementor’.
In the Elementor widget, search for ‘shortcode’.
Select the Shortcode widget and drag it to the area where you want the form.
Paste the shortcode that you copied earlier into the widget. The form will then appear in the place where you positioned it on the page
If you are happy with the results, hit Update to save the page.
Another way to add the same form in Elementor is by searching for ‘WP Forms’ in Elementor widget search.
When you use any Elementor compatible plugin, it automatically creates a widget for it. It makes embedding much easier.
Drag the WPForms widget to the necessary place and select the form that you want.
This will give you the same result as the shortcode method.
