GitHub Pages Integration Guide

Complete guide to integrate MyFormConnect with GitHub Pages

Setup time: 10-15 minutes

Difficulty: Easy

Compatible versions: All GitHub Pages sites

Host a static site on GitHub Pages for free and collect form submissions through MyFormConnect. GitHub Pages serves static files — HTML, CSS, and JavaScript — so you cannot run server-side code. MyFormConnect acts as the form backend, storing submissions and sending notifications.

Prerequisites

A MyFormConnect account — sign up here
A form created in MyFormConnect with the form UUID copied
A GitHub account — sign up at github.com
Git installed on your computer, or use GitHub's web editor

Integration Methods

Single HTML Page

5 minutes Easy

The simplest approach: one self-contained HTML file with embedded CSS and JavaScript. Suitable for personal portfolios, landing pages, or any project that needs a contact form. Works with both user sites and project sites.

Create the HTML file

Create a file called contact.html (or add the form to your index.html). The example below is a complete, standalone contact page — HTML, CSS, and the form all in one file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 560px;
      margin: 48px auto;
      padding: 0 24px;
      color: #1f2937;
    }
    h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 24px; }
    label {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      margin: 16px 0 4px;
    }
    input, textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 1rem;
      font-family: inherit;
    }
    input:focus, textarea:focus {
      outline: 2px solid #2563eb;
      outline-offset: 1px;
      border-color: transparent;
    }
    textarea { resize: vertical; min-height: 100px; }
    button {
      margin-top: 20px;
      padding: 10px 28px;
      background: #2563eb;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
    }
    button:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <h1>Contact Us</h1>

  <form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true">
    <label for="name">Name *</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email *</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Send Message</button>
  </form>

  <!-- loader.js adds AJAX submission, loading state, and validation.
       Remove this script tag to use a plain HTML form POST instead. -->
  <script src="https://myformconnect.io/loader.js" data-client-id="YOUR_FORM_UUID"></script>
</body>
</html>

Important Note

Replace both instances of YOUR_FORM_UUID with your actual form UUID from MyFormConnect. The loader.js script is optional — the form works without it as a standard HTML POST.

Commit and push to GitHub

Add the file to your repository and push to the branch GitHub Pages is configured to serve.

Place contact.html in your repository root (or in the /docs folder if that is your Pages source)
Commit the file: git add contact.html && git commit -m "Add contact form"
Push: git push origin main
Wait 1-2 minutes for GitHub Pages to build and deploy

Important Note

If you are using GitHub's web editor, click Add file → Create new file, paste the HTML, name it contact.html, and commit directly.

Whitelist your GitHub Pages domain in MyFormConnect

MyFormConnect only accepts submissions from domains you have explicitly allowed.

