Adding Contact Form to Hugo: Step by Step Guide

Building static sites with Hugo offers speed and simplicity, but adding dynamic elements like forms can be tricky. That's where Static Ninja Forms comes in, making it easy to collect form submissions from your static sites. In this guide, we'll walk you through integrating Static Ninja Forms into your Hugo site, helping you gather valuable information from your visitors seamlessly.

What You Need

Before we begin, make sure you have:

  1. A Hugo site ready to go.
  2. An account of Static Ninja Forms. Sign up here.

Step 1: Create Your Form on Static Ninja Forms

Once you've signed up and logged into Static Ninja Forms, follow these steps:

  1. Create a New Form: Navigate to the forms dashboard and click on the "Create New Form" button.
  2. Copy Your Form Endpoint: After creating your form, you'll receive a unique endpoint KEY. Copy this KEY, as you'll need it for your Hugo site.

Step 2: Add the Form to Your Hugo Site

Next, integrate the form into your Hugo site by following these steps:

  1. Open Your Hugo Project: Navigate to the directory where your Hugo project is located.
  2. Add the Form HTML: Insert the following HTML code into your page, replacing YOUR_KEY with the endpoint KEY you copied earlier:
<form method="POST" action="https://staticninja.com/api/form-submit/[YOUR_KEY]" class="flex flex-col gap-2">
    <div class="flex flex-col gap-1">
        <label class="text-sm text-neutral-800">Email</label>
        <input class="p-2 rounded border border-neutral-300 outline-none" type="email" name="email" />
    </div>
    <div class="flex flex-col gap-1">
        <label class="text-sm text-neutral-800">Message</label>
        <textarea class="p-2 rounded border border-neutral-300 outline-none"></textarea>
    </div>
    <div>
        <button class="px-4 py-2 bg-neutral-900 text-white">Submit</button>
    </div>
</form>

Step 3: Test Your Form

Deploy your Hugo site and navigate to the page that shows your new form. Fill out the form and submit it to ensure everything works correctly. Check your Static Ninja Forms dashboard to see the collected submissions. Or just wait a few seconds to receive an email notification sent by the Static Ninja Forms.