How to Customize Contact Form 7 with Elementor? Style contact form Elementor free and JetElements

How to Customize Contact Form 7 with Elementor? Style contact form Elementor free and JetElements

Hey and welcome to this tutorial. In this
video, I’m showing you how you can style and customize your contact form with the
help of Elementor Page Builder. You will need two tools in order to start
styling and customizing your contact form with an Elementor editor and
you’re gonna see all the changes in real time. So, the first plug-in you’re gonna
need is Contact Form 7, as you can guess. But in my case I’m using Imperial
WordPress theme that you can get on And this theme
already has this plug-in and a bunch of other plugins including the plugin that
we’re going to use today, which is called JetElements. This plugin allows you to expand the possibilities of your Elementor page builder adding a ton of widgets and a ton of possibilities. So, here you can see the elements that this plug-in adds to Elementor and you can read more about it on You can find this plug-in and many others if you go to
Elementor Marketplace which is on, and then only go to Elementor WordPress plug-ins, but let’s
finally start customizing our Contact Form. So, the first thing that you’re
gonna need is to go to your WordPress dashboard, find the ‘Contact Form 7’
option here in your navigation menu, go and create a form like I did. An Imperion WordPress Theme also has forms pre-made, so you’ll not even need to
bother and create them on your own. So, what I’m gonna do is to go and create a new section split in two, then I will copy this column and paste it over here, like that, and then I need to go to
elements. And once you install JetElements plug-in, you’re gonna find all
of these widgets over here and you will find ‘Contact Form 7’ widget or you
can also use this search. You just grab the widget and you drop it onto a new
column, and here you can select the contact form that you want to style, so this is
the contact form that you are starting with. It has some design but it doesn’t
really look good, so what do we need to do is to go to the ‘Style’ tab. Also, if you
want to add a background to your contact form, you can do it over here in the
column settings, and I’m gonna follow just the same pattern as it is here, and
give it a little gradient background like that. And then I’d click on my form
once again and go to ‘Style’ tab, where I can tweak the topography
sightings of the text that you’ve got in your contact form. So, the size, color and
just all their regular settings that you’ve got for your typography in any
other widgets. You can also customize the look of the not valid notices. So and I’m
showing it to you in detail, but just remember that they are in here. Controls. What are controls? Here you can customize the look of the field, of the input field
so there are three different states: ‘Normal’, ‘Focus’, and ‘Not Valid’. And you can change the background and the look of each state. Then, the ‘Submit’ button, so you can also style the button that you’ve got in here, at the bottom. So, as you see,
there’s a lot of customization options. So, you can play around and create a
really good-looking design, and see all the changes that you apply in real time.
Also, you can customize the alerts. Like when you have typed in something that is not valid, or when the form cannot send the message, or something, and the send
success as well.
And here go. We have created a simple contact form,
which is pretty good-looking and we have seen all the changes that we apply, which
made the customization process extremely easy and enjoyable. Don’t forget to go and check out Imperion WordPress Theme on and the Elementor Marketplace where you can find a ton of cool and powerful add-ons for Elementor
Page Builder. Also, check out JetElements plug-in, which made it possible to create
a contact form within Elementor. And, that’s pretty much it for this video! If
you liked the video, leave a thumbs up, and don’t forget to subscribe to our
channel! Thank you for watching!

11 thoughts on “How to Customize Contact Form 7 with Elementor? Style contact form Elementor free and JetElements”

  1. Hi, Just got to admire WordPress. I work with several different page builders but this particular one is one that I use a lot.
    Thanks for the practical videos. 🖤

  2. why is ur website link as new/wp-admin where is .com or .in or anything.
    for eg

  3. just my 2 cents i have recently created this plugin called "Innozilla Skins for Contact Form 7" and it will really help you style your "contact form 7" Form.

  4. i have recently downloaded a plugin called "WOW Styler for Contact Form 7" and it really Customize, style and theme your WordPress Contact Forms with an intuitive plugin that design your contact forms live without CSS coding.

Leave a Reply

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