Elementor Contact Form: Free Setup in 5 Simple Steps

An Elementor contact form is usually the first thing people want on a new Elementor site, and the first surprise: the free version of Elementor has no form widget at all. The Form widget comes with Elementor Pro.

This guide shows how to add a free Elementor contact form in five simple steps, how to make it match your design from the Elementor panel, how it compares with Elementor Pro’s form, and the settings that decide whether enquiries actually reach you. The examples use FillKite, a free form builder with its own Elementor widget.

Does free Elementor have a contact form?

No. Elementor’s free plugin gives you layout containers, headings, text, images, buttons and many other widgets, but the Form widget is reserved for Elementor Pro. If you search the free widget panel for “form”, you will not find one.

That leaves three ways to add an Elementor contact form:

The third option gives you the Elementor way of working without paying for Pro. It is the one this guide follows.

Step 1: Build the form

Forms are built in the form plugin, not in Elementor. That is a good thing: the same Elementor contact form can then appear on several pages, in a popup, or in a footer template, and you change its fields in one place.

In FillKite, go to FillKite → Add New and start from a template or a blank form. A contact form usually needs four fields: name, email, message and a consent checkbox if you are in the EU or UK. Drag fields from the left, click a field to change its label, and press Publish.

Step 2: Add the widget to your Elementor page

Open the page in Elementor, search the widget panel for FillKite, and drag the FillKite Form widget into your layout, just like a heading or an image.

In the widget’s Content tab, choose your form from the Form dropdown. The form appears in the Elementor preview straight away, with your site’s styles. There is also an Edit form button that opens the form in the FillKite builder in a new tab, so you can change a field without hunting for it.

Step 3: Style it from the Style tab

This is where a widget beats a shortcode. The FillKite Form widget has a Style tab with the controls you expect from any Elementor widget:

• Labels: colour and typography. The colour also applies to checkbox, radio and consent labels, so everything stays readable on a dark section.
• Inputs: text colour, background, border colour, typography, corner radius and padding.
• Button: text and background colours, hover colours, and a full-width option.

By default the button picks up your Elementor kit’s accent colour, and fields inherit your theme’s fonts, so an Elementor contact form looks at home before you change anything. Global colours and fonts from your kit are available in every colour and typography control.

Step 4: Decide where enquiries go

An Elementor contact form is only as good as the email it sends. In the FillKite builder, open the form’s Settings tab and check its notifications:

• who receives the admin notification, with CC and BCC if needed;
• whether the visitor gets an auto-reply, and what it says;
• the message shown after sending, or a redirect to a thank-you page.

Then, under FillKite → Settings → Email, set a From name and a From address on your own domain. If form emails have ever gone missing on your site, read our guide to fixing a form not sending email before you launch.

Step 5: Test on a phone, then publish

Preview the page on your phone, not just in Elementor’s mobile view. Fill in the Elementor contact form with a real email address on a different provider from your site, press Send, and check three things:

1. the success message or thank-you page appears;
2. the entry shows in FillKite → Entries;
3. the notification email arrives, and not in spam.

If all three work, publish. If the email is missing but the entry is there, the form is fine and the problem is email delivery, which our guide to SPF DKIM DMARC explains.

Elementor Pro’s form vs a free Elementor contact form

If you already pay for Elementor Pro, its Form widget is a reasonable choice. If you do not, you do not need to buy Pro just for forms. Here is how they compare on the things that matter for leads:

Beyond the table, FillKite adds what matters after the form is sent: conditional logic written as sentences, failed notification emails retried after 5 minutes, 30 minutes and 2 hours, and spam protection with a honeypot, time check, spam score and rate limit, all in the free plugin.

The last row of the table matters more than it looks. A form built inside an Elementor widget lives on that one page. A form built in a form plugin can sit on your contact page, in a footer template, in a popup and in a blog post, and every copy sends entries to the same inbox.

What about Contact Form 7 in a Shortcode widget?

Many tutorials suggest pasting a Contact Form 7 shortcode into Elementor’s Shortcode widget. It works, and it is free, but it is the hardest way to get a good-looking Elementor contact form. If you are thinking of replacing it, our Contact Form 7 alternative page compares the two.

• Styling needs CSS. The Shortcode widget has no Style controls for the form inside it, so colours, spacing and buttons have to be written as custom CSS.
• No entries are saved. Contact Form 7 emails each submission and keeps no copy in WordPress, so a failed email loses the lead.
• The editor preview is limited. You often see the form only after saving and viewing the page.

If your site already runs Contact Form 7 inside Elementor, you do not need to rebuild everything by hand. You can import Contact Form 7 forms into FillKite in one go, then swap each Shortcode widget for the FillKite Form widget.

Moving from Elementor Pro’s Form widget

