# 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](/users/sign_up)
- ** A form created in MyFormConnect with the form UUID copied
- ** A GitHub account — [sign up at github.com](https://github.com/join)
- ** 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.

                  1

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

                  2

#### Commit and push to GitHub

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

1. Place `contact.html` in your repository root (or in the `/docs` folder if that is your Pages source)
2. Commit the file: `git add contact.html && git commit -m "Add contact form"`
3. Push: `git push origin main`
4. 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.

                  3

#### Whitelist your GitHub Pages domain in MyFormConnect

                    MyFormConnect only accepts submissions from domains you have explicitly allowed.

1. Note your GitHub Pages URL — either `https://username.github.io` or `https://username.github.io/repository-name`
2. Log in to MyFormConnect and open **Domains** in the dashboard
3. Add the full URL including protocol (e.g. `https://username.github.io`)
4. 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`.

                  1

#### Create the special repository

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

1. On GitHub, click **New repository**
2. Name it **username.github.io** — replace *username* with your exact GitHub username (case-sensitive)
3. Set visibility to **Public**
4. 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`.

                  2

#### Enable GitHub Pages

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

1. In the repository, go to **Settings → Pages**
2. Under **Build and deployment**, confirm **Source** is set to *Deploy from a branch* and the branch is `main` (root)
3. 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.

                  3

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

1. Clone the repository locally: `git clone https://github.com/username/username.github.io`
2. Add `index.html` (or `contact.html`) with your MyFormConnect form
3. Commit and push: `git add . && git commit -m "Add site" && git push origin main`
4. 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.

                  1

#### Enable GitHub Pages for the repository

                    Choose where GitHub Pages will read your site files from.

1. In your repository, go to **Settings → Pages**
2. Under **Build and deployment → Source**, select *Deploy from a branch*
3. Choose the branch (`main` or `gh-pages`) and the folder (**root** or **/docs**)
4. Click **Save**
5. 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.

                  2

#### Add the contact form

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

1. Create `contact.html` in the root or `/docs` folder (whichever you selected as your Pages source)
2. Paste the complete HTML from the Single HTML Page tab
3. Replace `YOUR_FORM_UUID` with your actual form UUID
4. 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`.

                  3

#### Whitelist the project site URL in MyFormConnect

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

1. Your site URL will be `https://username.github.io/repository-name`
2. In MyFormConnect, go to **Domains** and add this URL
3. 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.

                  1

#### Set the custom domain in GitHub

                    Tell GitHub Pages which domain to serve your site on.

1. Go to your repository **Settings → Pages**
2. Under **Custom domain**, type your domain — e.g. `www.yoursite.com`
3. Click **Save**
4. 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.

                  2

#### Configure DNS at your domain registrar

                    Point your domain's DNS records to GitHub Pages.

1. **For a `www` subdomain** — Add a CNAME record: `www` → `username.github.io`
2. **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`
3. Optionally add an AAAA record for IPv6: `2606:50c0:8000::153`, `2606:50c0:8001::153`, `2606:50c0:8002::153`, `2606:50c0:8003::153`
4. 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](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site).

                  3

#### Enforce HTTPS

                    Once GitHub verifies your DNS, enable HTTPS.

1. Return to **Settings → Pages**
2. Once DNS has propagated, the **Enforce HTTPS** checkbox will become available
3. Check **Enforce HTTPS** and save
4. 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.

                  4

#### Update MyFormConnect domain whitelist

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

1. In MyFormConnect go to **Domains**
2. Add `https://www.yoursite.com` (your custom domain with protocol)
3. You may also remove the old `github.io` entry if you no longer need it
4. 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.

                  1

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

                  2

#### Include the form in a page

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

1. Open the page where you want the form (e.g. `contact.md` or `contact.html`)
2. 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.

                  3

#### Whitelist your domain and deploy

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

1. Add your domain (e.g. `https://username.github.io`) to MyFormConnect **Domains**
2. Commit and push your changes: `git add . && git commit -m "Add contact form" && git push`
3. GitHub Pages will build the Jekyll site automatically — usually within 1-2 minutes
4. 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

              Confirm your GitHub Pages domain (including `https://`) is in the allowed domains list in MyFormConnect. Open browser DevTools (F12) → Network tab, submit the form, and look for the request to `myformconnect.io` — check the response status and any error messages.

              Check that the file name and path match what GitHub Pages is configured to serve. For a user site, `index.html` in the repository root is served at the root URL. For a project site with `/docs` folder, the file must be inside `/docs`. Also check Settings → Pages shows no build error.

              DNS propagation can take up to 24 hours. Use a tool such as [dnschecker.org](https://dnschecker.org) to verify the CNAME or A records have propagated globally. Also confirm the `CNAME` file exists in your repository root.

              GitHub needs to verify that your DNS is configured correctly before it can issue an SSL certificate. Wait for DNS propagation, then return to Settings → Pages. If the checkbox remains greyed out after 24 hours, delete the custom domain and re-add it.

              Check the GitHub Actions tab in your repository for the build error message. Common causes: the file is named incorrectly (must be in `_includes/`), a Liquid syntax error in the include, or the YAML front matter in `_config.yml` has a formatting issue.

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

      [Static Sites Integration Guide →](/docs/deployment/static-sites)      [Vercel Integration Guide →](/docs/deployment/vercel)      [Cloudflare Pages Integration Guide →](/docs/deployment/cloudflare-pages)

## ** References & Official Documentation

- ** [GitHub Pages Documentation](https://docs.github.com/en/pages) **
- ** [GitHub Pages Custom Domain](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site) **
- ** [Jekyll Documentation](https://jekyllrb.com/docs/) **
- ** [GitHub Actions for Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/using-custom-workflows-with-github-pages) **

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