English Español Português (Brasil) Français Deutsch Italiano Română
Log in Start free

Embedding a Contact Form on WordPress, Webflow, or Any Website

A contact form that only exists on a standalone page is a missed opportunity. The most effective contact forms appear where visitors already are — on product pages, blog posts, landing pages, sidebars, and footers — without requiring visitors to navigate to a separate contact page first.

This guide covers the two main embedding methods (JavaScript snippet and iFrame), when to use each, and how to implement them correctly on the most common website platforms.

Two Embedding Methods: JS Snippet vs. iFrame

JavaScript Snippet (Recommended for Most Cases)

A JavaScript embed is a single <script> tag you paste into your HTML. The script runs in the visitor's browser and renders the form inline, matching or adapting to your page layout.

Advantages:

  • Can match the surrounding page's fonts and general style
  • Can submit without a full page reload (better UX)
  • Can grow or shrink height dynamically based on form state
  • Can communicate with the parent page (analytics, conversion tracking)
  • Generally faster to load than an iFrame because it does not create a separate browsing context

Limitations:

  • Requires the host website to allow external scripts (most do)
  • JavaScript must be enabled in the visitor's browser
  • Requires careful testing to ensure the form does not conflict with existing page scripts

iFrame

An iFrame embeds the contact form as a separate "window" inside your page. The form runs in a completely isolated context.

Advantages:

  • Zero conflict with the host website's CSS or JavaScript — it is fully isolated
  • Works on platforms that restrict external scripts (some CMS environments)
  • No JavaScript required on the host page

Limitations:

  • Height must be fixed or managed with JavaScript; iFrames do not resize automatically based on content
  • Styling is isolated — the form inherits none of the parent page's fonts or colors unless configured in the form tool
  • Some analytics tracking is more difficult across iFrame boundaries
  • Can look visually disconnected from the surrounding page

When to use iFrame:

  • The hosting platform restricts external JavaScript
  • You are embedding on a platform where script conflicts are frequent and hard to debug
  • The form is being embedded in an email or an environment that cannot execute JavaScript

Embedding on WordPress

Method 1: HTML Block with JS Snippet

In the WordPress block editor (Gutenberg):

  1. Click + to add a new block
  2. Search for and select Custom HTML
  3. Paste your JavaScript embed code into the block

This works reliably for most WordPress sites. The script runs when the page loads and renders the form in place of the block.

Important: if your WordPress site uses a caching plugin (WP Rocket, W3 Total Cache, etc.), add the form page to the cache exclusion list. Cached pages may not execute embedded scripts correctly after a form submission.

Method 2: iFrame Block

In the block editor:

  1. Add a Custom HTML block
  2. Paste the iFrame code: <iframe src="https://yourform.url" width="100%" height="600" frameborder="0"></iframe>

Adjust the height attribute based on your form's actual height. If the form has validation errors that expand the form's visible height, the iFrame will show a scrollbar inside the embedded window — which looks broken. Test all form states (empty, error, success) and set the height to the tallest state.

Method 3: Widget Area or Footer

For a contact form in the footer or sidebar, use a Text widget:

  1. Go to Appearance → Widgets
  2. Add a Custom HTML widget to your sidebar or footer
  3. Paste the embed code

Embedding on Webflow

Webflow's native embed component supports JavaScript:

  1. In the Webflow designer, drag an Embed component to your page
  2. Click the component and open the embed code editor
  3. Paste your JavaScript snippet
  4. Click Save & Close
  5. Publish the page

For iFrame embeds, the same process applies — paste the iFrame tag in the Embed component.

Webflow note: Webflow's preview mode inside the designer may not execute external scripts. Publish to your staging or production domain to test the form.

Embedding on Squarespace, Wix, and Similar Builders

Most website builders have a "custom code" or "HTML embed" block:

  • Squarespace: Add a Code block to any page and paste the embed snippet
  • Wix: Insert an HTML iframe element (via Add → Embed → HTML iframe) and paste your iFrame or JS code
  • Showit: Use an HTML widget in the design canvas

Note on Wix: Wix's embed container is technically an iFrame even when you paste a JavaScript snippet. External scripts inside a Wix HTML embed run in an isolated iframe context. This means the form will work, but cross-page analytics integration is limited.

Embedding on a Custom HTML Website

For plain HTML/CSS sites or sites built with a static generator (Hugo, Jekyll, Eleventy):

JavaScript snippet: paste the <script> tag just before </body> on any page where you want the form to appear. Add a placeholder <div id="contact-form"></div> where the form should render if the script needs a target element.

iFrame: paste the <iframe> tag directly in the page HTML at the location where the form should appear.

Loading Performance Considerations

An embedded contact form should not slow down your page. Look for:

Async loading: the script tag should include the async attribute so it does not block the page's main content from rendering.

<script src="https://cdn.example.com/form.js" data-key="your-key" async></script>

Lazy loading: for forms below the fold, some embed systems support lazy loading — the form script does not load until the visitor scrolls near the form. This improves initial page load time.

CDN delivery: the form JavaScript should be served from a content delivery network (CDN) with global edge points, so the load time is fast for visitors regardless of their location.

Conversion Tracking After Embedding

If you use Google Analytics, Meta Pixel, or another analytics tool, configure form submission tracking to fire when the embedded form is successfully submitted.

For JavaScript embeds, the form provider should support a callback or event that fires on successful submission:

// Example — actual syntax varies by provider
onContactFormSubmit(function() {
  gtag('event', 'contact_form_submit', { event_category: 'engagement' });
});

For iFrame embeds, use window.postMessage to communicate the submission event from the iFrame to the parent page, then fire the analytics event on the parent. This is technically more involved — check whether your form provider supports it natively.

Testing Your Embedded Form

Before publishing, test:

  1. Empty submission — confirm required field validation triggers correctly
  2. Invalid email — confirm the email field shows a validation error
  3. Successful submission — confirm the success state appears and the submission is received
  4. Mobile — open the page on an actual phone and test tap targets, keyboard behavior, and form scroll
  5. With caching enabled — if your site uses a cache, test that the form works on a cached page load
  6. With a browser extension — some ad blockers block external scripts; test in a clean browser profile

How Nura24 Provides Contact Form Embedding

Nura24's contact page module generates both a JavaScript embed snippet and an iFrame embed code from the dashboard, ready to paste into any website without coding. The widget script loads asynchronously and is served from a CDN. Visual settings — color, font, border radius, dark/light mode — are configured in the Nura24 dashboard and applied automatically to the embedded form, so updating the branding in one place updates it everywhere the form is embedded. Submissions are routed to the Nura24 ticketing system and optionally trigger agent email notifications and auto-reply emails to the visitor.

← Back to blog