Note your GitHub Pages URL — either https://username.github.io or https://username.github.io/repository-name
Log in to MyFormConnect and open Domains in the dashboard
Add the full URL including protocol (e.g. https://username.github.io)
Save

Important Note

If you later add a custom domain, you will need to add that domain to MyFormConnect as well and can remove the github.io entry.

User / Org Site

10 minutes Easy

A user or organization site publishes at https://username.github.io (no sub-path). The repository must be named exactly username.github.io or orgname.github.io.

Create the special repository

GitHub Pages user/org sites require the repository to match your username exactly.

On GitHub, click New repository
Name it username.github.io — replace username with your exact GitHub username (case-sensitive)
Set visibility to Public
Initialize with a README (optional), then click Create repository

Important Note

Only one user site per account is allowed. Organization accounts follow the same pattern: orgname.github.io.

Enable GitHub Pages

GitHub Pages is enabled automatically for username.github.io repositories. Verify the setting.

In the repository, go to Settings → Pages
Under Build and deployment, confirm Source is set to Deploy from a branch and the branch is main (root)
The site URL shown is https://username.github.io

Important Note

It can take 1–5 minutes for the first deployment to complete. Subsequent pushes deploy within about 1 minute.

Add your contact form file

Add the HTML file from the Single HTML Page tab (or any HTML file with the MyFormConnect form) to the root of the repository.

Clone the repository locally: git clone https://github.com/username/username.github.io
Add index.html (or contact.html) with your MyFormConnect form
Commit and push: git add . && git commit -m "Add site" && git push origin main
Wait 1–2 minutes, then visit https://username.github.io

Project Site

10 minutes Easy

A project site publishes from any repository at https://username.github.io/repository-name. You can serve from the main branch root, a /docs subfolder, or a dedicated gh-pages branch.

Enable GitHub Pages for the repository

Choose where GitHub Pages will read your site files from.

In your repository, go to Settings → Pages
Under Build and deployment → Source, select Deploy from a branch
Choose the branch (main or gh-pages) and the folder (root or /docs)
Click Save
Your site will be live at https://username.github.io/repository-name/

Important Note

Using the /docs folder is convenient if you keep your project source and site in the same branch. The gh-pages branch is better when you want to separate build output from source.

Add the contact form

Add an HTML file containing the MyFormConnect form to your chosen Pages source folder.

Create contact.html in the root or /docs folder (whichever you selected as your Pages source)
Paste the complete HTML from the Single HTML Page tab
Replace YOUR_FORM_UUID with your actual form UUID
Commit and push

Important Note

The form action URL and loader.js src must always be absolute URLs (https://myformconnect.io/...). Never use relative paths like ../loader.js.

Whitelist the project site URL in MyFormConnect

Add the full project site URL to your allowed domains in MyFormConnect.

Your site URL will be https://username.github.io/repository-name
In MyFormConnect, go to Domains and add this URL
Save and test a form submission

Custom Domain + CNAME

15-30 minutes Intermediate

Map a custom domain (e.g. www.yoursite.com) to your GitHub Pages site. DNS propagation can take up to 24 hours.

Set the custom domain in GitHub

Tell GitHub Pages which domain to serve your site on.

Go to your repository Settings → Pages
Under Custom domain, type your domain — e.g. www.yoursite.com
Click Save
GitHub will create a CNAME file in your repository root containing the domain name

Important Note

If GitHub does not create the CNAME file automatically, create it yourself: a plain text file named CNAME (no extension) in your repository root, containing only the domain on one line.

Configure DNS at your domain registrar

Point your domain's DNS records to GitHub Pages.

For a www subdomain — Add a CNAME record: www → username.github.io
For an apex domain (yoursite.com without www) — Add four A records pointing to GitHub's IPs: 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
Optionally add an AAAA record for IPv6: 2606:50c0:8000::153, 2606:50c0:8001::153, 2606:50c0:8002::153, 2606:50c0:8003::153
Save the DNS records and wait for propagation (usually 15 minutes to 24 hours)

Important Note

GitHub's official IP addresses may change. Always check the current list at GitHub Pages custom domain docs.

Enforce HTTPS

Once GitHub verifies your DNS, enable HTTPS.

Return to Settings → Pages
Once DNS has propagated, the Enforce HTTPS checkbox will become available
Check Enforce HTTPS and save
Test by visiting https://www.yoursite.com

Important Note

HTTPS is required for the MyFormConnect form to work. Browsers block form submissions from HTTP pages to HTTPS endpoints.

Update MyFormConnect domain whitelist

Add your custom domain to MyFormConnect so it accepts form submissions.

In MyFormConnect go to Domains
Add https://www.yoursite.com (your custom domain with protocol)
You may also remove the old github.io entry if you no longer need it
Save and submit a test form

Jekyll Site

10 minutes Intermediate

If your GitHub Pages site uses Jekyll, add the MyFormConnect form as a reusable _includes partial so you can drop it into any page or layout.

Create the form include

Add a file at _includes/mfc-contact-form.html with the form HTML.

<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>
<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. You can define the UUID as a Jekyll variable in _config.yml and reference it with {{ site.mfc_form_uuid }} if you prefer.

Include the form in a page

Use Jekyll's include tag in any Markdown or HTML page.

Open the page where you want the form (e.g. contact.md or contact.html)
Add the include tag where the form should appear:

---
layout: default
title: Contact Us
---

## Get in Touch

{% include mfc-contact-form.html %}

Important Note

The include tag works in both Markdown (.md) and HTML (.html) pages. Make sure the file is in the _includes folder at the root of your repository.

Whitelist your domain and deploy

Add your GitHub Pages domain to MyFormConnect and push to deploy.

Add your domain (e.g. https://username.github.io) to MyFormConnect Domains
Commit and push your changes: git add . && git commit -m "Add contact form" && git push
GitHub Pages will build the Jekyll site automatically — usually within 1-2 minutes
Visit the contact page and submit a test form

Important Note

GitHub Pages builds Jekyll automatically; you do not need to run jekyll build yourself unless you are testing locally.

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 MyFormConnect with the form UUID copied
A GitHub account — sign up at github.com
Git installed on your computer, or use GitHub's web editor

Integration Methods

Single HTML Page

5 minutes Easy

Create the HTML file

Create a file called contact.html (or add the form to your index.html). The example below is a complete, standalone contact page — HTML, CSS, and the form all in one file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 560px;
      margin: 48px auto;
      padding: 0 24px;
      color: #1f2937;
    }
    h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 24px; }
    label {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      margin: 16px 0 4px;
    }
    input, textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 1rem;
      font-family: inherit;
    }
    input:focus, textarea:focus {
      outline: 2px solid #2563eb;
      outline-offset: 1px;
      border-color: transparent;
    }
    textarea { resize: vertical; min-height: 100px; }
    button {
      margin-top: 20px;
      padding: 10px 28px;
      background: #2563eb;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
    }
    button:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <h1>Contact Us</h1>

  <form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true">
    <label for="name">Name *</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email *</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Send Message</button>
  </form>

  <!-- loader.js adds AJAX submission, loading state, and validation.
       Remove this script tag to use a plain HTML form POST instead. -->
  <script src="https://myformconnect.io/loader.js" data-client-id="YOUR_FORM_UUID"></script>
