Walkthrough on formit

Support Extras
2

In short, you have to add a call to the FormIt snippet and a normal HTML form to your page.

Here is a basic example: (This form actually does nothing at all.)

[[!FormIt?
   &hooks=``
   &validate=`myfield:required`
   &successMessage=`Successfully sent!`
]]

[[!+fi.successMessage]]
[[!+fi.validation_error_message]]

<form id="myform" action="[[~[[*id]]]]" method="post">   
   <div>
       [[!+fi.error.myfield]]
       <label for="myfield">my Field</label>
       <input type="text" name="myfield" value="[[!+fi.myfield]]">
   </div>
   <input type="submit" value="Send">
</form>
  • When you click the “Send” button, the form data is sent to the same page action="[[~[[*id]]]]"
  • The FormIt snippet gets executed
    1. The snippet checks if a form has been sent (is $_POST empty?)
    2. The snippet validates the sent data (is “myfield” not empty? &validate=`myfield:required`)
    3. If the validation is successful, the hooks specified in the property &hooks are executed.
    4. If all hooks are successfully executed, the placeholder [[!+fi.successMessage]] is filled with the defined success message (&successMessage).
  • If the form validation fails, the placeholder for the general validation error message [[!+fi.validation_error_message]] is filled, as well as the placeholder for the specific field error message [[!+fi.error.myfield]].

An example of a more useful form, that sends an email and redirects:

[[!FormIt?
   &hooks=`email,redirect`
   &validate=`myfield:required`
   &redirectTo=`1`
   &emailTpl=`myEmailTemplate`
   &emailSubject=`Test Mail`
   &emailTo=`[email protected]`
   &emailHtml=`0`
   &submitVar=`mySubmit`
]]

<form id="myform" action="[[~[[*id]]]]" method="post">   
   <div>
       [[!+fi.error.myfield]]
       <label for="myfield">my Field</label>
       <input type="text" name="myfield" value="[[!+fi.myfield]]">
   </div>
   <input type="submit" name="mySubmit" value="Send">
</form>
  • &hooks=`email,redirect` → After validation, FormIt first sends an email, then redirects to another page (if the email was sent successfully).
  • &redirectTo → the page to redirect to. Used by the redirect hook
  • &emailTpl, &emailSubject, &emailTo, etc. → different properties for the email hook. (In the chunk “myEmailTemplate” you can use placeholders like [[+myfield]] for the form field values.)
  • &submitVar → must correspond to the “name” attribute of the “Send” button, if there are multiple forms on the page.
1 Like