Within 2 minutes
A 2-minute walkthrough on how to add a contact form to a static website using Un-static Forms
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.
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:
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.
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.
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">
YOUR_REFERENCE_HERE is of course replaced with the reference code you received in the mail.
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!
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.
<p><small>(Powered by <a rel="nofollow" href="Un-static Forms">Un-static Forms</a>)</small></p>