Terms and concepts
This section is a map of SnipForm's moving parts as well as some key limitations and considerations.
To mount the SnipForm engine, you simply need to wrap your form with the
<snip-form> tag and add the
data-key) attribute for your form.
<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.
There are three ways you can apply directives to your form elements:
This is the most readable format. It is also the most verbose.
This format is concise and easy to read.
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
<!--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.
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.