# WordPress Integration Guide

Complete guide to integrate MyFormConnect with WordPress

      Setup time: **5-10 minutes
      Difficulty: **Easy
        Compatible versions: **WordPress 5.0+**

Add a MyFormConnect contact form to any WordPress page in minutes. Paste a small HTML snippet into a Custom HTML block — no plugin required. You can optionally include the MyFormConnect loader script for AJAX submission and validation, or keep it simple with a standard form POST.

## ** Prerequisites

- ** A MyFormConnect account — [sign up here](/users/sign_up)
- ** A form created in your MyFormConnect dashboard with its UUID copied
- ** Your site URL added to the allowed domains list in MyFormConnect
- ** WordPress admin access (Editor role or higher)

## ** Integration Methods

### HTML + loader.js

                5 minutes

                Easy

Paste a Custom HTML block directly into a WordPress page or post. Works in the Block Editor (Gutenberg) and Classic Editor. The `loader.js` script is optional — add it for AJAX submission and real-time validation; omit it for a plain HTML POST.

                  1

#### Copy your form UUID from MyFormConnect

                    You will need the unique UUID that MyFormConnect assigned to your form.

1. Log in to your MyFormConnect dashboard
2. Open the form you want to embed
3. Copy the form UUID from the form URL or the form settings page (e.g. `550e8400-e29b-41d4-a716-446655440000`)

##### Important Note

                            Each form has a unique UUID. Make sure you are using the correct one — using the wrong UUID will send submissions to the wrong form.

                  2

#### Add a Custom HTML block to your page

                    In the WordPress Block Editor, open the page where you want the form and add a Custom HTML block.

1. Go to **Pages → Add New** or open an existing page
2. Click the **+** block inserter and search for **Custom HTML**
3. Select the **Custom HTML** block
4. Paste the form code below, replacing `YOUR_FORM_UUID` with your actual UUID

```
<form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true">
  <p>
    <label for="name">Name *</label><br>
    <input type="text" id="name" name="name" required>
  </p>
  <p>
    <label for="email">Email *</label><br>
    <input type="email" id="email" name="email" required>
  </p>
  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="4"></textarea>
  </p>
  <button type="submit">Send Message</button>
</form>

<!-- Optional: add loader.js for AJAX submission and real-time validation -->
<!-- Remove the script tag below for a plain HTML form POST -->
<script src="https://myformconnect.io/loader.js" data-client-id="YOUR_FORM_UUID"></script>
```

##### Important Note

                            Replace both instances of `YOUR_FORM_UUID` with your actual form UUID. The `data-mfc="true"` attribute on the form tells the loader script which form to enhance.

                  3

#### Publish and test

                    Save the page and verify submissions are reaching your MyFormConnect dashboard.

1. Click **Publish** (or **Update** if editing an existing page)
2. Open the page in a new browser tab
3. Fill in the form and click Submit
4. Check your MyFormConnect dashboard under **Leads** or **Form Responses** to confirm the submission arrived

##### Important Note

                            If the form submits but nothing appears in MyFormConnect, confirm the site URL is added to your allowed domains list in the MyFormConnect dashboard.

### Site-wide via Plugin

                5 minutes

                Easy

If you have multiple MyFormConnect forms across your site and want to load `loader.js` once globally, use the **Insert Headers and Footers** plugin.

                  1

#### Install Insert Headers and Footers

                    This free plugin adds code to every page without editing theme files.

1. Go to **Plugins → Add New**
2. Search for **Insert Headers and Footers** by WPBeginner
3. Click **Install Now**, then **Activate

##### Important Note

                            This plugin has over 2 million active installs and is actively maintained.

                  2

#### Add the loader.js script globally

                    Configure the plugin to load `loader.js` on every page of your site.

1. Go to **Settings → Insert Headers and Footers**
2. In the **Scripts in Header** box, paste the script tag below
3. Replace `YOUR_DOMAIN_UUID` with your domain UUID from MyFormConnect (found in the dashboard under Domains)
4. Click **Save**

```
<script src="https://myformconnect.io/loader.js" data-client-id="YOUR_DOMAIN_UUID"></script>
```

##### Important Note

                            When loading loader.js globally, use your **domain UUID** (not a form UUID) as the `data-client-id`. Each individual form still needs the correct `action` URL with its own form UUID.

                  3

#### Add forms with the Custom HTML block

                    Now that loader.js loads automatically, each form only needs the HTML markup — no per-form script tag.

1. Add a **Custom HTML** block to any page
2. Paste the form HTML with the correct form-specific UUID in the `action` attribute
3. Add `data-mfc="true"` to the form element
4. Save and test

```
<form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true">
  <p>
    <label for="name">Name *</label><br>
    <input type="text" id="name" name="name" required>
  </p>
  <p>
    <label for="email">Email *</label><br>
    <input type="email" id="email" name="email" required>
  </p>
  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="4"></textarea>
  </p>
  <button type="submit">Send Message</button>
</form>
```

##### Important Note

                            Do not include a `<script>` tag in the Custom HTML block when using this approach — the loader is already loaded site-wide.

## ** Troubleshooting

              Confirm your site URL (including protocol, e.g. `https://yoursite.com`) is in the allowed domains list in your MyFormConnect dashboard. Also check the browser console (F12 → Console) for any CORS or network errors.

              Log in to your MyFormConnect dashboard, open the form, and look at the URL — it contains the form UUID (e.g. `/account/forms/550e8400-e29b-41d4-a716-446655440000/edit`). Alternatively, find the form UUID in the form's settings or embed snippet.

              Check that the form has `data-mfc="true"` on the `<form>` element. Confirm the `data-client-id` attribute on the script tag contains a valid UUID. Check the browser console for script loading errors.

              Clear your WordPress caching plugin cache (WP Rocket, W3 Total Cache, etc.) after making changes, and also clear any CDN cache. Test in a private/incognito browser window to rule out browser caching.

              A PHP syntax error in functions.php can break the site. Access your site via FTP or the hosting file manager and remove (or revert) the code you added to `wp-content/themes/your-child-theme/functions.php`. Always back up the file before editing.

              Some hosts or security plugins disable the Theme File Editor. Use FTP or the hosting control panel's file manager to edit `functions.php` directly, or use the Custom HTML block method which requires no PHP editing.

#### Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

          [** Contact Support](/support)

## ** Related Integrations

      [PHP Sites Integration Guide →](/docs/platforms/cms/php)      [Drupal Integration Guide →](/docs/platforms/cms/drupal)      [Static Sites Integration Guide →](/docs/deployment/static-sites)

## ** References & Official Documentation

- ** [WordPress Developer Documentation](https://developer.wordpress.org/) **
- ** [WordPress Codex](https://codex.wordpress.org/) **
- ** [WordPress Plugin Development](https://developer.wordpress.org/plugins/) **
- ** [WordPress Theme Development](https://developer.wordpress.org/themes/) **

## ** Next Steps

#### ** Configure MyFormConnect

- ** Set up your timezone
- ** Configure lead notifications
- ** Set up advanced spam detection
- ** Add team members to your account

#### ** Advanced Features

- ** Use our custom form templates
- ** Try AI Insights for Leads
- ** Integrate with your CRM
- ** Set up automated workflows