You’ve created the perfect form. Now you need to get it on your website. The good news? Embedding forms is easier than you might think.

In this guide, we’ll walk through exactly how to embed forms on any website platform — WordPress, Webflow, Squarespace, Wix, or plain HTML.

Embedding Methods Overview

There are two main ways to add a form to your website:

Method	Best For	Difficulty
Embed code	Most websites	Easy
Direct link	Email, social media	Easiest

Most users will use embed codes. Let’s dive in.

Method 1: Embed Code (Recommended)

Embed codes are small snippets of HTML/JavaScript that display your form within your website.

How Embed Codes Work

When you add an embed code to your page:

Your page loads normally
The embed script runs
Your form appears where you placed the code
Submissions go to your form builder

The form inherits some styling from your site while maintaining its design.

Getting Your Embed Code

In most form builders (including Pixelform):

Open your form
Click “Share” or “Publish”
Select “Embed”
Copy the code snippet

Example embed code:

<div id="pixelform-embed" data-form-id="abc123"></div>
<script src="https://embed.usepixelform.com/v1/form.js"></script>

Embedding on WordPress

WordPress is the most popular website platform. Here’s how to add forms:

Option 1: Block Editor (Gutenberg)

Edit your page or post
Add a “Custom HTML” block
Paste your embed code
Preview and publish

Option 2: Classic Editor

Switch to “Text” view (not Visual)
Paste your embed code where you want the form
Update the page

Go to Appearance → Widgets
Add a “Custom HTML” widget to your sidebar/footer
Paste your embed code
Save

Option 4: Theme Files (Advanced)

For developers, add the embed code directly to theme files:

<!-- In your theme template -->
<div class="contact-form-wrapper">
  <div id="pixelform-embed" data-form-id="abc123"></div>
  <script src="https://embed.usepixelform.com/v1/form.js"></script>
</div>

WordPress Plugin Method

Some form builders offer WordPress plugins for even easier embedding:

Install the plugin
Authenticate with your account
Use a shortcode: [pixelform id="abc123"]

Embedding on Webflow

Webflow makes embedding external content straightforward.

Standard Embed

Add an “Embed” element to your page
Paste your form’s embed code
Click outside the element to save
Publish your site

Embed in Collection Templates

For forms on multiple pages (like blog posts):

Open your Collection Template
Add an Embed element where you want the form
Paste the embed code
All collection items will have the form

Webflow Embed Tips

Use Webflow’s wrapper elements to control form width
Test on both Editor preview and published site
Forms won’t render in the Designer — you need Preview mode

Embedding on Squarespace

Squarespace uses “Code Blocks” for external embeds.

Adding a Code Block

Edit your page
Click where you want the form
Add Block → More → Code
Paste your embed code
Save and publish

Header/Footer Injection (Site-Wide)

For forms on every page:

Go to Settings → Advanced → Code Injection
Paste in the Header or Footer section
Save

Note: Code Injection requires Squarespace Business plan or higher.

Embedding on Wix

Wix has specific requirements for external embeds.

Using HTML iFrame

Add Element → Embed → Embed a Widget
Click “Enter Code”
Paste your embed code
Adjust size as needed
Publish

Wix Velo (Advanced)

For more control, use Wix Velo to add custom code:

// In your page code
$w.onReady(function () {
  $w('#htmlEmbed').src = 'https://forms.usepixelform.com/abc123';
});

Wix Embed Limitations

Some JavaScript may not work due to Wix’s sandboxing
iFrame height might need manual adjustment
Test thoroughly after embedding

Embedding with Plain HTML

If you’re coding your own site, embedding is straightforward.

Basic Implementation

<!DOCTYPE html>
<html>
<head>
  <title>Contact Us</title>
</head>
<body>
  <h1>Get in Touch</h1>
  <p>Fill out the form below and we'll respond within 24 hours.</p>

  <!-- Your form embed -->
  <div id="contact-form">
    <div data-pixelform="abc123"></div>
    <script src="https://embed.usepixelform.com/v1/form.js"></script>
  </div>
</body>
</html>

Styling the Container

Control the form’s appearance with CSS:

<style>
  .form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
</style>

<div class="form-container">
  <div data-pixelform="abc123"></div>
  <script src="https://embed.usepixelform.com/v1/form.js"></script>
</div>

Loading the Script Asynchronously

For better performance, load the embed script asynchronously:

<div data-pixelform="abc123"></div>
<script async src="https://embed.usepixelform.com/v1/form.js"></script>

Embedding in React Applications

For React developers, integrate forms as components:

import { useEffect } from 'react';

function ContactForm() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://embed.usepixelform.com/v1/form.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div data-pixelform="abc123" />;
}

Not every situation requires embedding. Sometimes a direct link works better.

When to Use Direct Links

Email campaigns
Social media posts
QR codes
Anywhere you can’t embed code

In your form builder:

Click “Share” or “Publish”
Select “Link”
Copy the URL

Example: https://forms.usepixelform.com/abc123

Customizing Link Appearance

For social sharing, customize how your link appears:

Set an OG image (Open Graph)
Write a compelling title
Add a description

Troubleshooting Common Issues

Form Not Appearing

Check these first:

Is JavaScript enabled in the browser?
Is the embed code in the right place (not inside <head>)?
Are there console errors blocking the script?

Form Styling Issues

Solutions:

Use CSS to control the container width
Check for conflicting styles from your theme
Ensure mobile responsiveness

Form Not Submitting

Verify:

No JavaScript errors in the console
Form isn’t blocked by browser extensions
Network requests aren’t being blocked

Slow Form Loading

Improve speed:

Load script asynchronously (async attribute)
Place script at end of <body>
Use a CDN-hosted script

Best Practices

1. Always Test on Multiple Devices

What works on desktop might break on mobile. Test both.

2. Use HTTPS

Ensure your embed code uses HTTPS to avoid mixed-content warnings.

3. Provide Fallback Content

Show something while the form loads:

<div data-pixelform="abc123">
  <p>Loading form...</p>
</div>

4. Monitor Performance

Track how long forms take to load and optimize if needed.

5. Keep Embed Codes Updated

If your form builder updates their embed format, update your code.

Alternative: Custom Domain Forms

Instead of embedding, you can host forms on your own domain:

Benefits:

Better brand consistency
Improved trust signals
Full control over the page

Example: forms.yourcompany.com/contact

Many form builders (including Pixelform) support custom domains at no extra cost.

Ready to Embed Your Forms?

With Pixelform, embedding forms takes seconds:

Build your form with our drag-and-drop editor
Click Share → Embed
Copy and paste the code to your site

Create your first embeddable form — start building for free.