Total Customization

Processing software should never limit your ability to easily customize your users' experiences. We want Hook Forms to be completely your own, and we don't approve of restrictive iFrames or !important inline CSS some of the other guys use.

When a Hook Form returns any message or inserts a field, you'll see very basic html with a single class on the main element. With that, you can set any CSS or JavaScript rules you'd like.

Human-Friendly Questions

Hook Forms human-friendly questions are inserted as <select> inputs with the class hf_select. Left to their own devices, they will simply inherit your form's style:

If, for example, the rest of your labels & inputs are stacked and the hf_select is inline, you can use CSS like this to make them the same:

.my-form .hf_select label { 
display: block;
width: 100%;
}

resulting in:

You can do virtually anything.

Error Messaging

If a user's submission appears to be spam for any reason, she will see this type of message:

Sorry, but we couldn't deliver your submission. Please fix these issues and try again:

  • Your answer to the human-friendly question was incorrect.
  • There are too many empty fields.

This messaging is simply a <div> with the class hookform_errors. Inside that div is a paragraph tag, then an unordered list of issues.

<div class="hookform_errors"> 
<p>Sorry, but we couldn't deliver your submission. Please fix these issues and try again:</p>
<ul style="margin-top:0;margin-bottom:0;">
<li>Your answer to the human-friendly question was incorrect.</li>
<li>There are too many empty fields.</li>
</ul>
</div>

This is another fully customizable piece of Hook Forms. As an example, here are a few quick CSS rules you can add to customize the look of your form messaging.

.form .hookform_errors { 
margin-bottom: 30px;
padding: 0;
border: 1px solid #CD5464;
border-radius: 5px;
}
.form .hookform_errors p {
background-color: #CD5464;
padding:15px;
color:#fff;
}
.form .hookform_errors > ul {
list-style-type: circle;
margin:0 0 0 15px;
padding:2px 0 7px 15px;
}
.form .hookform_errors ul > li {
color:#CD5464;
margin:5px 0;
padding:0;
}

resulting in:

Sorry, but we couldn't deliver your submission. Please fix these issues and try again:

  • Your answer to the human-friendly question was incorrect.
  • There are too many empty fields.

Success Messaging

Users will see this if you set your form to show a message after a successful submission. Alternatively, you can reroute users to a page upon success and this will not apply.

Success messaging through Hook Forms works very similarly to error messaging, but the hookform_success class is placed on the form itself. To customize the look of this text, simply target .my-form-class.hookform_success, or #my-form-id.hookform_success

#my-form-id.hookform_success { 
...
}