Last reviewed by Netlify Support: April 2024
How to Create a HTML Netlify form in Hugo
Hugo is a popular Static Site Generator written in Go that you can use when hosting a site at Netlify. In this support guide, we are specifically going to look at setting up Netlify forms on your Hugo site so that you can start receiving communications from your visitors.
What you need to add to create a HTML Netlify form in Hugo:
You’ll need to add the form to the index.html file on your site. As a reminder, you are likely to encounter a Page Not Found error when deploying any site that does not have an index.html. The form will need to include either data-netlify="true" or netlify attribute in the form tag. If you have multiple forms, each form will need a different name attribute within the form tag.
You can find code for a basic form here which includes the data-netlify="true" attribute and a name attribute.
You’ll also need to ensure that you enable forms for the site by following the Netlify docs here.
Add the site to Netlify
You can deploy the site to Netlify by following Netlify’s documentation here.
Check your forms are detected:
You can double check to ensure that your form was detected by Netlify. Visiting the Deploy log (go to Site > Deploy), if you scroll to the bottom of the log, and look under Netlify Build Complete, you should see Processing form - form name and Detected form fields:
Under the Forms tab, you’ll see Active forms with the form name (contact in this example).
Testing forms
You can then test your form by going to the live site. Enter some mock information and then click Submit.
You should then see a Thank you!
Going back to the Forms tab, click on the form name under Active forms and you should then see the form that was submitted.
Adding Honeypot field
To better protect against spammers, you’ll want to setup a hidden Honeypot field in your form. By adding a netlify-honeypot attribute to your form you can help prevent bot form submissions. The netlify-honeypot attribute will need to be added to your <form> attribute. In addition, after adding the netlify-honeypot attribute, you’ll need to add a hidden form field. With the honeypot field added, if a form is submitted with the hidden input field completed, the form is then rejected as only a bot would see and complete the field.
Adding reCAPTCHA to your form
Adding reCAPTCHA to your form will also help prevent spammers from using submitting your forms. To include reCAPTCHA, add the attribute data-netlify-recaptcha="true" to your form tag.
After adding the data-netlify-recaptucha=”true’ attribute, then add an empty div where you want the reCAPTCHA to appear on your site. Inside that div add the attribute data-netlify-recaptcha="true" again.
Form Troubleshooting
You can find tips to help you troubleshoot forms in Netlify Docs and in our Support Guides:
[Support Guide] Debugging support and help for Netlify Forms – start here!
[Support Guide] Form problems, form debugging, 404 when submitting
[Support Guide] Form not showing in Netlify site dashboard
Use this guide to help you create your own Netlify form for your Hugos site with both honeypot and recaptcha spam filters. If you have issues after going through the form troubleshooting section of this guide, you can get help on Netlify Support Forms. The Support team is always happy to assist with any questions regarding Netlify.