Create a Hook Form

Whether you’re building a totally new form or upgrading an existing form, you will begin by generating a new Hook Form. This process will create an ID, which the app will always use to identify the form, catch spam and safely deliver content. On the Dashboard (home) page, click the Create a form button to begin this short process.

Form Name

Your form’s name should be fairly explicit so you can easily pick it out of your collection and identify its purpose. A good example would be: mysite.com Contact Form.

Submission Recipients

In the next section, you will choose whom to notify (if anyone) when this form is submitted. These people will receive an email containing all form information if – and only if – the submission passes spam validation. These recipients must confirm themselves after you name them, so as to prevent any unwanted messages (that’s kind of our thing).

User Experience

After the form is submitted, you should present something to the user so he or she knows the form sent successfully, and you can guide the experience. In this section, choose to either reroute the user to another page on your site, or hide the form and display any text you’d like.

Human-Friendly Questions

We recommend asking basic, human-friendly questions as another layer of spam validation. These questions will insert themselves just before your submit button. If Hook doesn’t find a submit button, they'll insert after the last <fieldset> in your form. Otherwise, it will place them at the beginning of the form. This question will include class=“hf_select” so you can edit its styling as needed. Security questions are not required; to turn them off, select

– Do not ask questions –

Using Your Hook Form

Your created form generates a new <form> tag with the form’s Hook Form ID. It also sets this form’s method to 'post,' and sets the action to '#'. These are the most important parts of any Hook Form, and make it possible for the included script to work its magic.

Pasting as a Brand New Form

If your form is not built yet, simply copy all the generated code into your html file. From there, replace the example block with any form fields you would like, as you'd build any other form.*

You can also give the form a class, id, or any other attributes you would like without interfering.

*note: Hook–Forms BETA does not yet accept file uploads

Upgrading an Existing Form to a Hook Form

If you have the html created already, you can simply add the new data-hookform-id=, method= and post= attributes to that form. Then be sure to paste the generated <script> tag after your form. That's it!

Example:

Original Form
<form name="contactForm" id="contact-form" method="post" action="form_server.php"> 
<div>
<label for="name">Name</label>
<input type="text" name="name" maxlength="50" class="span12">

<label for="email">Email Address</label>
<input type="text" name="email" maxlength="80" class="span12">
<button type="submit" class="btn btn-inverse">Submit</button>

</div>
</form>
Hook Form
<form name="contactForm" id="contact-form" method="post" action="#" data-hookform-id="0123456-01234-01234-01234-0123456789"> 
<div>
<label for="name">Name</label>
<input type="text" name="name" maxlength="50" class="span12">

<label for="email">Email Address</label>
<input type="text" name="email" maxlength="80" class="span12">
<button type="submit" class="btn btn-inverse">Submit</button>

</div>
</form>
<script src="https://hookforms.com/api/v1/form.js"/>