Elementor Contact Form 7 | Contact Form 7 Widget For Elementor

Changelog

Version: 1.2.0 – Date: 23-Oct-2023

• Updated: Elementor deprecated functions
• Compatibility with WordPress latest version.
• Compatibility With Elementor Latest Version.

Version: 1.1.9 – Date: 19-July-2023

• Fixed: Escaping issue in the recommended plugins

Version: 1.1.7 – Date: 04-July-2023

• Compatibility with WordPress latest version.
• Compatibility With Elementor Latest Version.

Version: 1.1.6 – Date: 01-Feb-2023

• Added: Nonce verification for recommended plugins
• Improved: Coding standards in some areas

Version: 1.1.5 – Date: 07-Nov-2022

• Compatibility with the latest WordPress version.

Version: 1.1.4 – Date: 26-Sep-2022

• Added: Recommendation Menu
• Compatibility with latest WordPress version.

Version: 1.1.3 – Date: 07-June-2022

• Compatibility with latest WordPress version.

Version: 1.1.2 – Date: 10-Feb-2022

• Compatibility with latest WordPress version.

Version: 1.1.1 – Date: 12-Dec-2021

• Solved : Block showing issue in widget block editor
• Solved : some minor css issue
• Solved : redirection issue after plugin activation

Version: 1.1.0 – Date: 21-Oct-2021

• Add Gutenberg block for Contact Form 7

Version: 1.0.9 – Date: 31-Aug-2021

• Compatibility With Elementor Latest Version

Version: 1.0.8 – Date: 25-July-2021

• Compatibility With WordPress Latest Version
• Compatibility With Elementor Latest Version

Version: 1.0.7 – Date: 12-July-2021

• Added Admin Menu.

Version: 1.0.6 – Date: 31-May-2021

• Elementor capability tag added.

Version: 1.0.5 – Date: 25-April-2021

• Capability With Latest Elementor Version.

Version: 1.0.4 – Date: 24-March-2021

• Capability With Latest WordPress.

Version: 1.0.3 – Date: 29-Dec-2020

• Capability With Latest WordPress.

Mô tả

This plugin adds new element / widget to Elementor Page Builder which helps you to easily drag and drop contact form 7 forms from a drop down list. No need of going in cf7 & copying the shortcode and addding to shortcode widget of elementor anymore !!

• Check out our new feature to edit and create contact form from elementor editor. You don’t need to leave elementor editor to modify or create contact form 7. boom!
• Now only Drag and drop the widget inside elementor builder & choose your contact form.
• Multiple style options, hover, focus and even custom css option if you are into it.
• Want to define style for input, lable, send button, success ? No problem ! This plugin let’s you do those directly from elementor screen!
• Want to add custom page to redirect to when the form is submitted ? That is also possible now !Yet this is just a simple plugin for simple users 🙂
• What’s more interesting is that you can have multiple form of the same single contact form 7 form with different rules and design with this on same page !

For more details :VOID CF7 Elementor Widget.

For our other elementor & WP works visit : VOID CODERS.

For updates follow us on : Facebook.

Missing a feature or Found a bug? : Feature Request / Bug Report.

Need to design Contact form 7 Emails with Elementor?

👉Check Elemailer – A drag & drop email builder for WordPress.

Version 2.0 Preview ( New Style controls with hover, focus, gradient etc )

Edit/Add contact from inside Elementor

Another Preview

What Does This plugin give you?

1. For editing or creating contact form 7, You don’t have to leave elementor editor. New popup modal will be open on elementor editor. Edit or create forms on the fly!
2. Easy use of contact forms created with Contact form 7 pluing inside elementor live editor
3. Add CSS directly from elementor live preview to your contact form 7 for different field type!!
4. Add any WordPress page as thank you page with this directly from elementor edit screen when you add the VOID Contact Fom 7 Widget!
5. Use Single contact form 7 with different Style & redirect rule(Thank you page on success) on the same page with this.

