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, wrap your form with the <snip-form> tag and add the key (or data-key) attribute for your form.

Lastly, 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 control the content, style and display of 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 or being submitted

Directive Parsers

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

Readability Format

The most readable format, also the most verbose.

Format: if-{field}-{state}-{option}="value"

<input if-your_name-error-class="error-class" />

Namespace Format

Concise and easy to read.

Format: {state}-{option}:{field}="value"

<input error-class:your_name="error-class" />

Shorthand Format

Format: {shorthandState}{field}:{option}="value"

<input !your_name:class="error-class" />
<input ~your_name:class="valid-class" />

Disabling a Parser Format

In some cases, you may need to disable one or more parsers to avoid conflicts:

<!-- 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 field names are used as variables in the SnipForm engine directive parser.

Caution

Though not recommended, you can use hyphens in your field names (e.g., first-name). However, you will not be able to use the Readability type directive with hyphenated names.