Docs
SnipForm.ioLogin

SnipForm

Directive-driven forms (DDF)

  1. Wrap your form in <snip-form> tags for an instant secure form backend
  2. Use SnipForm's directives (attributes) to add validation and handle your form's state (ex errors).

Get your key
your-page.html
<snip-form key="YOUR_KEY">
    <form>  
        <label for="fname">First name:</label> 
        <input type="text" id="fname" name="fname"> 
        <label for="lname">Last name:</label> 
        <input type="text" id="lname" name="lname">
        <button type="submit">Submit</button>
    </form>
</snip-form>

SnipForm Wrap

Up and running

Quick start

  1. Register or Sign in and create a new form.

  2. Get your form's key

  3. Wrap your form: 

    <snip-form key="YOUR_KEY">
    <form>
        <input type="text" name="name" />
        <input type="email" name="email" />
        <input type="submit" value="Submit" />
    </form>
</snip-form>

  4. Add the SnipForm Javascript (only ~65 KiB) at the bottom of your page, just above the closing </body> tag: 

         <script src="https://cdn.snipform.io/wrap/sf.iife.js" defer></script>
 </body>

Your form now has a secure, spam protected backend. All submits will be captured on your account and emailed to you.

But that's just the beginning! Improve your form's experience and data quality with SnipForm's built in directives:

Field Validators

Leverage over 30 field validators with a simple directive

Error display states

Improve your form's UX with easy to use error state directives.

Result content

Build your result page's HTML directly in your form. No need to redirect to a special thank-you page

Loading/Submit states

Further improve your forms experience with loading and submit state directives.

Getting help

We're here to help. If you have any questions, please submit a ticket on your account and we'll get back to you as soon as possible.

Next
Terms and concepts