How to include form html in a contact page?

support
1

I have may template and Hugo site up and working on Netlify thanks to some wonderful tutorials I found.

I’m looking to include a contact form page for feedback. I have the HTML code necessary for adding a Netlify contact form, but not sure exactly how to add it. I think I need to use a partial, so I created a contact.html page with the form html in it. I included that in the baseof.html page for testing in the main content area, but nothing shows for the page. I added it this way {{ partial "contact.html" . }}. The contact.html file is in my layouts\partials folder.

Is this the proper way to do this, with a partial, or am I off track? Can someone give me direction on what I need to do to get this working?

contact.html

<form name="contact" class="contact-form width-normal" action="/thank-you/" method="POST" data-netlify="true">
    <input type="hidden" name="form-name" value="contact" />
    <!-- Text input-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="Name"></label>
        <div class="col-md-4">
            <input id="contact-form-name" name="Name" type="text" placeholder="Name" class="form-control input-md" required="" autocomplete="off">
        </div>
    </div>
    <!-- Text input-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="Email"></label>
        <div class="col-md-4">
            <input id="contact-form-email" name="Email" type="email" placeholder="Email Address" class="form-control input-md" required="" autocomplete="off">
        </div>
    </div>
    <!-- Text input-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="Subject"></label>
        <div class="col-md-4">
            <input id="contact-form-subject" name="Subject" type="text" placeholder="Subject" class="form-control input-md" required="" autocomplete="off">
        </div>
    </div>
    <!-- Textarea -->
    <div class="form-group">
        <label class="col-md-4 control-label" for=""></label>
        <textarea class="form-control" id="contact-form-message" name="Message" placeholder="What's up?" rows="8"></textarea>
    </div>
    <!-- Button -->
    <div class="form-group">
        <button type="submit" value="Submit" id="Form-submit">Submit</button>
    </div>
</form>
2

Generally you are on the proper way, but hard to say in particular in your case without seeing contact.html code. Maybe all html inside that partial is inside {{ with condition_here }} {{ end }} or {{ if condition_here }} {{ end }} and these conditions resolve to false, that’s why all the content is not rendered.

3

Added the contact.html above.

4

I guess it’s more related to Netlify itself than to Hugo SSG, so it’s better to investigate Netlify forums, like this topic. Maybe the form was not recognized, or something is wrong with baseof.html.
Inserted the form into local Hugo site to baseof.html after <body> tag and then to index.html - the form rendered

1 Like
5

This won’t work for a Netlify form. As @vassap mentioned, you should check the Netlify forums/docs.