Contact Form on a Static Site

How to add a contact form on a static site

There are A LOT of external tools for sending emails and messages. I have just chosen one that I thought was easy to use and setup, getform. Small disclaimer: You only get one form in the free plan.

Sign Up for getform

Straight forward sign up but they will ask you to confirm your email address.

Getform signup

Create Endpoint for Form

Fill out the form to create an endpoint for you contact form. You can give it any name, i.e. "Portfolio Contact Form" and choose your timezone.

Getform create

Building the form

After creating the endpoint, they will give you a URL which you will use inside of your HTML form. I have created a simple form (with Bootstrap) that you can plug directly into your page.

⚠️ Replace your endpoint inside of the action

<form action="INSERT_YOUR_GETFORM_ENDPOINT_HERE" method="POST">
  <div class="form-group">
    <input type="text" name="name" class="form-control" placeholder="Name" required=true>
  </div>
  <div class="form-group">
    <input type="email" name="email" class="form-control" placeholder="Email" required=true>
  </div>
  <div class="form-group">
    <textarea type="text" name="message" class="form-control" placeholder="Message..." required=true></textarea>
  </div>
  <button type="submit" class="btn btn-primary w-100">Send</button>
</form>

You're Connected!

You can now receive submissions from your form. You should see them arriving in your getform dashboard.

Connect to your Email

You won't want to come to the getform dashboard and check if someone has sent you a message. Geform can notify you with an email each time a submission comes in.

Click on the lightning bolt icon to pull up the automation options.

Getform automation

In the options on the top right, you should see "Send an email notification". Enter your email, click submit, and you're all set! 🚀