Terms and concepts

This section is a map of SnipForm's moving parts as well as some key limitations and considerations.

SnipForm Engine

The SnipForm engine is a tiny Javascript library (~65kb) that runs on your website. It is responsible for capturing form submissions and sending them to your SnipForm account. It also handles the display of error states and result content.

To mount the SnipForm engine, you simply need to wrap your form with the <snip-form> tag and add the key (or data-key) attribute for your form.

Lastly, you'll need to add the SnipForm Javascript at the bottom of your page, just above the closing </body> tag.

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

Directives and state

SnipForm directives are special attributes assigned to HTML elements within your form.

They are used to control the content, style and display of the elements based on the state of the form.

There are 3 states that SnipForm directives can be applied to:

• Error state : Logic applied when the form is submitted and there are errors.
• Valid state : Logic applied to specific fields when no errors are present.
• Loading/Submit state : Logic applied when the form is loading (initializing) or being submitted pending a response from the server.

Directive parsers

There are three ways you can apply directives to your form elements:

Readability format

This is the most readable format. It is also the most verbose.

Format: if-{field}-{state}-{option}="value"
Ex: if-your_name-error-class="error-class"

Namespace format

This format is concise and easy to read.

Format: {state}-{option}:{field}="value"
Ex: error-class:your_name="error-class"

Shorthand format

Format: {shorthandState}{field}:{option}="value"
Ex: !your_name:class="error-class"
Ex: ~your_name:class="valid-class"

Disabling a parser format

In some cases, you may need to disable one or more (not all obviously) of the parsers to avoid conflicts. To do so, simply add the appropriate attribute to the <snip-form> tag.

<!--Disabling Readability format -->
<snip-form readability="false"></snip-form>

<!--Disabling Namespace format -->
<snip-form namespace="false"></snip-form>

<!--Disabling Shorthand format -->
<snip-form shorthand="false"></snip-form>

Special display elements

The SnipForm engine comes with a special element that can be used to display content based on the state of the form.

<sf-result> : This element acts as a section that replaces the form once the form has been successfully submitted. Read more

Field name limitations

Field names should be underscored.

For example, first_name is valid, but first name is not. This is because the field names are used as variables in the SnipForm engine and having spaces will break the error and valid state directives.

Though not recommended, if you must then you can use hyphens in your field names ex first-name. However, there will be limitations on how you can use them in the error and valid state directives. You will not be able to use the Readability type directive.