WordPress Popup Form: 6 Simple Ways to Show One

A WordPress popup form keeps a page clean while making a form one click away. Pricing pages, long service pages and landing pages benefit most: the visitor reads, decides, clicks “Get a quote”, and the form appears right there without leaving the page.

This guide shows six simple ways to show a WordPress popup form, when popups help and when they annoy, the accessibility rules every popup must follow, and the mistakes that make visitors close them in a second.

Click-to-open vs interrupting popups

Google’s guidance on intrusive interstitials explains that content that covers the page as soon as a mobile visitor arrives can make a page rank lower. A WordPress popup form that opens only when someone clicks a button avoids that problem entirely, and it is what visitors actually want: a form when they are ready.

6 simple ways to show a WordPress popup form

1. The shortcode option

Add a popup attribute to the form’s shortcode, with the button text as its value:

[fillkite id="3" popup="Get a quote"]

Instead of the form, the page shows a button labelled “Get a quote”. Clicking it opens the form in a popup. This works in any editor, widget area or theme template that accepts shortcodes.

2. The block setting

In the block editor, add the FillKite Form block, choose your form, and fill in Open in a popup with the button text. The block shows the button, and the form opens over the page when clicked.

3. The Elementor widget setting

In Elementor, the FillKite Form widget has the same Open in a popup field in its Content tab. Type the button label, and style the rest of your layout as usual. You do not need Elementor Pro’s popup builder for this; our guide to the Elementor contact form covers the widget in more detail.

4. A sticky button in the header or footer

Place the popup button in your site header or footer template, so “Get a quote” or “Book a call” is available on every page. Because the form opens in a popup, visitors never lose their place on the page they were reading.

5. A page builder or popup plugin

If you already use a popup tool, such as Elementor Pro’s popups or a dedicated popup plugin, you can place a FillKite form inside it with the widget or shortcode. That gives you that tool’s triggers and design options, with FillKite handling the form, entries and emails.

6. A dedicated form page

Sometimes the best popup is no popup. For long forms, such as applications, a link to a dedicated page works better on phones and is easier to bookmark and share. Keep popups for short forms that fit comfortably on a small screen.

Which method should you choose?

Every method produces the same WordPress popup form. If your pages are built with the block editor, use the block setting; with Elementor, use the widget setting; for theme areas, widgets and anywhere else that accepts shortcodes, use the shortcode option. All three produce the same accessible popup with the same form inside, so you can mix them across your site freely. Reach for a separate popup plugin only when you truly need its extra triggers or design options, and remember that each extra plugin adds weight and maintenance.

Whichever you pick, keep one form per purpose. If your quote form appears in a header popup, on the pricing page and at the end of service pages, it should be the same form every time. Then changes happen in one place, and every entry arrives in one inbox with the page it came from.

Where a WordPress popup form works best

• Pricing pages: a “Get a quote” or “Talk to sales” button on each plan.
• Service pages: a button at the end of each service description.
• Case studies: “Want results like these?” with a short enquiry form.
• Blog posts: a newsletter or download form after the conclusion.
• Headers: a persistent call-to-action button that opens the main enquiry form.

WordPress popup form examples

Quote on a pricing page

Each plan has a “Get a quote” button. The WordPress popup form asks for name, work email, company size and a short message, and the success message says when you will reply. Visitors compare plans, click, and send without losing the comparison.

Book a call

A “Book a 20-minute call” button in the header opens a form with name, email, phone and two time preferences. It is available on every page, but never gets in the way.

Download a guide

At the end of a blog post, a “Download the checklist” button opens a two-field form: first name and email, with a clear promise about what follows. The download link arrives in the auto-reply.

Event registration

On an event page, a “Reserve my place” button opens a short registration form. The page keeps the full agenda visible, and the form stays focused on the few details you need.

Write the popup copy

A WordPress popup form has very little space, so every word counts. Three short pieces do most of the work:

• The button: what they get, in two to four words. “Get my quote”, not “Contact”.
• The heading: repeat the promise. “Get a fixed quote within one working day.”
• One line under the heading: remove the biggest worry. “No obligation. We never share your details.”

Skip long introductions. The visitor clicked because they already decided; the popup should get out of their way.

Popup or inline form?

Many sites use both: an inline form on the contact page and a WordPress popup form behind buttons elsewhere. Because it is the same form, entries arrive in one inbox either way.

Accessibility rules for popups

Popups are one of the most common accessibility failures on the web, because they change the page suddenly. A WordPress popup form must:

• open from a real button that works with a keyboard;
• move focus into the popup when it opens, and keep it there while it is open;
• close with the Esc key, a visible close button and a click outside;
• return focus to the button that opened it when it closes;
• be announced as a dialog to screen readers, with a clear title.

FillKite’s popups follow these rules: Esc, the close button or a click outside closes them, and the form inside keeps its real labels and announced errors. Our guide to accessible forms covers the form itself.

Where the button appears

