Building with AI?
llms.txt
← Back to Examples

Custom Success Content

Display custom success content with field variable interpolation using <sf-success>.

Live Demo

Fill out the form and submit to see the custom success message with your data.

🎉

Thank you %full_name%!

We will get back to you at %email% as soon as possible.

%company%

Source Code

How It Works

  • 1.
    Add <sf-success> inside <snip-form>

    Place it after the <form> tag. The form will be replaced with this content on success.

  • 2.
    Use %field_name% for variable interpolation

    Field values from the submitted form are inserted. Empty values render nothing.

  • 3.
    Hide with style="display:none"

    Prevents the success content from flashing before the form engine loads.

Pro tip: You can use any HTML in <sf-success> - images, links, buttons, even another form!

Variable Interpolation

Use the %field_name% syntax to insert submitted values:

<sf-success>
Thank you %full_name%!
We'll email %email% soon.
</sf-success>
  • • Variables match form field name attributes
  • • Empty or missing fields render nothing (no placeholder text)
  • • Checkbox groups with multiple values render as comma-separated list

Documentation Reference