Installation

Generate your snippet

To get Howdy onto your web form, you'll first need to generate your own code snippet. Using only your email address, we'll create you your own, unique code snippet; just like if you were installing Google Analytics.

Paste it in your HTML file

When you've got your code snippet, paste it into the same HTML file as your form; it doesn't matter where, as long as it's in the same file. With the snippet in place, when the page is loaded Howdy will fire up, detect any forms on the page and mark handle submissions from them automatically.

The first time you submit your form with Howdy installed, we'll send you a confirmation email with a link to click. This is just to verify that you have access to the email inbox you're trying to make submissions to. After that you should see further submissions appear in your inbox.

Top Tip

Your Howdy account is associated with the email address you originally used to generate your snippet with. This is where we'll contact you with any account changes or payment invoices.

Using a new email address

If you want to have your submissions go to a different email address from the one associated with your account, there's no need to generate a new snippet. Instead, simply adjust the data-howdy-recipient attribute on your existing snippet code. The first time you attempt to submit a form using new email we'll send you a confirmation email with a link to click. This is just to verify that you have access to the email inbox you're trying to make submissions to.

Below is an example of what your snippet might look like with an adjusted data-howdy-recipient attribute:

<script async src="https://static.howdyform.com/howdyClient.js?token=y0urT0k3n" data-howdy-recipient="[email protected]"></script>

With a standard Howdy account, you can send submissions to an unlimited number of different email addresses so you can change this as often as you want. However, remember you're limited to 25 forms before you'll be asked to move to an enterprise account.

Validation

Automatic validations

Howdy will automatically detect inputs with common names such as telephone and email and apply appropriate validations to them. Below is a full list of automatically validated name inputs:

  • name
  • first_name
  • last_name
  • firstName
  • lastName
  • subject
  • topic
  • about
  • body
  • message
  • address
  • postcode
  • post_code
  • postCode
  • zipcode
  • zip_code
  • zipCode
  • tel
  • telephone
  • mobile
  • mob
  • age
  • dob
  • date_of_birth
  • dateOfBirth

For example, the following form input would be automatically validated as a phone number:

<input type="text" name="telephone" />

If you want to remove the default validation on an input, you can set a custom validation of type none. If you want to override the default validation on an input, you can set a custom validation of some other type. See the Custom validations section of this document for more information on using custom validations.

Error messages on erroneous inputs are inserted directly after the input and given a HTML class of .erroneous for you to style appropriately. Error messages are cleared next time the input is focussed.

Custom validations

Howdy also supports adding your own custom validations to inputs. This can be done by adding a data-howdy-validate attribute to an input with one of the following possible validation values:

Attribute value Description
none Stops Howdy validating on this field at all.
required Ensures that the form won't submit without a valid value.
email Validates against an email address
number Validates against a numerical value
date Validates against an date
tel Validates against a telephone number

For example, if you wanted to ensure an input was filled in, you could do this:

<input type="text" name="favouritePet" data-howdy-validate="required" />

Custom error messages

The default error messages Howdy uses can be overridden by defining a data-howdy-error-message attribute on an input. For example, with the following input:

<input type="text" name="favouritePet" data-howdy-validate="required" data-howdy-error-message="Please enter a favourite pet!" />

If the user puts nothing in this input and attempts to submit the form, they will see the custom "Please enter a favourite pet!" error message, rather than the default "Must be provided" message.

Adding new validations

JavaScript knowledge required!

Adding new validations on your page requires a bit of JavaScript knowledge. If you're struggling with this and need help, contact us.

If your validation requirements are more complex, Howdy allows you to add completely new validation functions with just a little bit of JavaScript knowledge. You can do this using the window.Howdy.customValidations object. For example, to add a new validation that ensured a value was a palindrome, we might do something like this:

<script>
 window.Howdy = {
   customValidations: {
     palindrome: function(input) {
       if (input.value.split('').reverse().join('') !== input.value) {
         return 'Value must be a palindrome';
       }
     }
   }
 }
</script>
then on our input do:
<input type="text" name="myFavouritePalindrome" data-howdy-validate="palindrome" />

Now, when the page is loaded, Howdy will see that a palindrome custom validation has been added, and will validate any inputs with a data-howdy-validate="palindrome" attribute to ensure they are indeed palindromes.

Note: All custom validation functions take a DOM element as an argument, and must return undefined if the input is valid, or a string error message if there's a problem with the input.

Error message styling

Error messages on erroneous inputs are inserted directly after the input and given a HTML class of .erroneous for you to style appropriately. Error messages are cleared next time the input is focussed.

Supported input types

Howdy supports all HTML input types, with the exception of file uploads (though we're working on it). Any HTML input type that has a name property, Howdy should successfully be able to validate and retrieve a sensible value from for the submission messages delivered to your email inbox.

Input type Supported
button Yes
checkbox Yes
color Yes
date Yes
datetime-local Yes
email Yes
file No
hidden Yes
image Yes
month Yes
number Yes
password Yes
radio Yes
range Yes
reset Yes
search Yes
submit Yes
tel Yes
text Yes
time Yes
url Yes
week Yes

Still unsure?

If you're stuck, or notice something not behaving as expected, please don't hesitate to get in touch.