Note: This plugin is an addon of Elementor Page Builder (https://wordpress.org/plugins/elementor/) and will only work with Elementor Page Builder installed along with Contact form 7 plugin.

Update Instructions

Update the plugin either via wp dashboard or via FTP. After update make sure you clear your browser cache.

How to Activate and use the Contact Form 7 Widget?

Go to

• The Plus Settings → Plus widgets
• Search the widget name and turn on the toggle then click Save.

Once the widget is activated, make sure you have created at least one form in the Contact Form 7 plugin.

Now add the Contact 7 widget on the page and go to Content > Select Form and choose your form from the dropdown list.

Now you will be able to see the contact form on the page with a preset style.

You can set the overall alignment of the form from Alignment.

From the Outer Section Styling dropdown under the Extra Options tab, you can choose a styling option for the outer sections of the form.

Free Contact Form 7 Styler Widget

With this widget, you can easily add beautiful contact forms to any page or post on your Elementor website. Get your Contact Form 7 widget for Elementor today and start creating stunning forms in minutes!

Thank you for your interest in contacting us! Please use the form below to get in touch with our team. We value your input and strive to respond to all inquiries as quickly as possible.

Installation

This section describes how to install the Contact Form 7 Widget For Elementor Page Builder and Gutenberg block Plugins for WordPress get it working.

1) Install

Install:

1. Go to the WordPress Dashboard “Add New Plugin” section.
2. Search For “WPForms Widget For Elementor Page Builder”.
3. Install, then Activate it.

OR:

1. Unzip (if it is zipped) and Upload
   
ht-contactform

   folder to the
   
/wp-content/plugins/

   directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress

Nhật ký thay đổi

= 2.4=* Fix: Compatilbity with latest wp version* Fix: Broken access control issue (minor)

2.3

• Fix: Elementor latest version compatibility

2.2

• Fix: Elementor latest version compatibility
• Fix: Removed user opt in system to remove any vulnerability related to the system

2.1.1

• Fix: Elementor latest version compatibility

2.1

• Tweak: Updated to new wp version support
• Tweak: Change of notification.

2.0

• New: Added many style option in Style tab

1.1.9

• Fix: Tweak for banner
• Fix: Compatiblity with latest Elementor & Elementor pro

1.1.8

• Fix: Fatal error if folder renmaned / site migration is done
• Fix: Compatiblity with latest WordPress version
• Fix: Compatiblity with latest Elementor & Elementor pro

1.1.7

• Fix: Elementor compatiability added.
• New: Added opt-in system for sending updates if needed

1.1.6

• Fix: Elementor compatiability added.

1.1.5

• Fix: Elementor editor js issue during cf7 create and update on elementor editor.

1.1.4

• Fix: Notice dismissible issue fix.

1.1.3

• Fix: Compatiable with elementor 3.x.
• Fix: Fix some js error with new version of wp and elementor.

1.1.2

• Fix: Editor panel data loose issue solved after comeback another control sections/ widgets.

1.1.1

• Fix: Js erros on frontend

1.1.0

• New: Add and Edit contact form without leaving elementor dashboard.

1.0.9

• Feature added – External thank you page

1.0.6

• Css added Number control
• Any post type url from the site for redirect url

1.0.5

• Css added Hover button

1.0.4

• Css added for select box

1.0.3

• CSS Fix

1.0.2

• Define Any page as thank you page
• More Comporftable Select2 for selecting Contact From

1.0.1

• Custom CSS Adding option

1.0.0

• Initial Release

Looking for a simple way to customize your Contact Form 7 with Elementor?

Contact Form 7 is one of the oldest and most popular contact form builders available for WordPress. You can measure its popularity by seeing that the lite version of the Contact Form 7 has 5+ active installations to date.

Though Contact Form 7 included all advanced and necessary features required in a form builder plugin, customizing its styling settings is tricky for beginners, and it doesn’t come with any built-in styling customization features.

So in this article, we’ll show you how to style Contact Form 7 with Elementor page builder – without adding any custom code and HTML CSS.

Before we start, let’s get an answer to a basic question.

Can You Use Contact Form 7 With Elementor?

Yes, you can easily use Contact Form 7 with the Elementor page builder using the third-party plugins.

There’s no in-built feature of the Contact Form 7 plugin that allow you to integrate it directly with Elementor but using the 3rd party plugins and addons such as PowerPack Addons for Elementor gives you the flexibility to use and style Contact Form 7 in the Elementor live editor.

PowerPack Elements is one of the best elementor addons present in the market. It comes with many creative and advanced widgets, including the form styler widgets for popular WordPress form plugins.

The Contact Form 7 form styler widget of PowerPack lets you customize your Contact Form 7 forms without any hustle and bustle.

This form style widget is packed with amazing styling features and functionality that lets you style every element of your contact form in just a few clicks.

So let’s see how you can use PowerPack Contact Form 7 styler widget to style Contact Form 7 on your WordPress website using Elemntor.

