> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.swellsystem.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Embedding Forms

# 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

```html
<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

```html
<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:

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

### Popup/Modal

Open form in a modal overlay:

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

**Auto-Popup on Page Load:**
```html
<script>
  window.addEventListener('load', function() {
    SwellForms.openPopup('contact-form', {
      width: 600,
      height: 700
    });
  });
</script>
```

**Exit Intent Popup:**
```html
<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:

```html
<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.