Usually, a website owner needs some type of feedback form to interact with their visitors and users. One of the best is Contact Form 7. It is a simple and flexible feedback form widget. So, in this article, I will help you add Contact Form 7 to your website with the help of JetElements add-on for Elementor. Follow these step-by-step instructions and the installation will be easy for you.
- Login to WordPress Dashboard and go to Pages > All Pages.
- Select the necessary page and click Edit with Elementor option.
- Since you’re going to create your contact form at the bottom of the page, scroll down and add a new section.
- Then proceed with customizing its appearance in the menu on the left. You can edit three sections: Layout, Style, and Advanced.
- In the Style section you can select the background type and then choose and upload an image from the Media Library.
- With the help of the Advanced section, you can apply custom padding to your section.
- After that, go to the Elements search field, find Contact Form 7 widget, and drop it to the section area.
- On the left in the Content tab, you can select one of the existing contact forms from the dropdown list. Please note, that you can create a contact form template using a Contact Form 7 plugin beforehand.
- To style its appearance go to the Style section. It contains all kinds of customization settings which can help you make the contact form look really majestic.
- Let’s begin with styling up form texts in order to make them more readable.
- First, choose an appropriate color using the Color Picker.
- To change text typography, enable this option by toggling it to “yes”.
- Now you can see the additional settings, where you can select the needed font size, font family, and the weight.
- Below this, you can also customize invalid notices. Just select the color of the notice, change the font typography, and apply your custom values including margin and alignment.
- In the Controls block, choose a normal mode and switch the placeholder color to any other you like.
- Another step is to change the padding – just input the needed values in pixels in the corresponding fields.
- Also, you can change the margin values in the same way as the padding ones.
- Then select a border type and input your custom border width. In addition, you can change the border color to the one you need.
- After that, toggle the Box Shadow option to “yes”. Customize the shadow color, its transparency, the shadow spread, and the shadow position according to your needs.
- Now let’s customize the submit button.
- Change its color in a normal mode and enable the typography options for the button texts.
- Proceed with changing the font size, font family, font weight, and padding values.
- Also, you can set a custom border radius to make the button angle small and smooth and a certain border type.
- Now let’s return to the beginning of the tab and change the button settings in the Hover block, including button and button text colors.
- And the last step is customizing alert style.
- Here you can change the alert typography options, apply a custom border radius for the alert box and change the alert colors.
- Now your new contact form is ready and you can add a heading module just above it to create a heading that will engage the visitors to use it.
- Go to Elements Panel and search for the Heading widget.
- Grab it and drop it onto a place where you want to locate your heading.
- Change the default text in its Content section to a new one.
- Then go to the Style section and change the heading text color, alignment, and other style settings.
- Also, you can change the heading text typography to the one matching your contact form.
Final Say
And that’s all! We’ve just created a new contact form using the Contact Form 7 JetElements module. Save the changes and navigate to your page to see the results.
Read Also
How to Style and Customize Contact Forms with Elementor Page Builder
Elementor Tip: Image inside Text – Elementor Tutorial
Elementor From A to Z: Sheer Selection Of “How To” Tutorials