Gravity Forms is one of the most popular plugins for building contact forms on a WordPress website. It offers seamless customization, and you can add loads of functionality to your forms with this plugin.
Here we will see how you can create and customize a contact form of Gravity Forms with Elementor.
- Elementor Plugin: For customization of the form using the editor.
- PowerPack Lite Addon for Elementor: This is required to bring the integration of Gravity forms to Elementor editor. You can get it here for free.
- Gravity Forms Plugin: And of course, the gravity forms plugin to create the form.
Make sure you have these plugins installed and activated before we go any further.
Style Gravity Forms with Elementor
If you would rather prefer to watch a video, you can check out the video down below. If not, you can go with the instructions in this blog.
Firstly, you will require to create a form if you have not already created. For this, go to your WordPress dashboard and click on Forms > Add New. Now create a form like any other with the Gravity forms builder. You can add a name field, email field, phone number field, and a message text area. This is what usually goes for a typical contact form.
Once you have created your form, we can now go to the customization part of the contact form. Go to your Contact page or any page where you wish to add the contact form and open it in elementor editor.
Once you are in the editor, drag and drop the Gravity Forms widget on the page. Now we will begin customizing our contact form made with elementor.
Now, we need to select a form from the drop-down. Select a form from, and it will appear right away on the editor. You can enable disable the labels, texts, placeholders, etc. from these options. You can also enable or disable the errors to the forms.
The style tab allows you to change the design, look, and appearance of the form. You can customize the text area, labels, radio buttons, checkboxes, submit buttons easily from the settings.
Here I will change the input boxes’ width and the text area height. I also redesigned the color scheme of the button so that it matches the theme of the layout. Since the contact form was looking little compact, I went ahead and added a little padding to all the elements with the respective settings.
After making all the changes, here is what the final design looks like:
Summing It Up!
There are loads of design combinations which you can do to make the form look just like the way you want. Here are a couple of other Contact Form designs which you can make with the PowerPack addon’s Gravity forms widget. This will help you visualize what all you can create.
If you liked this widget, you can get it from the WordPress Plugin Repository. If you wish to extend the widgets and your editing powers to the next level, you can try out our PowerPack Addon for Elementor Pro version. It comes with 50+ widgets which you can use to create more impressive and functional websites with elementor.
Get the Pro version here.
What do you think of the Gravity Forms widget? Comment it down below!
If you found this tutorial useful, do share it with others!