Full Example

Clone this

Full Name

Mobile

International format starting with +

How would you like to be contacted?

By Email be sure to check your spam

By Phone don't be scared of the unknown caller

By Telepathy you'll know it when you think it

Add your comment

Location

I accept the terms of service

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 class="mb-2" style="display:none">
            <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" error-class:full_name="!text-red-400" class="form-label">Full Name</label>
            <div class="relative">
                <input sf-validate:required="Please enter your name" error-class:full_name="!border-red-500" name="full_name" type="text" id="name" class="form-input" />
                <span error-show:full_name style="display:none" class="absolute right-2 top-2 text-red-500"><ErrorIcon /></span>
            </div>
            <p error-show-text:full_name class="form-error-text"></p>
        </div>
        <div class="mb-2">
            <label for="email" error-class:email="!text-red-400" class="form-label">Email</label>
            <div class="relative">
                <input sf-validate:email error-class:email="!border-red-500" type="email" name="email" id="email" class="form-input" placeholder="[email protected]" />
                <span error-show:email style="display:none" class="absolute right-2 top-2 text-red-500"><ErrorIcon /></span>
            </div>
            <p error-show-text:email class="form-error-text"></p>
        </div>
        <div class="mb-2">
            <label for="mobile" error-class:mobile="!text-red-400" class="form-label">Mobile</label>
            <div class="relative">
                <input sf-validate:starts_with[+]="Please use the intenational format starting with a +" error-class:mobile="!border-red-500" type="text" name="mobile" id="mobile" class="form-input" placeholder="+1xxxxxx" />
                <span error-show:mobile style="display:none" class="absolute right-2 top-2 text-red-500"><ErrorIcon /></span>
            </div>
            <p valid-show:mobile class="form-helper">International format starting with +</p>
            <p error-show-text:mobile class="form-error-text"></p>
        </div>
        <div class="mb-2">
            <fieldset class="space-y-5 mt-4">
                <legend error-class:contact="!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 error-show:contact style="display:none" class="flex items-center gap-1 mr-1 -mt-4">
                    <div class="text-red-400"><ErrorIcon /></div>
                    <div error-text:contact class="form-error-text"></div>
                </div>
            </fieldset>
        </div>
        <div class="mb-2">
            <label for="comment" error-class:comment="!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" error-class:comment="!border-red-500" rows="4" name="comment" id="comment" class="block form-input"></textarea>
                <span error-show:comment style="display:none" class="absolute right-2 top-2 text-red-500"><ErrorIcon /></span>
            </div>
            <p error-show-text:comment class="form-error-text"></p>
        </div>
        <div class="mb-2">
            <div>
                <label error-class:location="!text-red-400" for="location" class="form-label">Location</label>
                <div class="relative">
                    <select sf-validate:required error-class:location="!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 error-show:location style="display:none" class="absolute right-2 top-2 text-red-500"><ErrorIcon /></span>
                </div>
                <p error-show-text:location 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 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 error-show:accept_terms style="display:none" class="flex items-center gap-1 mr-1">
                <div class="text-red-400"><ErrorIcon /></div>
                <div error-text:accept_terms 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-result tags
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 valid-show:[field_name]
Return errors to an element using the directive error-show-text:[field_name]
Conditional classes for error error-class:[field_name]="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

Full Example

Form error

Thank you %full_name% for your submission!

Source Code:

On this form:

Documentation reference