How to Embed a Quote Form on WordPress

You'll need a QuoteKit account with your widget configured. If you haven't done that yet, sign up at quotekit.nexadesign.io the 14-day free trial gives you full access with no credit card required.

Once your widget is set up (services, pricing, brand colour), get your embed code from the dashboard. You'll use this in the steps below.

This guide covers the WordPress block editor (Gutenberg), which is the default editor for all WordPress sites using WordPress 5.0 or newer. If you're using the Classic Editor, the steps are slightly different see the Classic Editor section below.

An inline embed adds the quote calculator directly into the content of a page for example, your "Get a Quote" page or your homepage.

Step 1: Log in to your WordPress dashboard and go to Pages → Add New (or edit an existing page).

Step 2: In the block editor, click the + button to add a new block. Search for "Custom HTML" and select it.

Step 3: Inside the Custom HTML block, paste your QuoteKit embed code. It will look something like a short script tag.

Step 4: Click Update or Publish to save the page.

Step 5: Visit the page on your website. The quote calculator should appear where you placed the HTML block. If it doesn't appear immediately, try a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac).

A popup embed adds a floating button to every page of your website usually in the bottom-right corner. When the customer clicks it, the quote calculator appears as a popup overlay.

This is useful if you want the calculator available site-wide without editing every page individually.

To add it to every page, you need to add the embed code to your theme's footer or header:

Step 1: In your WordPress dashboard, go to Appearance → Theme Editor (or use a plugin like "Insert Headers and Footers").

Step 2: In the Theme Editor, select your active theme and click on footer.php.

Step 3: Paste your QuoteKit popup embed code just before the closing </body> tag.

Step 4: Click Update File to save.

If you're not comfortable editing theme files directly, use a plugin like "WPCode" or "Insert Headers and Footers" these let you add code to every page without touching theme files.

If your WordPress site uses a page builder like Elementor, Divi, or WPBakery, the process is similar but the element you're looking for is different:

Elementor: Search for the "HTML" widget in the Elementor panel and drag it onto the page. Paste your embed code into the HTML field.

Divi: Add a "Code" module to your page. Paste your embed code into it.

WPBakery: Add a "Raw HTML" element. Paste your embed code.

In all cases, save and preview the page to confirm the calculator appears correctly.

If your site uses the Classic Editor (the older TinyMCE editor):

Step 1: Edit the page where you want the calculator.

Step 2: In the toolbar, click the "Text" tab (not "Visual") to switch to the HTML view.

Step 3: Paste your embed code where you want the calculator to appear in the page content.

Step 4: Switch back to the "Visual" tab you may see a grey placeholder box. This is normal.

Step 5: Click Update or Publish.

The calculator doesn't appear: Check that your embed code was pasted into an HTML block, not a plain text or paragraph block. Plain text blocks will display the code as text, not run it as HTML.

The button appears but clicking it does nothing: This is sometimes caused by a security plugin (like Wordfence) blocking external scripts. Check your security plugin's settings and whitelist the QuoteKit script domain.

The calculator looks unstyled or broken: This can happen if your theme's CSS conflicts with the widget. Contact QuoteKit support this is usually a quick fix.

Caching issues: If you use a caching plugin (WP Rocket, W3 Total Cache, etc.), clear your cache after adding the embed code. Caching plugins sometimes serve an old version of the page that doesn't include the new code.