Result Content

An important part of the form is the result content. This is the content shown when the form is submitted successfully.

Basic Usage

Build your own HTML for the result content and wrap it with <sf-result> tags. This content will replace the form when submitted successfully.

The sf-result Tag

The <sf-result> needs to be a direct sibling of your <form> tag.

<form>
    ...
</form>
<sf-result style="display: none">
    <h1>Thank you!</h1>
    <p>Your form has been submitted successfully.</p>
</sf-result>

Note

Use style="display: none" to hide the result content while the page is loading.

---

Display Variables

You can display the submitted data in the result content using %{field_name}%:

<sf-result style="display: none">
    <h1>Thank you %first_name%!</h1>
    <p>Your form has been submitted successfully.</p>
    <p>We'll contact you via %email% soon.</p>
</sf-result>

Note

If any fields are not filled in or did not exist, the %{field_name}% will be replaced with an empty string.

---

WYSIWYG Editor

You can also use SnipForm’s WYSIWYG editor to build your result content in your form’s ‘builder’ on SnipForm’s backend.

1. Log into your SnipForm account
2. Click on the ‘builder’ button on the form you want to edit
3. Add %{field_name}% directly in the WYSIWYG editor