Contact Form 7 Widget Tutorial

Intro

Contact Form 7 Widget for Elementor provides you with the ability to customize and style your Contact Form 7 very easily.

Contact Form 7 Plugin is the most used and downloaded Contact Form in WordPress Platform with more than 5 million active installations at the moment (in 2020).

In this tutorial we will dive into Contact Form 7 Elementor Widget, going through its available options and styling settings.

Click here to check Premium Contact Form 7 Widget demo.

Requirements:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Note: You have to install and activate Contact Form 7 WordPress Plugin in order to find Elementor Contact Form 7 Widget within the available Elementor widgets. Click here for further details: Why I Can’t Find Premium Contact Form 7 Widget?

An Arrow points at Elementor Contact Form 7 Widget in Elementor Control Panel
Premium Contact Form 7 Widget for Elementor

Key Features

Content

  • Contact Form
  • Fields
  • Button

Contact Form

  • Select Your Contact Form: you can select an already existing Contact Form from the Contact Form 7 Plugin, then start customizing and styling it using Elementor Contact Form 7 free widget.
Screenshot Shows Elementor Contact Form 7 Widget, Contact Form Settings, Selector Element to Select your Contact Form
Elementor Contact Form 7 Widget, Contact Form > Select Your Contact Form

Fields

Width

  • Input Field: Adjust the width for Input Fields [Name, Email, Subject, etc] in Contact Form 7, you can set the input fields width in pixels (PX), em (EM), or percentage (%).
  • Text Area: Adjust the width for Text Area [Text Message] in Contact Form 7, you can Set Text Area Width in pixels (PX), em (EM), or percentage (%).

Height

  • Input Field: Adjust the input fields’ height [Name, Email, Subject, etc] in Contact Form 7, you can set the input field height in pixels (PX) or em (EM).
  • Text Area: Adjust the text area height [Text Message] in Contact Form 7, you can set text area width using pixels (PX) or em (EM).
Screenshot Shows Available Options for Elementor Contact Form 7 Input Fields and Text Area
Contact Form 7 Widget for Elementor Page Builder, Content > Fields Settings [Width and Height of Input Fields, and Text Area]

Button

  • Width: Set the contact form button width (Submit Button), you can adjust the width of the button in pixels (PX), em (EM), or percentage (%).
  • Height: Set the contact form’s button height (Sending Button), you can adjust the height of the button in pixels (PX) or em (EM).
Screenshot Displays Button Settings in Contact Form 7 Elementor Widget
Elementor Contact Form 7 Widget Button Settings [Width, and Height]

Style

  • Form
  • Labels
  • Button

Form

  • Input Field Background: Set Background Color for Input Fields in Contact Form 7.
  • Padding: Set the padding for Input Fields in Contact Form 7.
  • Border Type: Set a border type for Input Fields in Contact Form 7. Choose from the following border types:
    • None (Default)
    • Solid
    • Double
    • Dashed
    • Groove
  • Width: Set the Width for Contact Form Input Fields’ border.
  • Color: Choose a color for Contact Form Input Fields’ border.
  • Border Radius: Set the border radius for Contact Form Input Fields using pixels (PM), percentage (%), or em (EM). Higher border-radius means a more circular border.
  • Margin: Creates space around Input Fields, outside of any defined borders. You can set the margin in pixels (PX), em (EM), or percentage (%).
  • Focus Border Color: Creates a border color for Elementor Contact Form 7 Widget Inputs Fields.
  • Focus Border Animation: Set Focus Border Animation to Off or On.
  • Focus Line Color: If the Focus Border Animation is “On”, then you will have the ability to select Focus Line Color.
  • Box Shadow: Creates a shadow effect on Contact Form 7 Input Fields: The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset
Screenshot Displays the Available Styling Options for Contact Form in Elementor Contact Form 7 Widget
Contact Form 7 Elementor Widget, Form, Styling Options “Form”
Screenshots Display Contact Form 7 Styling Settings and Contact Form 7 Styled Text Font Green, and Focus Animated Line in Pink Color
Form Styling Settings in Contact Form 7 Widget for Elementor Page Builder [Focus Line Color: Pink]

Labels

Default Typography

  • Default Font Color: Set the Font Color for Labels in Contact Form 7.
  • Typography: Style your Contact Form labels font using the following controls:
    • Font Family
    • Font Size
    • Font Weight
    • Text Transform
    • Font Style: select from
      • Normal
      • Italic
      • Oblique
    • Font Decoration: select from
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height
    • Letter-Spacing
Available Control Group for Typography [Font] in Contact Form 7 Elementor Widget
In Style, Typography Control Group: Font Styling Options in Elementor Contact Form 7 Widget

Input Typography

  • Input Text Color: Set the color for input text in Contact Form 7 Widget for Elementor.
  • Typography: Set the Font Color for Text Input in Contact Form 7.
  • Placeholder Color: Set Placeholder Text Color for Contact Form 7 Elementor Widget.
Screenshot Displays Available Settings for Styling Labels in Contact Form 7
Labels Styling Options in Contact Form 7 Widget for Elementor
Screenshots Display [Right] Settings for Labels Settings in Contact Form 7 Elementor Widget and [Left] Contact Form Text is Blue-Colored
Labels Styling Settings for Contact Form Using Elementor Contact Form 7 Widget

Button

  • Typography
    • Family
    • Size
    • Weight
    • Transform
    • Style
    • Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height
    • Letter-Spacing
  • Padding

Normal (Tab)

  • Text Color
  • Background Color
  • Border Type
  • Border Type: Choose from the following border types:
    • None (Default)
    • Solid
    • Double
    • Dashed
    • Groove.
  • Width (Border Type)
  • Color (Border Type)
  • Border Radius
  • Box Shadow
Screenshot Displays Available Settings for the Button in Elementor Contact Form 7 Widget
Elementor Contact Form 7 Widget, Button Styling Options [Normal]

Hover (Tab)

  • Text Color
  • Background Color
  • Border Color
  • Box Shadow
Screenshot Shows the Styling Settings in Elementor Contact Form Widget for the Button on Hover.
Contact Form 7 Button Styling Options [on Hover], Elementor Contact Form 7 Widget
Screenshots Display [Left] the Settings for Button in Contact Form 7 Widget for Elementor, [Right] Contact Form 7 Button Pink-Colored
Button Styling Settings [Normal] on Elementor Contact Form 7 Widget
[Left] The Settings for Button on Hover in Contact Form 7 Widget for Elementor, [Right] Contact Form 7 Button When Hovered
Button Styling Settings [Hover] on Elementor Contact Form 7 Widget

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.