If you are cancelling Elementor Pro, or simply want forms that live outside a single page, moving an Elementor contact form takes a few minutes per form:

1. Note the fields, the email settings and the success message of the Elementor Pro form.
2. Rebuild the form in FillKite, or start from a template with similar fields.
3. Replace the Form widget with the FillKite Form widget and pick the new form.
4. Match the style in the Style tab, then test on a phone.
5. Export the old Submissions to CSV before the Pro licence ends, so you keep your history.

Design tips for an Elementor contact form

A few layout choices make an Elementor contact form noticeably easier to fill in:

• One column on phones. Two fields side by side are fine on a desktop, but stack them on small screens. FillKite fields with a width such as half stack automatically on narrow screens.
• Labels above fields, not placeholders instead of labels. Placeholder text disappears as soon as someone types.
• A clear button label. “Send message” or “Get my quote” beats “Submit”.
• Enough contrast. On a dark section, set the label and input text colours to white in the Style tab.
• Keep it short. Every extra field costs finished forms. Use conditional logic to show follow-up questions only when they apply.

Put the Elementor contact form in a popup

Elementor Pro has a popup builder, but you do not need it to show a form in a popup. The FillKite Form widget has an Open in a popup option in its Content tab: type a button label, such as “Get a quote”, and the widget shows that button instead of the form. Clicking it opens the form in an accessible popup.

This works well for pricing pages and long landing pages, where a full form in the middle of the page would interrupt the flow. The form, its emails and its entries are the same as everywhere else.

Where to place an Elementor contact form

The same form can do different jobs depending on where it sits. A few placements work especially well on Elementor sites:

Because an Elementor contact form built with a form plugin is reused rather than copied, you can place it in all of these spots and still manage one set of fields and one inbox.

Know which page brought each lead

When the same Elementor contact form sits on ten pages, you want to know which page did the work. FillKite saves the page URL, the referrer and any UTM campaign tags with every entry, without cookies. Open an entry in the inbox and you can see where the visitor came from and where they filled in the form.

If you run Google Analytics 4 or the Meta Pixel on your site already, each form can also send a lead event when it is submitted, so your ad reports count real enquiries rather than page views.

Make it accessible

An Elementor contact form is often the only way a customer can reach you, so it must work for everyone. Check that every field has a visible label, that errors appear next to the field in words and not only in red, that the form works with a keyboard alone, and that text contrast is strong enough in your chosen colours.

FillKite gives every field a real label, announces errors to screen readers, and checks each form for common accessibility problems while you build it. Your job in Elementor is to keep the colours you choose readable.

Keep the page fast

Form plugins are a common cause of slow pages, because many load their scripts and styles on every page of the site. An Elementor contact form should only load code where the form actually is.

FillKite loads about 11 KB of CSS and JavaScript per form, gzipped, and nothing at all on pages without a form. It does not need jQuery. On an Elementor site, where the builder already loads a fair amount of code, that restraint keeps your contact page quick on mobile connections.

You can check this yourself: open your contact page and any page without a form in your browser’s developer tools, and compare the network requests. The difference should be one small stylesheet and one small script, and only on the page that has the form.

Where this goes wrong

Spam is the problem most sites meet within a week of launching an Elementor contact form. Our guide to stopping WordPress form spam shows the layers that work without a captcha.

Frequently asked questions

Can I make an Elementor contact form without Elementor Pro?

Yes. Install a form plugin that has its own Elementor widget, such as FillKite, build the form there, and add the widget to your page. You style it from Elementor’s Style tab like any other widget.

Will the Elementor contact form match my theme?

FillKite follows your theme’s fonts and uses your Elementor kit’s accent colour for the button by default. You can change labels, fields and the button in the widget’s Style tab.

Where do the entries go?

Into FillKite → Entries inside WordPress, where each one has a status and a reply timer, and to the email addresses you set in the form’s notifications.

Can I use the same form on several Elementor pages?

Yes. Build the form once and add the FillKite Form widget wherever you need it. Change a field in the form, and every page updates.

Can I show the form only to some visitors?

Within the form, conditional logic shows or hides fields based on answers. For the whole form, FillKite’s form rules can schedule it, limit the number of entries, or open it only to logged-in users.

Does the form work with Elementor’s responsive settings?

Yes. The widget sits in your container like any other, so Elementor’s own responsive controls for spacing and visibility apply. The form’s fields stack on narrow screens automatically.

Is the FillKite widget free?

Yes. The Elementor widget is part of the free FillKite plugin, along with the inbox, SMTP, spam protection and conditional logic. FillKite Pro adds extras such as multi-step forms, file uploads and payments.

Does the widget work in Elementor templates?

Yes. You can place it in any Elementor layout, including headers, footers and other templates, and in popups through the widget’s own popup option.

Last updated: November 2, 2026