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/feature/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?

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.

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).

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).

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

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

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.

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

Hover (Tab)

• Text Color
• Background Color
• Border Color
• Box Shadow