The button decides whether anyone opens your WordPress popup form, so place it where people make decisions: next to each pricing plan, after a strong testimonial, at the end of a service section, and in the header for visitors who arrive ready to act. Repeat it on long pages, so nobody has to scroll back up to find it. A button that stays visible without being pushy is the best trigger a popup can have.

When not to use a popup

Popups are not always the answer. Avoid a WordPress popup form when:

• the form is long, such as a job application or a detailed brief;
• visitors need to refer to the page while filling it in, such as a booking form next to a timetable;
• the form is the main purpose of the page, such as the contact page itself;
• people often arrive from a link that should take them straight to the form.

In these cases, a form on the page, or a dedicated page linked from a button, is clearer and easier on phones.

Popups on phones

On a phone, a popup takes most of the screen. Keep the form short, make the close button large and easy to reach, and make sure the keyboard does not hide the Send button. A popup with more than five or six fields is usually better as a page on mobile. Test on a real phone, not only a narrow browser window.

After someone sends the form

The moment after sending matters inside a popup too. Show a clear success message in the popup, such as “Thanks, we will reply within two hours”, and let the visitor close it and carry on reading. If you prefer a thank-you page, the popup can redirect there instead. An auto-reply confirms the message by email. A WordPress popup form that ends with clear reassurance feels as trustworthy as a full contact page.

Consent inside popups

Consent rules do not change because the form is in a popup. If the form adds people to a newsletter, keep that box optional and unticked, and link to your privacy policy inside the popup, not only on the page behind it. A WordPress popup form that hides these details is more likely to cause complaints later. Our guide to the GDPR contact form covers what to include.

More than one popup on a page

A page can have several WordPress popup form buttons, for example a “Get a quote” and a “Book a call”, each opening its own form. Keep them clearly different, so visitors understand which to choose, and avoid more than two on one page. Too many choices slow people down as much as too many fields.

Keep the site fast

Popup plugins often load their scripts and styles on every page, whether a popup is shown or not. FillKite loads about 11 KB of form code only on pages with a form, and the popup behaviour comes with it, so pages without a popup button load nothing extra. That keeps the pages where you add a WordPress popup form quick on mobile connections.

Spam protection still applies

Bots do not care whether a form is inline or in a popup; they submit it directly. Keep your usual protection on. FillKite’s honeypot, time check and spam score work the same inside a popup, and caught entries go to a separate Spam tab. Our guide to WordPress form spam explains the layers.

Design tips

• Name the button after the result: “Get my quote”, “Book a call”, “Download the guide”.
• Give the popup a heading that matches the button, so people know they are in the right place.
• Keep the form short: three to five fields.
• Show the success message in the popup, then let people close it and carry on reading.
• Match your site’s design: FillKite forms pick up your theme’s fonts, and use FillKite blue unless you set an accent colour in the form’s Design.

Offline visitors: QR codes

Not every enquiry starts on your website. At events, in shops or on printed brochures, a QR code can take people straight to a form on their phone. FillKite can generate a QR code for any form that sits on a page, downloadable as SVG or PNG from the forms list. For offline use, link the QR code to the form page rather than a WordPress popup form button: show the form inline there, so visitors land directly on the fields without an extra tap.

Test before you promote it

Before you put a new popup button on your busiest pages, try it end to end. FillKite’s test mode lets a published form check answers and show its thank-you message without saving an entry or sending emails, so you can click through the whole flow on the live page safely. Turn test mode off when you are happy, and the form starts working for real.

Measure the results

Track how many people open the popup and how many send it. FillKite counts a view when the form is shown, so the forms list shows the conversion rate of each form over the last 30 days. Compare a page with a WordPress popup form against the same page with an inline form, one change at a time, and keep whichever brings more enquiries. Our guide to form conversion rate explains the method.

A WordPress popup form checklist

• The popup opens only when a visitor clicks a button.
• The button says what the visitor gets.
• The form inside is short, three to five fields.
• Esc, a close button and a click outside all close it.
• Focus moves into the popup and back to the button afterwards.
• It works comfortably on a real phone.
• The success message appears inside the popup.
• Spam protection is on.

Where a WordPress popup form goes wrong

Frequently asked questions

Do I need a popup plugin for a WordPress popup form?

Not with FillKite. Any form can open in a popup from a button, through the shortcode, the block or the Elementor widget.

Can the popup open automatically after a few seconds?

FillKite’s popups open when a visitor clicks the button, which is what visitors and search engines prefer. If you need timed or exit triggers, place the form inside a popup tool that offers them.

Are popups bad for SEO?

Popups that cover content as soon as a mobile visitor arrives can be. Popups opened by a click are not a problem.

How many fields should a WordPress popup form have?

Three to five is ideal. Longer forms work better on a page of their own, especially on phones.

Does a popup work without JavaScript?

The popup needs JavaScript to open, like any popup. FillKite keeps the form itself accessible, and you can always link to a page with the form as a fallback for important forms.

Can I use the same form in a popup and on a page?

Yes. It is the same form, so entries from both places arrive in the same inbox.