Success Content

Show a success message after the form submits successfully. The <sf-success> element replaces the form with your custom content.

Basic Usage

Add <sf-success> as a sibling to your <form>:

<snip-form key="YOUR_KEY">
    <form>
        <input name="email" sf-validate:required sf-validate:email />
        <button type="submit">Subscribe</button>
    </form>

    <sf-success style="display:none">
        <h2>Thanks for subscribing!</h2>
        <p>Check your inbox for confirmation.</p>
    </sf-success>
</snip-form>

Note

Use style="display:none" to hide the success content until submission completes.

---

Display Form Data

Use %fieldname% to inject submitted values:

<sf-success style="display:none">
    <h2>Thanks, %name%!</h2>
    <p>We'll contact you at %email%.</p>
</sf-success>

If a field is empty or doesn’t exist, the placeholder is replaced with an empty string.

Example with Multiple Fields

<snip-form key="YOUR_KEY">
    <form>
        <input name="first_name" placeholder="First name" />
        <input name="last_name" placeholder="Last name" />
        <input name="email" type="email" placeholder="Email" />
        <input name="company" placeholder="Company (optional)" />
        <button type="submit">Get Demo</button>
    </form>

    <sf-success style="display:none">
        <h2>Hi %first_name%!</h2>
        <p>We've received your demo request.</p>
        <p>We'll reach out to %email% within 24 hours.</p>
    </sf-success>
</snip-form>

---

Run Scripts on Success

Use <sf-success-script> to execute JavaScript after successful submission:

<sf-success style="display:none">
    <h2>Thank you!</h2>

    <sf-success-script>
        // Fire a custom Signal event
        SnipForm.signal('newsletter_signup', {
            source: 'footer_form'
        });
    </sf-success-script>
</sf-success>

Note

Scripts inside <sf-success-script> run automatically when the success content is shown. Use this for Signals events, redirects, or other post-submission logic.

Redirect After Submission

<sf-success style="display:none">
    <p>Redirecting...</p>

    <sf-success-script>
        window.location.href = '/thank-you';
    </sf-success-script>
</sf-success>

---

Styled Success Content

<sf-success style="display:none">
    <div class="text-center py-12">
        <div class="text-green-500 text-5xl mb-4">✓</div>
        <h2 class="text-2xl font-bold mb-2">Message Sent!</h2>
        <p class="text-gray-600">Thanks %name%, we'll be in touch soon.</p>
        <a href="/" class="mt-6 inline-block text-blue-500 hover:underline">
            Back to Home
        </a>
    </div>
</sf-success>

---

Multiple Forms on a Page

Each <snip-form> has its own <sf-success>:

<!-- Newsletter form -->
<snip-form key="KEY_1">
    <form>
        <input name="email" />
        <button type="submit">Subscribe</button>
    </form>
    <sf-success style="display:none">
        <p>Subscribed!</p>
    </sf-success>
</snip-form>

<!-- Contact form -->
<snip-form key="KEY_2">
    <form>
        <input name="email" />
        <textarea name="message"></textarea>
        <button type="submit">Send</button>
    </form>
    <sf-success style="display:none">
        <p>Message sent!</p>
    </sf-success>
</snip-form>

Each form operates independently.