SnipForm - Result content

An important part of the form is the result content. This is the content that is shown when the form is submitted successfully. This content can be anything you want.

Basic usage

You can build your own html for the result content. Then wrap sf-result tags around to target the result content. This content will replace the form when the form is submitted successfully.

<sf-result>

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

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

Tip!

You can (and should) use the style="display: none" to hide the result content whilst the page is loading.

Display variables

More often than not, you will want to display the data that was submitted in the result content. You can do this by adding %{field_name}% directly into the result content.

<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>

If fields are missing

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

Use SnipForm's WYSIWYG editor

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

You can do this by logging into your SnipForm account and clicking on the 'builder' button on the form you want to edit.

You can also add the %{field_name}% directly into the WYSIWYG editor.