The Basics
Source Code:
<snip-form key="YOUR_KEY">
<!-- Your normal form -->
<form>
<div class="mb-2">
<label for="name" class="form-label">Full Name</label>
<input sf-validate:required="Please enter your name" type="text" name="full_name" id="name" class="form-input" />
<p error-show-text:full_name class="form-error-text"></p>
</div>
<div class="mb-2">
<label for="email" class="form-label">Email</label>
<input sf-validate:email type="email" name="email" id="email" class="form-input" placeholder="[email protected]" />
<p error-show-text:email class="form-error-text"></p>
</div>
<div class="flex justify-end">
<button type="submit" class="form-button">Submit</button>
</div>
</form>
<!-- /Your normal form -->
</snip-form>
<!-- This should usually go at the bottom of your page -->
<script src="https://cdn.snipform.io/wrap/sf.iife.js" defer></script>On this form:
- Add validation to form element using
sf-validate:[type] - Return errors to an element using the directive
error-show-text:[field_name] - This directive has two actions:
show- Unhide this element if 'field' had an errortext- Inject the error's text into the element-
It could also be written as two separate directives:
error-show:[field_name]error-text:[field_name]