Full Example (Shorthand)
Source Code:
<snip-form key="YOUR_KEY" mode="live">
<!-- Your normal form -->
<form class="relative">
<div loading:show class="absolute left-0 top-0 w-full dark:bg-black bg-white bg-opacity-75 dark:bg-opacity-25 z-10 h-full rounded-md">
<div class="flex justify-center h-full">
<div class="flex flex-col justify-center items-center">
<div class="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-500"></div>
</div>
</div>
</div>
<div if-error-show style="display:none" class="mb-2">
<div class="text-center bg-sky-500 text-center rounded-full p-4 relative overflow-hidden h-20 shadow dark:shadow-inner">
<div class="absolute left-0 top-0 text-sky-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-20 h-20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg>
</div>
<h4 class="!text-sky-100">Form error</h4>
<p class="text-sky-300">Please fix the errors below</p>
</div>
</div>
<div class="mb-2">
<label for="name" !full_name:class="!text-red-400" class="form-label">Full Name</label>
<div class="relative">
<input sf-validate:required="Please enter your name" !full_name:class="!border-red-500" name="full_name" type="text" id="name" class="form-input" />
<span !full_name:show style="display:none" class="absolute right-2 top-2 text-red-500"><ErrorIcon /></span>
</div>
<p !full_name:show-text class="form-error-text"></p>
</div>
<div class="mb-2">
<label for="email" !email:class="!text-red-400" class="form-label">Email</label>
<div class="relative">
<input sf-validate:email !email:class="!border-red-500" type="email" name="email" id="email" class="form-input" placeholder="[email protected]" />
<span !email:show style="display:none" class="absolute right-2 top-2 text-red-500"><ErrorIcon /></span>
</div>
<p !email:show-text class="form-error-text"></p>
</div>
<div class="mb-2">
<label for="mobile" !mobile:class="!text-red-400" class="form-label">Mobile</label>
<div class="relative">
<input sf-validate:starts_with[+]="Please use the intenational format starting with a +" !mobile:class="!border-red-500" type="text" name="mobile" id="mobile" class="form-input" placeholder="+1xxxxxx" />
<span !mobile:show style="display:none" class="absolute right-2 top-2 text-red-500"><ErrorIcon /></span>
</div>
<p ~mobile:show class="form-helper">International format starting with +</p>
<p !mobile:show-text class="form-error-text"></p>
</div>
<div class="mb-2">
<fieldset class="space-y-5 mt-4">
<legend !contact:class="!text-red-400" class="form-label -mb-4">How would you like to be contacted?</legend>
<div class="relative flex items-start">
<div class="flex h-5 items-center">
<input sf-validate:required="Please select at least one option" id="contact-email" aria-describedby="comments-description" name="contact" value="email" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500" />
</div>
<div class="ml-3 text-sm">
<label for="contact-email" class="font-medium text-gray-700">By Email</label>
<span id="contact-email-description" class="text-gray-500"><span class="sr-only">By Email</span>be sure to check your spam</span>
</div>
</div>
<div class="relative flex items-start">
<div class="flex h-5 items-center">
<input id="contact-phone" aria-describedby="candidates-description" name="contact" value="phone" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500" />
</div>
<div class="ml-3 text-sm">
<label for="contact-phone" class="font-medium text-gray-700">By Phone</label>
<span id="contact-phone-description" class="text-gray-500"><span class="sr-only">By Phone</span>don't be scared of the unknown caller</span>
</div>
</div>
<div class="relative flex items-start">
<div class="flex h-5 items-center">
<input id="contact-telepathy" aria-describedby="offers-description" name="contact" value="telepathy" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500" />
</div>
<div class="ml-3 text-sm">
<label for="contact-telepathy" class="font-medium text-gray-700">By Telepathy</label>
<span id="contact-telepathy-description" class="text-gray-500"><span class="sr-only">By Telepathy</span>you'll know it when you think it</span>
</div>
</div>
<div !contact:show style="display:none" class="flex items-center gap-1 mr-1 -mt-4">
<div class="text-red-400"><ErrorIcon /></div>
<div !contact:text class="form-error-text"></div>
</div>
</fieldset>
</div>
<div class="mb-2">
<label for="comment" !comment:class="!text-red-400" class="form-label">Add your comment</label>
<div class="mt-1 relative">
<textarea sf-validate:required sf-validate:min_length[10]="Message is too short" !comment:class="!border-red-500" rows="4" name="comment" id="comment" class="block form-input"></textarea>
<span !comment:show style="display:none" class="absolute right-2 top-2 text-red-500"><ErrorIcon /></span>
</div>
<p !comment:show-text class="form-error-text"></p>
</div>
<div class="mb-2">
<div>
<label !location:class="!text-red-400" for="location" class="form-label">Location</label>
<div class="relative">
<select sf-validate:required !location:class="!border-red-500" id="location" name="location" class="form-input">
<option value="">-- please select --</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="MX">Mexico</option>
</select>
<span !location:show style="display:none" class="absolute right-2 top-2 text-red-500"><ErrorIcon /></span>
</div>
<p !location:show-text class="form-error-text"></p>
</div>
</div>
<div class="mb-2 mt-2">
<div class="flex gap-2 items-center">
<label class="form-label" for="accept_terms">I accept the the Terms of Service</label>
<input sf-validate:accepted="Please accept to continue" type="checkbox" name="accept_terms" id="accept_terms" value="yes" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 mt-4" />
</div>
<div !accept_terms:show style="display:none" class="flex items-center gap-1 mr-1">
<div class="text-red-400"><ErrorIcon /></div>
<div !accept_terms:show-text class="form-error-text"></div>
</div>
</div>
<div class="flex justify-end">
<button type="submit" submit:class="!bg-orange-500" submit:text="One moment..." class="form-button">Submit</button>
</div>
</form>
<!-- /Your normal form -->
<sf-result style="display:none">
<div class="text-center relative">
<div class="absolute right-1 -top-4 text-primary-500 text-opacity-25">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-32 h-32">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
</svg>
</div>
<h2 class="text-2xl font-bold">Thank you %full_name% for your submission!</h2>
<p class="text-lg">We will contact you by %contact%.</p>
</div>
</sf-result>
</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:
- Create your own HTML result content within
sf-resulttags - Add form variables in the content using
%field_name%- if the field value is empty then it will not show -
Note: It's best practice to hide state content (like results) whist the engine loads with
style="display:none" - Add validation to form element using
sf-validate:[type] - If there are no errors, unhide element using
~[field_name]:show - Return errors to an element using the directive
![field_name]:show-text - Conditional classes for error
![field_name]:class="error-class" - Unhides element during loading AND submit state
loading:show - Unhides element during submit state only
submit:show - Apply a class during submit state only
submit:class