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

Copy your form UUID

Get your form UUID from MyFormConnect dashboard.

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

Add HTML card to post/page

Insert an HTML card where you want the form.

Edit a post or page in Ghost editor
Type /html to insert an HTML card
Click the card to open the HTML editor

Paste form code

Add your MyFormConnect form HTML.

Replace YOUR_FORM_UUID with your actual UUID
Click outside the card or press Escape
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>

Test

Verify submissions reach MyFormConnect.

Visit the published post/page
Fill out and submit the form
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.

Access Code Injection

Navigate to Ghost Code Injection settings.

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

Add loader.js to Site Header

Insert MyFormConnect loader.js.

Paste the script in Site Header
Replace YOUR_DOMAIN_UUID with your domain UUID
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.

Add forms without script tags

Now add forms using HTML cards without the script.

Use HTML cards as before, but omit the script tag
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

Still having issues?

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

Contact Support

Related Integrations

References & Official Documentation

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

Need Help?

Our support team is here to help you with your integration.

Contact Support

Prerequisites

A MyFormConnect account - Sign up here
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.

Copy your form UUID

Get your form UUID from MyFormConnect dashboard.

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

Add HTML card to post/page

Insert an HTML card where you want the form.

Edit a post or page in Ghost editor
Type /html to insert an HTML card
Click the card to open the HTML editor

Paste form code

Add your MyFormConnect form HTML.

Replace YOUR_FORM_UUID with your actual UUID
Click outside the card or press Escape
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>

Test

Verify submissions reach MyFormConnect.

Visit the published post/page
Fill out and submit the form
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.

Access Code Injection

Navigate to Ghost Code Injection settings.

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

Add loader.js to Site Header

Insert MyFormConnect loader.js.

Paste the script in Site Header
Replace YOUR_DOMAIN_UUID with your domain UUID
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.

Add forms without script tags

Now add forms using HTML cards without the script.

Use HTML cards as before, but omit the script tag
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

Still having issues?

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

Contact Support

References & Official Documentation

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

Ghost Integration Guide

Prerequisites

Integration Methods

HTML Card (Recommended)

Copy your form UUID

Add HTML card to post/page

Paste form code

Test

Code Injection (Site-wide)

Access Code Injection

Add loader.js to Site Header

Important Note

Add forms without script tags

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormConnect

Advanced Features

Need Help?

Ghost Integration Guide

Prerequisites

Integration Methods

HTML Card (Recommended)

Copy your form UUID

Add HTML card to post/page

Paste form code

Test

Code Injection (Site-wide)

Access Code Injection

Add loader.js to Site Header

Important Note

Add forms without script tags

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormConnect

Advanced Features

Need Help?

MyFormConnect - Request Demo

Thank you for scheduling a demo!

MyFormConnect - Any issues?

Thank you for your request!

MyFormConnect - Tailored Solution