Contributors & Developers

“Contact Form 7 Widget For Elementor Page Builder & Gutenberg Blocks” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Contact Form 7 Widget For Elementor Page Builder & Gutenberg Blocks” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Styling Submit Button of Contact Form 7 in Elementor

By default, the Contact Form 7 Submit button uses your current theme colours. But what if you want to customize the Submit button colours?

There are no settings within Contact Form 7 to change the style of the Submit Button, you have to use custom CSS for that.

But The Plus Addons for Elementor Contact Form 7 widget makes this process extremely easy, even for a non-technical person.

To style, the Submit Button of Contact Form 7, go to the Submit/Send Button in the Style tab.

From here, you can customize the Submit Button any way you want, like setting a custom width, padding, margin, typography, colour, background, border etc.

Styling Input Fields of Contact Form 7 in Elementor

Contact Form 7 is one of the most popular contact form plugins in WordPress because it has minimum settings and is very easy to use. But the downside of this it has no styling options.

So styling the Contact Form 7 elements like the Input Fields can be difficult for non-technical users.

But with The Plus Addons for Elementor Contact Form 7 widget, you can easily style the various Input Fields like text, email, URL, number, telephone etc.

To style, the Contact Form 7 Input Fields, go to the Style tab Input Fields Styling.

From here, you can style everything related to the Input Fields like typography, colour, background, border, padding, margin, placeholder colour etc.

Styling Textarea of Contact Form 7 in Elementor

When it comes to styling the Text area, often called the message box in Contact Form 7, it has different properties compared to the Input Fields.

That is why you will find a different section in The Plus Addons for Elementor Contact Form 7 widget for the text areas.

So in order to style the Textarea go to the TextArea (Message) Field in the Style tab.

Similar to the Input Fields, you will find all the styling options for the Textareas like typography, colour, background etc.

The Best Contact Form 7 Styler for Elementor

This widget will allow you to customize the style of your Contact Form 7 forms on your Elementor website. You can customize each element separately to fit the design of your website.

* The usage of the widget requires downloading and activating the plugin Contact Form 7 from the WordPress Plugin Directory.

Thank you for your interest in contacting us! Please use the form below to get in touch with our team. We value your input and strive to respond to all inquiries as quickly as possible.

How to style Contact Form 7 with Elementor

Before we start, make sure you have installed and activated these plugins on your WordPress site:

If you prefer watching a video guide, check out the video below for detailed instructions on the tutorial.

Build a Form Using Contact Form 7 Plugin

Once you activate all the plugins mentioned above, you need to create a form using Contact Form 7.

Check out the doc getting started with Contact Form 7 for more information.

Create a New Page or Edit an Existing Page in Elementor Editor

Now that you have created your form, you need to add a new page or edit the existing one and open it in the elementor editor.

Drag and Drop the PowerPack Contact Form 7 Style Widget

Once you have opened the page, search for “contact form 7” in the search bar and drag & drop the widget on the page.

Make sure to check for the PowerPack PP sign on the top-right corner of the widget.

Customizations in the Content Tab of the Contact Form 7 Styler Widget

The Content Tab of the PowerPack Contact Form 7 widget consists of 2 sections: Contact Form & Errors.

Select Your Contact Form

The first thing you need to do is select your Contact Form 7 from the drop-down menu. As soon as you choose the form, it will appear right away in the editor.

Add Customized Form Title and Description

As you can see in the above video, the form includes default fields and options. With PowerPack Contact Form 7 styler widget for Elementor, you get plenty of options to style & customize these options as per your liking.

You can add an attractive and custom title and description to your form from the Content Tab.

Also, if you want, you can hide or show the form Title, Description, and Labels by simply clicking on the toggle button.

Show/Hide Error and Validation Messages

Using the Error subsection, you can easily display an error and validation message to your form users.

Customizations in the Style Tab of Contact Form 7 Styler Widget

The Style Tab of the Contact Form 7 styler includes styling options to customize the look and appearance of your contact form.

Let’s see what all customization options you get here:

Style Form Title & Description

The first section in the Style Tab is Title and Description, and as the name indicates, here, you get options to give styling to the form title and description. You can:

• set form title and description’s alignment to left, center, and right.
• change title, text color, and typography.
• change description text color and typography.

Styling Options for Input & Textarea