</body>
</html>

Important Note

Replace both instances of YOUR_FORM_UUID with your actual form UUID from MyFormConnect. The loader.js script is optional — the form works without it as a standard HTML POST.

Commit and push to GitHub

Add the file to your repository and push to the branch GitHub Pages is configured to serve.

Place contact.html in your repository root (or in the /docs folder if that is your Pages source)
Commit the file: git add contact.html && git commit -m "Add contact form"
Push: git push origin main
Wait 1-2 minutes for GitHub Pages to build and deploy

Important Note

If you are using GitHub's web editor, click Add file → Create new file, paste the HTML, name it contact.html, and commit directly.

Whitelist your GitHub Pages domain in MyFormConnect

MyFormConnect only accepts submissions from domains you have explicitly allowed.

Note your GitHub Pages URL — either https://username.github.io or https://username.github.io/repository-name
Log in to MyFormConnect and open Domains in the dashboard
Add the full URL including protocol (e.g. https://username.github.io)
Save

Important Note

If you later add a custom domain, you will need to add that domain to MyFormConnect as well and can remove the github.io entry.

User / Org Site

10 minutes Easy

A user or organization site publishes at https://username.github.io (no sub-path). The repository must be named exactly username.github.io or orgname.github.io.

Create the special repository

GitHub Pages user/org sites require the repository to match your username exactly.

On GitHub, click New repository
Name it username.github.io — replace username with your exact GitHub username (case-sensitive)
Set visibility to Public
Initialize with a README (optional), then click Create repository

Important Note

Only one user site per account is allowed. Organization accounts follow the same pattern: orgname.github.io.

Enable GitHub Pages

GitHub Pages is enabled automatically for username.github.io repositories. Verify the setting.

In the repository, go to Settings → Pages
Under Build and deployment, confirm Source is set to Deploy from a branch and the branch is main (root)
The site URL shown is https://username.github.io

Important Note

It can take 1–5 minutes for the first deployment to complete. Subsequent pushes deploy within about 1 minute.

Add your contact form file

Add the HTML file from the Single HTML Page tab (or any HTML file with the MyFormConnect form) to the root of the repository.

Clone the repository locally: git clone https://github.com/username/username.github.io
Add index.html (or contact.html) with your MyFormConnect form
Commit and push: git add . && git commit -m "Add site" && git push origin main
Wait 1–2 minutes, then visit https://username.github.io

Project Site

10 minutes Easy

A project site publishes from any repository at https://username.github.io/repository-name. You can serve from the main branch root, a /docs subfolder, or a dedicated gh-pages branch.

Enable GitHub Pages for the repository

Choose where GitHub Pages will read your site files from.

In your repository, go to Settings → Pages
Under Build and deployment → Source, select Deploy from a branch
Choose the branch (main or gh-pages) and the folder (root or /docs)
Click Save
Your site will be live at https://username.github.io/repository-name/

Important Note

Using the /docs folder is convenient if you keep your project source and site in the same branch. The gh-pages branch is better when you want to separate build output from source.

Add the contact form

Add an HTML file containing the MyFormConnect form to your chosen Pages source folder.

Create contact.html in the root or /docs folder (whichever you selected as your Pages source)
Paste the complete HTML from the Single HTML Page tab
Replace YOUR_FORM_UUID with your actual form UUID
Commit and push

Important Note

The form action URL and loader.js src must always be absolute URLs (https://myformconnect.io/...). Never use relative paths like ../loader.js.

Whitelist the project site URL in MyFormConnect

Add the full project site URL to your allowed domains in MyFormConnect.

Your site URL will be https://username.github.io/repository-name
In MyFormConnect, go to Domains and add this URL
Save and test a form submission

Custom Domain + CNAME

15-30 minutes Intermediate

Map a custom domain (e.g. www.yoursite.com) to your GitHub Pages site. DNS propagation can take up to 24 hours.

Set the custom domain in GitHub

Tell GitHub Pages which domain to serve your site on.

Go to your repository Settings → Pages
Under Custom domain, type your domain — e.g. www.yoursite.com
Click Save
GitHub will create a CNAME file in your repository root containing the domain name

Important Note

If GitHub does not create the CNAME file automatically, create it yourself: a plain text file named CNAME (no extension) in your repository root, containing only the domain on one line.

Configure DNS at your domain registrar

Point your domain's DNS records to GitHub Pages.

For a www subdomain — Add a CNAME record: www → username.github.io
For an apex domain (yoursite.com without www) — Add four A records pointing to GitHub's IPs: 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
Optionally add an AAAA record for IPv6: 2606:50c0:8000::153, 2606:50c0:8001::153, 2606:50c0:8002::153, 2606:50c0:8003::153
Save the DNS records and wait for propagation (usually 15 minutes to 24 hours)

Important Note

GitHub's official IP addresses may change. Always check the current list at GitHub Pages custom domain docs.

Enforce HTTPS

Once GitHub verifies your DNS, enable HTTPS.

Return to Settings → Pages
Once DNS has propagated, the Enforce HTTPS checkbox will become available
Check Enforce HTTPS and save
Test by visiting https://www.yoursite.com

Important Note

HTTPS is required for the MyFormConnect form to work. Browsers block form submissions from HTTP pages to HTTPS endpoints.

Update MyFormConnect domain whitelist

Add your custom domain to MyFormConnect so it accepts form submissions.

In MyFormConnect go to Domains
Add https://www.yoursite.com (your custom domain with protocol)
You may also remove the old github.io entry if you no longer need it
Save and submit a test form

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