# Ghost Integration Guide

Complete guide to integrate MyFormConnect with Ghost

      Setup time: **5-10 minutes
      Difficulty: **Easy
        Compatible versions: **Ghost 5.x**

Add MyFormConnect forms to your Ghost blog using Code Injection or HTML cards. Perfect for newsletter signups, contact forms, and reader engagement.

## ** Prerequisites

- ** A MyFormConnect account - [Sign up here](/users/sign_up)
- ** A form created in your MyFormConnect dashboard with its UUID copied
- ** Ghost admin access (Staff or Owner role)
- ** Self-hosted Ghost or Ghost(Pro) plan

## ** Integration Methods

### HTML Card (Recommended)

                5 minutes

                Easy

Add a MyFormConnect form to specific posts or pages using Ghost's HTML card.

                  1

#### Copy your form UUID

                    Get your form UUID from MyFormConnect dashboard.

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

                  2

#### Add HTML card to post/page

                    Insert an HTML card where you want the form.

1. Edit a post or page in Ghost editor
2. Type `/html` to insert an HTML card
3. Click the card to open the HTML editor

                  3

#### Paste form code

                    Add your MyFormConnect form HTML.

1. Replace `YOUR_FORM_UUID` with your actual UUID
2. Click outside the card or press Escape
3. Publish or update the post/page

```
<div style="max-width: 500px; margin: 2rem auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
  <form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true">
    <div style="margin-bottom: 15px;">
      <label for="name" style="display: block; margin-bottom: 5px; font-weight: 500;">Name *</label>
      <input type="text" id="name" name="name" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    <div style="margin-bottom: 15px;">
      <label for="email" style="display: block; margin-bottom: 5px; font-weight: 500;">Email *</label>
      <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    <div style="margin-bottom: 15px;">
      <label for="message" style="display: block; margin-bottom: 5px; font-weight: 500;">Message</label>
      <textarea id="message" name="message" rows="4" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
    </div>
    <button type="submit" style="padding: 12px 24px; background: #15171a; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500;">Send Message</button>
  </form>
  <script src="https://myformconnect.io/loader.js" data-client-id="YOUR_FORM_UUID"></script>
</div>
```

                  4

#### Test

                    Verify submissions reach MyFormConnect.

1. Visit the published post/page
2. Fill out and submit the form
3. Check MyFormConnect dashboard under **Leads**

### Code Injection (Site-wide)

                8 minutes

                Easy

Add MyFormConnect loader.js site-wide using Ghost Code Injection. Best for multiple forms across your blog.

                  1

#### Access Code Injection

                    Navigate to Ghost Code Injection settings.

1. Go to **Settings → Code injection** in Ghost admin
2. You'll see Site Header and Site Footer sections

                  2

#### Add loader.js to Site Header

                    Insert MyFormConnect loader.js.

1. Paste the script in **Site Header**
2. Replace `YOUR_DOMAIN_UUID` with your domain UUID
3. Click **Save**

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

##### Important Note

                            Use your **domain UUID**, not form UUID, for site-wide loading.

                  3

#### Add forms without script tags

                    Now add forms using HTML cards without the script.

1. Use HTML cards as before, but omit the script tag
2. Each form needs `data-mfc="true"` and correct UUID in action

```
<div style="max-width: 500px; margin: 2rem auto;">
  <form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true">
    <div style="margin-bottom: 15px;">
      <label for="name">Name *</label><br>
      <input type="text" id="name" name="name" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    <div style="margin-bottom: 15px;">
      <label for="email">Email *</label><br>
      <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    <button type="submit" style="padding: 10px 20px; background: #15171a; color: white; border: none; border-radius: 4px; cursor: pointer;">Send</button>
  </form>
</div>
```

## ** Troubleshooting

              Ensure you're on a Ghost version that supports HTML cards (Ghost 4.0+). Type `/html` in the editor to insert one.

              Check: 1) The post is Published (not Draft), 2) HTML card is properly closed, 3) Clear browser cache, 4) View in incognito mode.

              Check: 1) Form UUID is correct, 2) Browser console for errors, 3) You're checking the right form in MyFormConnect dashboard.

              Code Injection requires Staff or Owner role. If you're a Contributor or Author, ask your site owner to add the code or give you the necessary permissions.

#### 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

      [WordPress Integration Guide →](/docs/platforms/cms/wordpress)      [Static Sites Integration Guide →](/docs/deployment/static-sites)      [Webflow Integration Guide →](/docs/platforms/builders/webflow)

## ** References & Official Documentation

- ** [Ghost Developer Documentation](https://ghost.org/docs/) **
- ** [Ghost Theme Development](https://ghost.org/docs/themes/) **
- ** [Ghost API Documentation](https://ghost.org/docs/content-api/) **
- ** [Ghost Handlebars Documentation](https://ghost.org/docs/themes/helpers/) **

## ** 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