Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Free

Contact Form 7 for Elementor Drop in any CF7 form and style it to match your site

The Contact Form 7 widget for Elementor puts a CF7 form on any page and gives you style controls for every part of it: inputs, textarea, labels, the submit button with eight hover styles, and the error and success messages. Your fields, emails and spam protection stay in Contact Form 7.

Try it free See the live demos
  • Any Contact Form 7 form
  • Input, label and textarea styles
  • 8 button hover styles
  • Message colours

Classic widget · Elementor 3 and 4Updated

Live demos

Seven CF7 form styles, live

Seven contact forms on small business sites, each styled with the Elementor CF7 widget. Hover the buttons, leave a required field empty to see the error, or fill the form in: it answers like Contact Form 7. On this page nothing is sent.

Arolax®WorkStudioContact
Start a project

Have an idea? Let’s make it move.

Tell us about the brand, the deadline and the budget. We reply within two working days.

Agency contact page

Studio contact form with a round button

A dark contact page for a motion studio. Underlined fields sit in two columns next to the intro, and the large round outlined button fills with lime on hover.

Hover the round button

In Button, Hover Style is Cropping, Icon Position is After and Border Radius is 100 px. In Input, the Border is a 1 px line on the bottom edge only.

NorthlightFilmsServicesContact
A man in a blue scarf beside a camel, a still from a Northlight filmProduction enquiries

Tell us about the film

Crew, kit and locations for features, commercials and documentaries.

Film enquiries

Production enquiry form with labels

A form for a film company: labels above square bordered fields, a dropdown for the kind of work and a large message box. The white button fills with green from the centre on hover.

Pick a project type

In Input, Height is 55 px with a 1 px Border. In Button, Hover Style is Cross and Icon Spacing is 20 px.

HaldenServicesCasesContact
Four Halden consultants planning around a tableFree first call

Book a 30 minute product review

Consultancy booking

Call booking form with rounded fields

A one-column form with tall fields and soft 10 px corners. The orange button turns navy from the centre outwards on hover.

Leave the email empty and send

In Input, Height is 70 px and Border Radius is 10 px. In Button, Hover Style is Cross and the Normal Background Color is orange.

Maison FormeProjectsStudioContact

A reading corner with a cane chair and oak shelvesInterior design

Plan a room with us

Visits on Tuesdays and Thursdays in Lyon and Annecy.

Studio contact page

Interior studio form with outlined fields

Labels sit above outlined fields in a two by two grid, next to a photo of a reading corner. The sand button turns black with an angled sweep, and its icon comes first.

Hover the button, then submit

In Input, the Border is 1 px and Padding is 19 px 25 px. In Button, Icon Position is Before and the Normal Background Color is sand.

MalepèreWinesVisitContact
The Malepère estate website on a tablet and a phoneCellar door

Book a tasting at the estate

Six wines, one hour, Tuesday to Saturday.

Tasting bookings

Tasting booking form with underlined fields

No boxes at all: labels and thin underlines on a dark page, with a blue pill button that fills with sand on hover.

Fill in the fields and book

In Label, Typography is 16 px at weight 500. In Button, Border Radius is 40 px and Hover Style is Cropping.

ShallyNew inStoresPress
A model in a pink summer dress turning on a balcony
Press and stylists

Request a sample

Press requests

Sample request form for stylists

A compact form with underlined fields and a black button with two rounded corners, 0 and 30 px, that turns white on hover.

Hover the button

In Input, Height is 50 px. In Button, Border Radius is 0 and 30 px, the Border is 1 px and Hover Style is Cropping.

Medica ClinicDoctorsPricesContact
Questions before a visit

Write to our front desk

For urgent care, call 111. We answer messages within one working day.

Clinic front desk

Front desk message form for a clinic

Four underlined fields in two columns, a message line and an orange button with 15 px corners.

Send a message to the desk

In Input, Height is 38 px with a thin bottom Border. In Button, the Normal Background Color is orange and Border Radius is 15 px.

Features

Key features of Contact Form 7

What the widget adds on top of a Contact Form 7 form, each tied to a setting in the Elementor panel.

Any Contact Form 7 form

Select Form lists every published Contact Form 7 form. An Elementor contact us form, an inquiry form, a feedback form, a support form or a job application form all work.

Input styling

The Input section sets Height, Background Color, Text Color, Placeholder Color, Border, Border Radius, Padding and Margin for text, email, URL, number, phone, date and select fields.

Textarea styling

The message box gets its own Textarea section, with height, colours, border, padding and margin.

Label styling

The Label section sets text colour, background, typography, border, padding and margin for every field label.

Eight button hover styles

Pick a Hover Style for the Elementor Contact Form 7 button hover: Divided, Cross, Cropping, Rollover Top, Rollover Left, Parallel Border, Rollover Cross or None.

Button icon

Add an Icon to the submit button and set Icon Position, Icon Spacing and Icon Size.

Error and success messages

The Message section colours the field error text, the error message and the success message, with typography.

Form wrapper

The Style section adds Padding, Margin, Background and Alignment around the whole form, so it sits well in a card or a dark section. Fields, mail and spam protection stay in Contact Form 7.

Step by step

How to style Contact Form 7 in Elementor

Five steps. The bold names are the labels in the Elementor panel.

  1. Install Contact Form 7 and Animation Addons for Elementor, then turn on Contact Form 7 in Animation Addons → Elements.

  2. Build your form in Contact → Contact Forms: fields, mail template and messages.

  3. In Elementor, drag the Contact Form 7 widget onto the page and choose your form in Select Form.

  4. Style the fields in Input, Textarea and Label, then the Button with a Hover Style and an Icon.

  5. Set the Message colours, publish, and send a test message to check the email arrives.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about Contact Form 7

Do I need the Contact Form 7 plugin?

Yes. The widget displays and styles forms built in Contact Form 7. Install it, create a form, and the form appears in Select Form.

How to add Contact Form 7 in Elementor?

Drag the Contact Form 7 widget onto the page and choose your form in Select Form. There is no shortcode to copy.

Why is Contact Form 7 not showing in Elementor?

The Select Form list shows only published Contact Form 7 forms. With none, it reads Form not found. Install Contact Form 7, publish a form, then reload the editor and pick it.

Can I customize Contact Form 7 in Elementor without CSS?

Yes. The Input, Textarea, Label, Button and Message sections cover the common styles, so you can customize Contact Form 7 in Elementor without CSS.

Can I change the Elementor Contact Form 7 button hover?

Yes. The widget turns the submit field into a button. Choose one of eight Hover Styles and set Icon, Icon Position, Icon Spacing, colours, border and padding.

Can I style the error and success messages?

Yes. The Message section sets the colour of the error text under a field, the error message and the success message, plus their typography.

Does the widget change my fields or emails?

No. Fields, required rules, the mail template and spam protection are all set in Contact Form 7. The widget only changes how the form looks.

Contact Form 7 vs Elementor form: which to use?

The Form widget in Elementor Pro builds its own forms. This widget styles forms you already made in Contact Form 7, with that plugin's mail and validation, and it needs no Pro license.

Is the Elementor CF7 widget free?

Yes. This free Contact Form 7 Elementor widget is part of the Animation Addons for Elementor plugin on WordPress.org and works with Elementor Free.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets and it works on the same page as atomic elements.

Animation Addons Pro · Elementor 4

Style every form, without code

Contact Form 7 forms styled in Elementor, with hover effects and clear messages.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license