Full Example

International format starting with +

How would you like to be contacted?
By Emailbe sure to check your spam
By Phonedon't be scared of the unknown caller
By Telepathyyou'll know it when you think it

Thank you %full_name% for your submission!

We will contact you by %contact%.

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:

Documentation reference