Contact Form 7

The Contact Form 7 widget allows you to integrate your Contact Form 7 forms directly into Elementor layouts with full control over design, layout, and form contents. It’s perfect for capturing user messages, inquiries, feedback, or support requests. You can visually customize styles, titles, and input fields without touching code.

🚀 How to Enable the Contact Form 7 Widget

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Contact Form 7 widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

How to Use the Contact Form 7 Widget

Step 1: Add the Widget

• Go to Elements Panel
• Search for Contact Form
• Drag and drop the Contact Form 7 widget into your desired section

Step 2: Create a Form in WordPress

• Go to Dashboard → Contact → Add New
• Give your form a title
• Use the form editor to insert fields like:

• Click Save

Step 3: Style the Contact Form

• Choose a predefined style from the Style Panel in Elementor
• Match the form with your site’s design using the available layout options

Step 4: Select the Form

• In the widget panel under Contact Form, choose the form you created from the dropdown list

Step 5: Add Form Titles and Content

• Enable/Disable:
  • Sub Title
  • Title
  • Description
• Customize:
  • Subtitle (e.g., “Talk to us”)
  • Title (e.g., “Have any question?”)
  • Description (e.g., “We’ll get back to you as soon as possible.”)

Step 6: Customize Styling

Navigate to the Style Tab to adjust the following:

• Form Box: Border, padding, background
• Title & Subtitle: Typography, color, alignment
• Form Inputs: Field height, padding, text color
• Form Labels: Font and spacing
• Form Button: Color, typography, spacing, and hover styles

Features

• Full support for Contact Form 7 plugin
• Works with any number of custom fields
• Style the form layout directly in Elementor
• Pre-designed layout styles for a quick start
• Responsive design ready