← Back to Examples

Full Example

A comprehensive example combining all features: validation, states, and custom results.

Live Demo

International format starting with +

How would you like to be contacted?

Thank you %full_name% for your submission!

We will contact you by %contact%.

Source Code

On this form

  • • Create custom HTML result content within sf-result tags
  • • Add form variables using %field_name% - empty values won't show
  • • Add validation using sf-validate:[type]
  • • Unhide element if no errors with valid-show:[field_name]
  • • Return errors using error-show-text:[field_name]
  • • Conditional error classes with error-class:[field_name]="class"
  • • Unhide during loading/submit with loading:show
  • • Unhide during submit only with submit:show
  • • Apply class during submit with submit:class

Best Practice: Hide state content while the engine loads with style="display:none"

Documentation Reference