← Back to Examples

Shorthand Syntax

Use compact directive syntax with ! (error) and ~ (valid) prefixes.

Shorthand Reference

Shorthand Full Directive
![field]:show error-show:[field]
![field]:text error-text:[field]
![field]:show-text error-show-text:[field]
![field]:class="cls" error-class:[field]="cls"
~[field]:show valid-show:[field]

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%
  • • Add validation using sf-validate:[type]
  • • Unhide if no errors with ~[field]:show
  • • Show errors using ![field]:show-text
  • • Conditional error classes with ![field]:class="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