InputGuard integration

InputGuard integration is really easy:

Step 1 - Client Side

Integrate the InputGuard UI in your web form.

a) Load the InputGuard script

<head>
  ...
  <script src="https://input.zenofx.com/inputguard.js"></script>
</head>

b) Use a placeholder within your web form

<form action="...">
  ...
  <div id="inputguard-placeholder"></div>
  <input type="submit" class="inputguard-submit-button my-style" disabled>
</form>

If your “Submit” button is of class inputguard-submit-button and is disabled, InputGuard enables the button after computing the signature. This is completely optional.

Step 2 - Server Side

Verify the InputGuard signature from your web server. For this, simply query https://guard.zenofx.com/verify with the form’s signature value as a GET or POST parameter. Possible return status codes are:

  • 200 (OK): Verification successful.
  • 404 (Forbidden): Verification failed. In this case, your site should display an error message for the user.
  • 429 (Too many requests): Rate limit of free version reached. Your site may also display an error message.
  • 402 (Payment required): InputGuard Pro or Enterprise license expired. Your server should not treat this as a user error. Instead, a message to the administrator may be sent.

Example for Python:

import requests
...
fields = formdata.keys()
signature = ""
for field in fields:
    value = formdata.getvalue(field, "")
    if field == "...":
    ...
    elif field == "signature":
        signature = value

# InputGuard
r = requests.get("https://guard.zenofx.com/verify?signature=" + signature)
if r.status_code == 402:
    # Log/send message to admin
elif r.status_code != 200:
    # Display error message
    print("Error verifying InputGuard signature, please try again later.")

Migrate to Pro Version

When migrating to InputGuard Pro, simply change

<script src="https://input.zenofx.com/inputguard.js"></script>

to

<script src="https://input.zenofx.com/inputguard-pro.js"></script>

All other code may remain unchanged. After migration, your server will receive 402 Payment required responses until InputGuard Pro is licensed for your site.

I18n

The Pro version has additional I18n options. You may use

  • inputguard-pro-de.js for German :de: translation
  • inputguard-pro-es.js for Spanish :es: translation
  • inputguard-pro-fr.js for French :fr: translation
  • inputguard-pro-it.js for Italian :it: translation

Style

The Pro version also allows custom colors. Simply style our pseudo element inputguard-style as follows:

<style>
  #inputguard-style {
    /* Background color for InputGuard elements, e.g. button background */
    background-color: #a00;
    /* Foreround color for InputGuard elements, e.g. button text */
    color: #ccc;
  }
</style>

Eventing

The Pro version also uses custom events to allow your site to react on InputGuard status. The following events are supported:

  • inputguard-checked: Sent after computing the signature, useful e.g. for enabling your “Send” button
  • inputguard-error: Sent if something went wrong, useful for displaying an error message. Contains detail message in field detail.

Example for using eventing (in your own onload function):

const placeholder = document.getElementById("inputguard-placeholder");
placeholder.addEventListener("inputguard-checked", e => {
  document.getElementById("submit-button").disabled = false; 
  document.getElementById("error-container").innerHTML = '';
});
placeholder.addEventListener("inputguard-error",
  e => document.getElementById("error-container").innerHTML = e.detail );