How To Add A Custom Contact Form 7 In Elementor with HT Mega Addons

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)

OUfdMhzON3Asl80vDTOjFg2iGrhm5BnDyvooRrx9O6 yogrJ9 EWO9zAIH4dOPBrN3 IQjPCUENrh rDE0cnSlQl21C7zHWnpFqtkgijzGk 2XpBd50UsuRzFMNki7Kh2RbJIa2

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)

e7WgCj4 al2iqcwChp7YcxLpjL79s0ciDN6nMB75wxMh uXCanF80CUc9YrHHJ3fbfi4FR2qzIhn73CeypNEzkPDpsu4bRvjG0kEJG26lupvE055AI41sUq2lb ZUkHTGiC1PPU

When you click on the contact form, you’re given a default contact form created with the contact form 7 plugin. (01:23)

hF EBvNrgzzw00oHqav05SYcNbR9ltb4xoSK Px8GwCJH08CcPKC5J66JjJhR2bm8X1s6Hv3wBVtTVVx3VV wuPqdKlEsaxcStCo7pkNsR

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.

0TkXFGuOmfHjDYwnqDRnxr2Xz9aVKaroxnz7yVfv43l8dsPG4uDroOqFqw4QPXBqkYFYM78aL2PsEa6 LL6vYukvf8NUc7P2E9r4s PCafQ9rI

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.

Hv87VKK1oXCCaCoR6N0hQqGB2HTFTAnBn tDSx0NY84uis3jKfgNh0xAwwFFoON3DvualeRzMQGjmTgVicZSHf7fO8pp72

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. 

Rt mw7 DaSXn8L7zW0UhtnJcHagy3HlmlK7xUiDsvn9GXMR7 wILxiBoJl 8V0sFsjqY6sEg tJVl7fvShGuHVKkrK AePZvY7tcTLCWUt8a71P14U nScd5PejwFeT0Vw7F 5CQ

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.

gA4SvQ07FscsKBatOuKfTH010k5 LO5NFKfPjfPaTDqiuEO3HZKnkJJzwgOY

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.

JzsOQ0bNUqfP QK71vCaVEOZO oa9VcqT9t2jzWm7sapeb 0tDyoxn Q8RcyDmQK27 ql28c0TqWA z1nTd7VbIBHFXoARmsvzwpDDR snuUDI2qxAPZFEHsFj71 h7dY4trVGd

The form works just fine, however, with the shortcode you’re unable to style it up to look like this (04:01)

fOi23 ZNN6J8ad6Eg3q oxT3YrgPiseeJ 2aXR5Sn LUG9rpQFhRAIp kia8xplaLls0ixpRNSCcTBoIvI9p Y6Uy8mFOE4 nxOrZKxMO3 U2oYgB51fV00cLzrVKJrE7Ow6 7RU

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)

G 2fqsUpceoxbSjIB7JaRvcWmcopxCODU2X4dk0zNID1I9Ppon11J9JS0ckatLGdZiSWOKLVKZXO1sSEwGBM6jlgDAWLDWZZjkF33f2PNaMg Bidz8 CM5sNSqDIA uHjPe7O t

In the Add Plugin area search for a plugin called HT Mega Absolute Addons for Elementor Page Builder, install and activate it (04:25)

IScPEKqlhulE0bxmk77JxS3DFNJ5 LmxJRyPbjfufz 07JP Tegz2i

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

qmxMYzJGcOBSIgm86M gajzC3A7mOPtaMPN7 5c3v9U1A53NUPVxU83e67FdsVQeeW2p7RBpKDzF30ZN7O l8O07ZifEU3Ml6cUt75bnyabB9eu6qV PZ3EnTEC7EdpDszZSgJPp

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.

O8fYoylXxhyNt34l5n8ICf hxCaxtATvlIhmh7Y d tMK61659wKpe3 2fvSzCendyjQ7a8dOz56keRodYxmEusQFzuR1qY4kYoJ yYWJ4rCQnju6UVl 2iiLyOWqZ14nbjC4

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)

zw hiCuWHw cVf0GanNhSzqZX 63Yw11Roh73WxLou9aRmbeECUlVLBOB0ImtgsGOlyjVig YIXTyQ4Z5ypNPlac0IL51NvtqGWVmwYs PpfuZ12ow9ArqYvo3Wrc0D8tauaR6W

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)

qwFwo6MZI 1vp7VHd2xYhz5m

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

cjt875r 3NKDleUTJp ym5HWVpSX

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. 

Custom Contact Form 7 In Elementor

Back to your WordPress dashboard, go to Pages look for the Write Us page, click view to open it up (09:52)

LoYaabL9dheVD5uSCG 6p3YVOHkcbRQ7dMS3pUGPp426MjS0eN7TnZT62j8DrggQmJZO3E8trHsQy

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)

s0mAfSwwd8ovxlk3jrRitkn6vYYTaLI4aqRnRv4RpwELSvyMESFwflJfX17oqr0iCCkVD2 CN8Gm6oXGy71i0QJ7U8R6f WuM p7yITMHKkPkkoE3HHCkGfb

Now you can go to your inbox and check out the new email from your website.

twAJJWND TwJF9kIhsSSzrccWY t4TyzykkaiJNut7cLvmkyOon pPYYczO zDVH88bc4H

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users