Contact Form 7

ElementsKit comes with the Contact Form 7 widget that adds up to the functionalities of the form builder plugin. You can customize the styles of Contact form 7 with Elementor by utilizing the page builder’s functionality to the full.

Read this documentation to learn how to create and customize the form using Contact Form 7 with Elementor.

Prerequisite: #

This widget is an add-on for Contact Form 7.

Therefore you need to have Contact Form 7 Plugin installed on your WordPress site.

Step 1: Create a form with Contact Form 7 #

  1. Go to Contact > Add New.
  2. Enter a form name.
  3. Configure the settings and attributes of the form.
  4. Click on the Save button.
Add New Contact Form 7 on WordPress

Step-2: Get Contact Form 7 in Elementor #

To get the Contact Form 7 on Elementor, first, enable the ElementsKit Contact Form 7 widget, then open the Elementor editor and drag & drop the widget to the design area.

Enable Contact Form 7 widget #

To enable the Content Ticker widget:

  1. Navigate to ElementsKit > Widgets from the WordPress dashboard.
  2. Find the Contact Form 7 widget from the list and enable the widget.
  3. Click on the SAVE CHANGES.
Enable ElementsKit Contact Form 7 widget

Drag and Drop the widget #

After that, drag and drop the ElementsKit Contact Form 7 widget into the Elementor editor.

Add contact form 7 widget in Elementor

Step 3: Select a form to edit with Elementor #

In this step, you can select which form you want to edit. For that, you can select the form from the drop-down list.

In Content > Contact Form 7 > Style you will find a list of forms created with Contact Form 7. Select a form and proceed to the next step.

Step 4: Customize Contact Form 7 with Elementor #

Now you can customize the styles of the labels, input field, and button of Contact Form 7 with Elementor.

Label #

  1. Typography: Set the typography for label text.
  2. Color: Choose a color text for the label text.
  3. Margin: Adjust the Margin for the form field label.
  4. Hint: You can change the typography and color of the placeholder as well.
Customize form label styles in ElementsKit Contact Form 7

Input #

  1. Padding: Adjust the padding of the input field.
  2. Width: You can adjust the width of the input field.
  3. Height: You can change the input field height.
  4. Margin Bottom: Change the margin at the bottom of the input field.
Adjust input field height width
  1. Textarea Height: For the long textarea field, you can change its height.
  2. Textarea Padding: You can also change the padding of the textarea.
Customize form input field
  1. Background Type: Choose a background color type (classic or gradient color).
  2. Color: Choose a background color for the input field.
  3. Border Radius: Set the border radius for the input field.
  4. Border Type: Select the input field border type.
  5. Box Shadow: You can set the box shadow for the input field.

You can set these attributes individually for Normal, Hover, and Focus modes.

customize form input field colors
  1. Typography: Set the typography for the input text.
  2. Text Color: Choose a color for the input text.
  3. Placeholder Font Size: Adjust the font size of the placeholder.
  4. Placeholder Color: Choose a color for the placeholder text.
Customize input text typography color
What are your feelings
Updated on January 28, 2024