Walkthrough on formit

Support Extras
#1

I have seen the documentation but I am still having trouble understanding what I need to do. If anyone knows some helpful getting started documentation I would appreciate it. Thank you

#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=`you@yourdomain.com`
   &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
#3

So I copied and pasted the second chunk and used it on my page. I changed the email address but the form isn’t being sent to my email. Any suggestions? Sorry it has been a few years since I have studied this stuff.

#4

Have you set up your site for sending email? If not, here are the docs (I highly recommend using SMTP and not the PHP mail() function):

https://docs.modx.com/current/en/building-sites/sending-mail

If you have already set up email sending, that link also has troubleshooting help.

1 Like
Gmail addresses not working in formlt email field
#5

Do I have to pay for the SMTP service?

#6

Hi @leocubs89
You don’t need to if you use your own SMTP service (your web host may provide one).
Or you could use a commercial one that provides a free tier - usually under a certain amount of usage. e.g. MailGun, SendGrid, Postmark, SES etc.

1 Like