There are a number of tools, like Hugo (Specific instructions for Hugo), Jekyll and Hexo to easily make static websites. No need to maintain some kind of web framework on your server. No server side code, so no security risk is introduced either. But now you do have to think about handling form interaction. Without server-side code, you need to use a static form service to handle the form submission for you. Un-static Forms to the rescue!

We’ll show you how to quickly intergrate Un-static Forms into your website.

Locating the form tag

We’ll assume you already built a form into your website. If not, you can check out our static form examples for inspiration.

Every form in HTML always starts with a form tag, like this:

<form method="post">

The method attribute in the form tag tells your browser to use a POST request when a user submits your form. If you are not familiar with what that means, don’t worry. Just make sure the method is set to post.

You’ll need to add an action attribute in the form tag as well, but for that we first need to know the form endpoint we can use.

Creating a form endpoint

In order to generate your form endpoint, you just register your form, verify your e-mail address, and you’ll receive a form endpoint in return.

Integrate form endpoint

To integrate your own form endpoint into your form, simply add, or replace the URL in the action attribute. Your code should now look like this:

<form action="https://forms.un-static.com/forms/YOUR_REFERENCE_HERE" method="post">

Where YOUR_REFERENCE_HERE is of course replaced with the reference code you received in the mail.

Testing

Now you can test your form. If you submit your form on your site, you should receive the results in your e-mail.

If something isn’t working and you verified all your steps, feel free to contact us us. We’ll try and help you out and get you going!

Supporting us

If you want to support us for providing this for free, you can help us by spreading the word and adding a small Powered by link at the bottom of your form or page.

 <div align="center">
    <p><small>(Powered by <a rel="nofollow" href="Un-static Forms">Un-static Forms</a>)</small></p>
  </div>