Skip to content
default-logo
  • Home
  • Templates
  • Widgets
  • Modules
  • AI Builder
  • Pricing
  • Support
Buy Now

Getting Started

3
  • How to Install & Update BEW
  • How to Install, Activate & Update BEW Pro
  • BEW Dashboard & Settings Overview

How to use BEW Template Library

5
  • Getting started with Template Library
  • About Kits, Pages & Sections
  • Template Library Modal Guide
  • How to Insert Templates
  • Required Plugins When Inserting Templates

How to use BEW Widgets

24
  • Getting started with Widgets
  • How to Setup BEW Site Logo
  • How to use Dropdown Nav
  • How to use Woo Cart
  • How to use Woo Search
  • How to use Woo My Account
  • How to use Woo YITH Wishlist
  • How to use Woo YITH Compare
  • How to use Blog Grid
  • How to use Contact Form 7
  • How to use Woo Categories
  • How to use Woo Products List
  • How to use Woo Categories List
  • How to use Woo Archive Carousel
  • How to use Woo Archive Products
  • How to use Image Carousel [ PRO ]
  • How to use Testimonial Slider [ PRO ]
  • How to use Woo Product Slider [ PRO ]
  • How to use Woo Product Accordion [ PRO ]
  • How to use Woo Product Tabs [ PRO ]
  • How to use Woo Grid Carousel [ PRO ]
  • How to use Woo Hot Deals [ PRO ]
  • How to use Woo Grid Products [ PRO ]
  • How to use Query Management

How to use BEW Site Modules

4
  • Getting started with Site Modules
  • How to use Back to Top
  • How to use Site Preloader
  • How to use Reading Progressbar [PRO]

How to use BEW AI Builder

11
  • Getting Started with BEW AI
  • AI Provider Integration
  • How to use Text Generator
  • How to use Image Generator
  • How to use Bulk Text & Image Generator
  • How to use Repeater Generator
  • How to use Products Generator
  • How to use Blog Generator
  • How to use Saved Presets
  • How to use Generation History
  • Troubleshooting AI Builder

Frequently Asked Questions (FAQs)

1
  • BEW Frequently Asked Questions
View Categories
  • Home
  • Docs
  • How to use BEW Widgets
  • How to use Contact Form 7

How to use Contact Form 7

1 min read

The Contact Form 7 widget embeds one of your existing Contact Form 7 forms into an Elementor page, with a full set of styling controls so it matches the rest of your design.

Adding the Widget #

  1. Open the page in the Elementor editor.
  2. Search the widget panel for Contact Form 7, under the BEW Elements category.
  3. Drag it into any section or column.
  4. In the Content tab, use Select Form to choose from the Contact Form 7 forms already created on your site.

Note: This widget needs the Contact Form 7 plugin active, and at least one form already created in it. It shows an error notice in its place if the plugin isn’t active, and shows nothing if no form is selected.

The form’s fields, validation rules, and where its submissions get sent are all configured in Contact Form 7 itself — this widget only selects which form to display and controls how it looks.

Styling #

  • Label — a Show/Hide switch (on by default), color, typography, and alignment for field labels, plus a Not Valid Notices group for the color and typography of the small inline tips CF7 shows under an invalid field.
  • Inputs and Textareas — background, text color, and border color across Normal, Hover, and Focus states, plus typography, placeholder color, border, border radius, box shadow, margin, and padding. Applies to text-style fields only — not the submit button, checkboxes, or radio buttons.
  • Submit Button — text color and background across Normal, Hover, and Focus states, typography, border, border radius, box shadow, margin, padding, and a Full Width Button switch.
  • Alerts — typography, border, border radius, box shadow, margin, padding, and alignment for CF7’s response messages, with separate background/text/border color groups for each message state: Sent Success, Sent Error, Not Valid (the validation-summary box, distinct from the per-field notices above), and Spam Blocked.

Frequently Asked Questions #

#

Yes, both to build the form and for this widget to work at all — without it active, the widget shows an error notice instead of the form.

#

No. This widget only picks which existing form to display and styles it. Fields, validation, and the notification email are all set up in Contact Form 7’s own form editor.

#

Yes — the Alerts style section has separate color controls for Sent Success, Sent Error, Not Valid, and Spam Blocked messages.

Updated on September 8, 2026

What are your Feelings

  • Happy
  • Normal
  • Sad

Share This Article :

  • Facebook
  • X
  • LinkedIn
  • Pinterest
How to use Blog GridHow to use Woo Categories
Table of Contents
  • Adding the Widget
  • Styling
  • Frequently Asked Questions
    • Do I need the Contact Form 7 plugin?+
    • Can I add or edit form fields from this widget?+
    • Can I style the success and error messages differently?+
bew-logo-white

Everything you need to build stores and websites with Elementor: widgets, modules, 2,500+ templates, and AI content generation — all in one plugin.

Company
  • Affiliate Program
  • Privacy Policy
  • Terms & Conditions
  • Blog & News
Support
  • Support Center
  • Documentation
  • My Account
  • Community Forum
Product
  • Features
  • Templates (3,000+ library)
  • AI Builder
  • Plans & Pricing

Copyright © 2026 BEW. Made with

  • by
  • Bosa Themes