Embedding Forms

Learn how to embed your forms on websites using various embedding methods.

Embed Methods

JavaScript Widget (Recommended)

The JavaScript widget provides a lightweight, responsive embed without iframes.

Basic Embed

<script src="https://yourdomain.com/js/forms/widget.js"></script>
<div id="swell-form-container" data-form-id="contact-form"></div>
<script>
  SwellForms.init({
    formId: 'contact-form',
    container: '#swell-form-container'
  });
</script>

Advanced Options

<script>
  SwellForms.init({
    formId: 'contact-form',
    container: '#swell-form-container',
    theme: 'light',
    height: 'auto'
  });
</script>

Options:

• formId: Form slug or ID
• container: CSS selector or element
• theme: 'light' or 'dark'
• height: 'auto' or fixed height in pixels

Inline Embed

Embed form directly in page HTML:

<div class="swell-form-inline" data-form-id="contact-form"></div>

Popup/Modal

Open form in a modal overlay:

<button onclick="SwellForms.openPopup('contact-form')">
  Open Form
</button>

Auto-Popup on Page Load:

<script>
  window.addEventListener('load', function() {
    SwellForms.openPopup('contact-form', {
      width: 600,
      height: 700
    });
  });
</script>

Exit Intent Popup:

<script>
  document.addEventListener('mouseleave', function(e) {
    if (e.clientY <= 0) {
      SwellForms.openPopup('contact-form');
    }
  });
</script>

Full Page

Use form as a standalone page:

https://yourdomain.com/forms/contact-form

Shareable Link:

• Copy the form URL
• Share via email, social media, or QR code
• Works on all devices

Getting Embed Code

From Form Builder

1. Open form in builder
2. Click "Form Settings"
3. Go to "Embedding" tab
4. Select embed method
5. Copy embed code
6. Paste on your website

From Forms List

1. Go to Forms list
2. Click "Embed" on a form
3. Select embed method
4. Copy embed code

Customization

Styling

Forms automatically inherit some styles from your website:

• Fonts: Inherit from parent page
• Colors: Can be customized via theme
• Spacing: Responsive padding and margins

Custom CSS

Add custom CSS to match your brand:

<style>
  .swell-form-container {
    font-family: 'Your Font', sans-serif;
  }
  .swell-form-button {
    background-color: #your-color;
  }
</style>

Theme Customization

In form settings, customize:

• Primary Color: Main button and accent color
• Background Color: Form background
• Text Color: Text color
• Border Radius: Rounded corners
• Font Family: Custom fonts

Responsive Design

Forms are fully responsive:

• Mobile: Optimized for touch devices
• Tablet: Adjusted layout for medium screens
• Desktop: Full-width or centered layout

Auto-Height:

• Forms automatically adjust height
• No scrollbars within form
• Smooth transitions between steps

Security

HTTPS Required

• Forms must be served over HTTPS
• Embed code uses HTTPS URLs
• Secure data transmission

Spam Protection

• Built-in spam protection
• Optional reCAPTCHA integration
• Rate limiting per IP

Privacy

• GDPR compliant
• Cookie consent support
• Data retention policies

Testing Embedded Forms

Before Going Live

1. Test on Different Devices: Mobile, tablet, desktop
2. Test in Different Browsers: Chrome, Firefox, Safari, Edge
3. Test Submissions: Submit test data
4. Check Integrations: Verify integrations work
5. Test Responsiveness: Check on various screen sizes

Common Issues

Form Not Loading:

• Check embed code is correct
• Verify form is published
• Check browser console for errors

Styling Issues:

• Check CSS conflicts
• Verify theme settings
• Test with different themes

Submission Errors:

• Check form validation
• Verify required fields
• Review error messages

Best Practices

1. Test First: Always test before going live
2. Mobile-Friendly: Ensure forms work on mobile
3. Fast Loading: Optimize page load times
4. Clear CTAs: Use clear call-to-action buttons
5. Privacy Policy: Link to privacy policy
6. Thank You Page: Set up redirect or thank you message
7. Analytics: Track form performance

Advanced Features

Custom Domain

Use your own domain for forms:

https://forms.yourdomain.com/contact-form

Setup:

1. Configure DNS CNAME record
2. Update form settings
3. Forms served from your domain

A/B Testing

Test different form variations:

1. Create duplicate form
2. Make changes to duplicate
3. Embed both versions
4. Compare performance

Tracking Parameters

Track form submissions with UTM parameters:

https://yourdomain.com/forms/contact-form?utm_source=email&utm_campaign=newsletter

Parameters are automatically captured in submissions.

Updated on: 10/03/2026