In this tutorial, I am going to show you how to create a custom contact form 7 in Elementor website. For this, we’re going to the Contact form 7 plugin for WordPress. I’ll show you step by step how to style every field on the contact form 7 widget and get started using it with elementor.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Custom Contact Form 7 In Elementor Tutorial
1. Create a Page in Elementor
For starters, you need to log into your WordPress website.
After logging in, on your dashboard go to Pages and create a new page, give it a name then click the Publish button.
After publishing your page, click the Edit with Elementor button (00:28)
When your page opens up in Elementor, go to settings (icon at the bottom left), under General Settings set the Page Layout to Elementor Full Width (00:39)
2. Install your Contact Form 7 Plugin
To install the Contact Form 7 plugin, go back to your WordPress dashboard, and under the Plugins section on the left, click Add New to add a new plugin.
In the search area, search for contact form 7 then install and activate it (01:06)
To Read: 15 Fun Elementor Features You Don’t Know Exist
After activating your Contact Form 7 it will appear in the main dashboard menu, click on it. (01:14)
When you click on the contact form, you’re given a default contact form created with the contact form 7 plugin. (01:23)
Click on the Edit button below the contact form, and in the edit area, you can name your contact form, enter the address where the email will be sent, enter your admin email and other details (01:30). That’s under the Mail option.
When you click on the Form option you are also given more options you can add like checkboxes, dates, and more (01:54). You simply click on the option you want and it will be added to your contact form.
Under the Messages option, you can set up notification messages, for example, whether the message is successful, failed or there’s an error, and so on (02:39). You can edit the text to whatever you want to reflect on your form.
Under the Additional Settings option, you can also add custom code to your contact form 7 if you want. But for now, just leave everything on default.
3. Adding a Contact Form 7 in Your Elementor Using Shortcode
Go back and click on your contact form 7.
To display your contact form 7 in your Elementor you have two (2) options;
You can either use the available shortcode (03:11) to display your form on your Elementor Website, or you can use another plugin.
If you use shortcode, however, you will not be able to style your contact form, you’ll just have a default contact form. For example, if you go to your Elementor, create a new one column section, then go to the widgets area, search for the “shortcode” widget, drag and drop it in your canvas (03:38), in the Edit area on the left, paste your shortcode, then click apply.
This is the kind of form you’ll get using the shortcode widget (03:54). It has a name field, email field, subject, message, and a send button.
The form works just fine, however, with the shortcode you’re unable to style it up to look like this (04:01)
4. Adding a Contact Form 7 in Your Elementor Using HT Mega Addons Plugin
To be able to style your contact form 7, you need to use a plugin.
Go to your dashboard and under Plugins, add a new plugin (04:18)
In the Add Plugin area search for a plugin called HT Mega Absolute Addons for Elementor Page Builder, install and activate it (04:25)
The HT Mega Addons comes with free widgets that you can use on your Elementor website.
When you activate this plugin, it will show up in the dashboard menu (04:41), click on it.
To Read: How to Add Custom Fonts in Elementor and Generating Font Pairs
When you go to your HT Mega Addons, under Elements (04:47) you’ll find a couple of free elements that you can use in your Elementor website. If you have no need for any of them, you can just click the Toggle All button and deactivate all of them.
Back to your Elementor page, reload the page so that the changes from the new plugin are applied.
Now go to the Widgets area and search for the contact form, drag it to your canvas. (05:34)
5. Styling your Contact Form
Your contact form 7 widget from the HT Mega addons loads up and under the Edit Contact Form 7 area you have the option to style your form, you have styles from 1 to 6 (05:41)
Before styling, go to the Contact Form option and choose contact form 1 to use. Then go to Style and choose your form style. When you select your form style, under Alignment you can align to the left, then you can go over to the Style option and make some changes (06:16)
Select the main section and in the Edit Section area on the left, go to Layout and set Content Width to 677. Select Column next and under Advanced, go to Padding and set it to 70 pixels.
Then go to Style and under Background select Gradient for Background Type to add background color to the column section that’s holding the widget. Add a custom gradient (07:09)
Down on the Angle option set it to 50.
Also Read: How to Overlap Sections in Elementor
With the HT Mega Addons form widget, you’re also able to style each section, for example, you can change the font color and size, you can also select the button and change its color.
If you want to make changes to the input text; under Style go to the Input option set Height to 53, you can also change the input background, and under Typography, you can change the font size and color, and many other settings you can edit to your preference (09:38).
After making the changes just hit the Update button.
Back to your WordPress dashboard, go to Pages look for the Write Us page, click view to open it up (09:52)
To test out the form, fill in your information in the form and hit Send. when you send, a message comes up to show when the message has been sent (11:05)
Now you can go to your inbox and check out the new email from your website.
In Conclusion
That’s how you can add a custom Contact Form 7 in Elementor, and be able to style it up to your liking as well.
If you have any questions or comments let me know in the comment section below.
Remember to subscribe to my newsletter and Youtube channel for more tips and tutorials.
