Contact Form 7

The Contact Form 7 Element by Master Addons is a specialized widget used to integrate and style forms created using the popular Contact Form 7 plugin within your Elementor designs. This allows you to leverage the robust functionality of CF7 while gaining powerful visual customization through Elementor.

Using the Contact Form 7 Element, you can:

• Select any existing Contact Form 7 form from a dropdown.
• Choose from multiple Design Variations (Style One through Style Eleven).
• Control the visibility of Error Messages and Validation Errors.
• Fully customize the Form Container, Input & Textarea Fields, Labels, and the Submit Button for Normal and Hover states.
• Style the display of Error and Validation Messages.

So, let’s see how to add and customize this element.

What Is the Contact Form 7 Widget in Elementor? #

The Contact Form 7 Elementor widget is a Master Addons element that displays any existing Contact Form 7 form inside Elementor and gives you full visual control over its design. It keeps CF7 handling the form logic and email delivery, while you style the container, input fields, labels, submit button, and error messages from Elementor’s Style tab. Master Addons ships eleven ready-made design presets (Style One through Style Eleven), so you can restyle a plain CF7 form to match your site without writing any CSS. It is part of the free Master Addons widgets and extensions library.

Adding and Configuring the Contact Form 7 Element #

To add a styled Contact Form 7 form in Elementor: edit your page with Elementor, drag the Contact Form 7 widget onto the canvas, select your form from the dropdown, choose one of the eleven design variations, then fine-tune the container, fields, labels, and submit button in the Style tab. The steps below walk through each part in detail.

Follow these steps to add and configure the Contact Form 7 Element on any page of your website.

Step 1: Create or Edit a Page #

1. From your WordPress dashboard, go to Pages → Add New to create a new page. You can also select an existing page and click Edit.
2. Next, click the “Edit with Elementor” button.

Step 2: Find the Contact Form 7 Element #

1. In the left-hand Elementor panel, use the search bar to find “Contact Form 7.”
2. Drag and drop the addon onto your desired section of the page.

Step 3: Customize the Contact Form 7 Settings #

After placing the addon, you’ll find the customization sections in the left-hand panel, primarily under the Content and Style tabs.

Content Tab #

This is where you select the form and define error visibility.

Contact Form 7: #

• Select Contact Form: Choose the specific Contact Form 7 form you wish to display from the dropdown list.
• Errors Style (Error Messages / Validation Errors): Choose whether to Show or Hide the overall submission success/failure messages and the field-specific validation errors.

Design Layout: #

• Design Variations: Select a pre-designed style for the form (Style One through Style Eleven).

Style Tab #

This is where you control the visual appearance of the form and its elements.

Form Container: #

• Background Type: Set the background style for the entire form container: Classic or Gradient.
• Border Top Color: Set a color for the top border of the container.
• Form Width (%) / Form Padding: Control the size and internal spacing of the form container.

Title: #

• Color / Alignment / Typography: Style the title of the form (if one is present in the CF7 structure).

Input & Textarea: #

• Background Color / Text Color: Set the background and text color for all input and textarea fields.
• Padding: Adjust the inner spacing of the fields.
• Field Width (%): Set the horizontal size of the fields.
• Border Type / Border Radius: Set the border style and rounded corners for the input fields.

Labels: #

• Color / Typography: Style the text color and font settings for the field labels.

Submit Button: #

• Button Typography: Control the font settings for the button text.
• Normal / Hover: Set the following for the button in both states:
  • Background Type
  • Text Color
  • Border Color
• Border Radius / Padding: Set the rounded corners and inner spacing of the button.

Errors: #

• Error Messages (General): Style the main submission error messages (often global error/success messages).
  • Text Color / Background Color / Border Type.
• Validation Errors (Field Specific): Style the error messages that appear beneath individual fields (e.g., “This field is required”).
  • Background Color / Text Color / Border Type.

Step 4: Save and Publish Your Page #

Once you’ve customized everything to your liking:

1. Click the “Publish” button (if it’s a new page) or “Update” (if editing an existing page).
2. Test the form submission and error messages on the frontend to ensure all styles are applied correctly.

Frequently Asked Questions #