Form Input Fields and Textarea are generally ignored by the site owners when it comes to styling options. But the PowerPack form styler widget allows you to style Contact Form 7 input fields and textarea effortlessly.

Here you get options to:

• add background & text color
• adjust the spacing between fields
• set text-indent for input fields
• add a border and select border radius and color
• Alter typography for text inputs
• and many more.

Customize Placeholder

In the following subsection, you get options to customize the form placeholder text. You can show/hide the placeholder text by toggling on/off the button.

Further, you can change the placeholder text color and customize the typography.

Style Radio and Checkbox

With the PowerPack Contact Form 7 styler widget, you can add custom styling to the Radio & Checkbox button.

First, toggle on the Custom Styles button from Radio & Checkbox section for adding a custom style.

As soon as you enable the button, you will be displayed with the radio and checkbox button’s styling options.

Here you can choose the size and color for the button. Also, to make your form design more attractive, you can add a border to your radio and checkboxes.

Customization Options for Error and Validation Message

PowerPack Contact Form 7 styler widget allows you to display an error message and gives you plenty of options to add styling to it.

You can style errors and validate messages by altering typography, adding background and text color, and setting up borders and margins.

Style Contact Form 7 Submit Button

Submit button is one of the most elements of any contact form, and with the PowerPack widget, you can style the submit to make it more eye-catchy. Here you get styling options to:

• set alignment of the submit button to left, right, and centre
• choose submit button width
• sdd background and text color
• adjust border-radius and padding
• customize typography by choosing a font, text size, text style, and more
• and many more

Final Outcome: Customized Contact Form 7

This is somehow your contact form looks fully designed and styled.

Get PowerPack Contact Form 7 Style Widget for Elementor

This is how simple it is to style Contact Form 7 using Elemntor and PowerPack. I hope this tutorial helps you create beautiful contact forms on your WordPress websites.

PowerPack Elementor addons come with 80+ creatively designed elementor widgets and 200+ pre-made page and section templates.

These widgets’ pack helps you create advanced Elementor websites without any coding. Click here to get PowerPack now!

If you like this tutorial, please share your comments in the comment section below.

How to Add a Contact Form 7

This step-by-step tutorial will take you through the process of adding the contact form to your website using the Contact Form 7 widget of the JetElements plugin.

A contact form is a vital element of any site. That’s why there are so many plugins for contact forms in the WordPress directory. One of the most well-known plugins is Contact Form 7. It allows you to create versatile forms and it is completely responsive and customizable within the Contact Form 7 widget of JetElements plugin.

So, before we start, please, make sure you have Contact Form 7 and JetElements plugin installed and activated.

1 Step — Building a contact form

Open your WordPress Dashboard and go to Contact > Add New.

In the Form tab panel, you can see a form template where there is Your Name field, Your Email field, Subject field, Your Message field, and the Send submit button. This is the classic contact form. You can edit it using the tag-generator tools. If you need any extra help, read a tutorial on Editing Form Template.

Give your contact form a name by typing it in the Title field. In case you want to customize the Mail template, the Messages, or some Additional Settings, look through the corresponding tabs.

When you are done, scroll down to the bottom of the page and click the “Save” button to save all the changes.

2 Step — Adding the contact form to your page

Open the page where you want to add your contact form to with Elementor page builder. Find the Contact Form 7 widget, then drag and drop it to the page.

The next step is to select the form template in the drop-down list.

As you can see the form is totally white.

Click the “Edit Section” option and open the Style tab in the left-side menu.

In the Background accordion block of the Style tab, you can decide if you want the background to be an image, a video, or a gradient. This is an example of what you could create:

Finally, go back to the Contact Form 7 widget settings, open the Style tab, and style up the contact form. For example, like that:

In the end, click the “Publish” button at the very bottom of the Elementor panel.

So now you should be afraid of nothing when it comes to creating a contact form!

Contact Form 7 Widget for Elementor

The Contact Form 7 widget is a valuable tool that makes customizing the appearance of your contact forms in the Elementor page builder easier. With this widget, you can enhance the visual appeal of your contact forms directly from the page builder interface.

Editing Your Form

From the editor panel, you may create and edit all the fields you wish to capture in your forms. The form widget supports most all popular field types such as text, text area, radio buttons, selectors, and more. These fields can also be set to required if desired.

You may style the forms by setting the column width layout to use fields on the same line.

In our documentation, you will find a complete breakdown of all the available controls and settings for forms. Here is a directory of topics to guide you through the complete process.