How to Embed Forms on Your Website: Complete Guide

Embedding forms on your website is one of the most effective ways to collect leads, feedback, and customer information. This guide will show you exactly how to do it on any platform.

Why Embed Forms on Your Website?

Embedded forms offer several advantages over standalone form pages:

Better User Experience: Users stay on your website
Higher Conversion Rates: No redirects or external pages
Seamless Design: Forms match your website's look and feel
Faster Loading: No page reloads or navigation
SEO Benefits: Keep users on your domain

Method 1: Simple Embed Code (Recommended)

The easiest way to embed a form is using a simple JavaScript snippet. This works on any website:

HTMLCopy and paste this code

<!-- Add this where you want the form to appear -->
                <div id="fastsubmit-form"></div>

                <!-- Add this before closing </body> tag -->
                <script 
                  src="https://fastsubmit.hostspica.com/embed.js"
                  data-form-id="your-form-id"
                  data-theme="light">
                </script>

Benefits of This Method:

✅ Works on any website or platform
✅ Loads asynchronously (doesn't slow down your site)
✅ Automatically responsive
✅ Easy to customize with data attributes
✅ No iframe needed

Platform-Specific Instructions

WordPress

WordPress makes it easy to embed forms. You have two options:

Option 1: Using the Block Editor (Gutenberg)

1. Edit the page or post where you want the form
2. Click the + button to add a new block
3. Search for "Custom HTML" block
4. Paste your FastSubmit embed code
5. Click "Update" or "Publish"

Option 2: Using the Classic Editor

1. Switch to the "Text" tab (not Visual)
2. Paste your embed code where you want the form
3. Switch back to "Visual" to see the form
4. Save your changes

Shopify

Embedding forms on Shopify is straightforward:

Steps for Shopify:

1. Go to Online Store → Pages
2. Select the page where you want the form
3. Click "Show HTML" button
4. Paste your embed code
5. Click "Save"

💡 Tip: For Shopify themes, you can also add forms to your theme.liquid file for site-wide forms.

Webflow

Steps for Webflow:

1. Open your Webflow project
2. Drag an Embed element onto your page
3. Paste your FastSubmit embed code
4. Adjust the embed element's size if needed
5. Publish your site

Wix

Steps for Wix:

1. Click Add on the left panel
2. Select Embed Code
3. Choose Custom Embeds
4. Paste your embed code
5. Adjust size and position
6. Click "Update" to publish

Squarespace

Steps for Squarespace:

1. Edit the page where you want the form
2. Click an insert point and select Code
3. Paste your embed code
4. Click "Apply"
5. Save and publish your page

Plain HTML Website

For custom HTML websites, simply paste the embed code in your HTML file:

index.html

Customization Options

You can customize your embedded form using data attributes:

Available Options:

data-theme="light"or "dark" - Set form theme

data-width="100%"Set form width

data-height="auto"Set form height

data-redirect="/thank-you"Redirect after submission

Styling Your Embedded Form

You can add custom CSS to match your website's design:

CSS

Best Practices

Tips for Success:

✅ Place forms above the fold for maximum visibility
✅ Use clear headings to explain what the form is for
✅ Keep forms short - only ask for essential information
✅ Test on mobile - most users will be on phones
✅ Add a privacy note to build trust
✅ Use compelling CTAs on submit buttons

Troubleshooting Common Issues

Form Not Showing Up?

• Check that you've pasted both the div and script tags
• Verify your form ID is correct
• Make sure JavaScript is enabled
• Check browser console for errors

Form Looks Broken?

• Check for CSS conflicts with your theme
• Try adding custom CSS to fix styling
• Ensure the container div has enough space
• Test in different browsers

Submissions Not Working?

• Verify your form is published and active
• Check spam protection settings
• Test with a different email address
• Check your dashboard for submissions

Advanced: React/Next.js Integration

For React or Next.js applications, you can use a useEffect hook:

React Component

Ready to Embed Forms on Your Website?

Create your first embedded form in minutes. Works on any platform, free forever.

Get Started Free

Conclusion

Embedding forms on your website is simple with FastSubmit. Whether you're using WordPress, Shopify, Webflow, or custom HTML, the process takes just a few minutes. The key is choosing the right placement, keeping forms simple, and testing across devices.

Start with the basic embed code, test it thoroughly, and then customize the styling to match your brand. With proper implementation, embedded forms can significantly boost your lead generation and customer engagement.