Testing

Use test mode to debug your forms without submitting real data. Test validation, error states, submit states, and success content.

Enable Test Mode

Add mode="test" to your <snip-form>:

<snip-form key="YOUR_KEY" mode="test">
    <form>
        ...
    </form>
</snip-form>

Caution

Test mode does not submit data. Remove mode="test" before going live.

---

Test Suite Features

When test mode is enabled, a debug panel appears with controls to:

Data Debug

See form data in real-time as users type. Useful for verifying field names and values.

Test Error States

Toggle validation errors to see how your error UI looks and behaves.

Test Submit States

Simulate the submission state to verify loading indicators, disabled buttons, and submit feedback.

Test Success Content

Preview your <sf-success> content with form data populated.

---

Development Workflow

1. Build your form with validation rules
2. Add mode="test" to the snip-form tag
3. Test each state using the debug panel:
   • Fill fields and verify data parsing
   • Toggle error states and check error messages display correctly
   • Toggle submit state and verify loading UI
   • Toggle success to preview the success message
4. Remove mode="test" before deploying

---

Example

<snip-form key="YOUR_KEY" mode="test">
    <form>
        <div>
            <input name="email"
                sf-validate:required
                sf-validate:email
                if-error="email" error-class="border-red-500" />
            <p if-error="email" then-show then-text style="display:none"></p>
        </div>

        <button type="submit" on-submit-text="Sending...">
            Submit
        </button>
    </form>

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

With test mode enabled, you can:

• Type an invalid email and see the error class and message
• Toggle submit state to see “Sending…” button text
• Toggle success to see the thank you message with your email

---

Local Development

Test mode works without a valid key during local development. This lets you build and style forms before connecting to SnipForm.

<!-- Works locally for styling/testing -->
<snip-form key="test" mode="test">
    ...
</snip-form>