Adding a contact form to your ModX website
published on
One thing that most websites require is some kind of form to allow visitors to send messages to the website owner.
This is something that ModX can do very easily by downloading a simple 'extra' called FormIt. This is completely free and is not difficult to set up.
Installing FormIt
The first thing to do, once you are logged in to your ModX administrator panel, is to hover over 'Extras' on the left panel and select 'Installer'. Now click on'Download Extras', search for 'FormIt' if necessary and select it once you find it.
Once you have found FormIt you should click on 'Download'. Once it has finished downloading click on 'Back to Package Management' and find the install button under the FormIt package name.
Setting up a FormIt contact form
You should already have a form that you have created using HTML and CSS. This form obviously won't do anything just yet but that is what we are going to set up below.
At the top of the chunk or other resource that you have saved your form into add the following:
[[!FormIt? &hooks=`email,redirect` &emailTpl=`EmailChunk` &emailTo=`email_to_address` &emailFrom=`email_from_address` &emailReplyTo=`[[+reply]]` &emailSubject=`[[+name]] has contacted you at website_name` &redirectTo=`2` &validate=`spam:blank, name:required, reply:email:required, message:required`]]
The hooks line tells Modx to first email you the message your visitor has entered and then redirect to another web page. The redirectTo line gives the number of the resource that you wish to redirect to.
emailTpl should be set to the name of a chunk that contains the template you wish to use for any emails that ModX sends. We will see more on this below.
emailTo and emailFrom are the addresses that any email should be sent to or from respectively. emailReplyTo should be left as is and will add the address of the person sending the message so that you can simply click Reply in order to respond to your visitor.
emailSubject is obviously the subject of the email. website_name is just a placeholder for the name of your own website. This can be changed or even left out to suit.
The validate lines tell ModX which fields are available, whether they must not be empty etc. These fields must appear somewhere in your form.
The example above shows that there is a name field in your form which cannot be empty, a reply field which also cannot be empty and should contain an email address and a message field which also cannot be left empty. These field names will change to match the fields in your form.
There is also a field called spam. This should be a special hidden field in your form. This field must be left blank. The reason for this field is that bots tend to fill in all fields whereas a real person wouild only fill in the ones they see. FormIt will only process the form if the spam field has been left blank. It is a basic form of spam protection.
Any field mentioned above that starts with [[+ and ends with ]] will be replaced by whatever the visitor entered into that field.
Update the form method
Find the <form method... code in your form and make sure it reads like <form method="post" action="[[~[[*id]]]]">. The action part makes sure the form refers to itself. This will mean that the FormIt call will be used to process the form.
The email template chunk
Earlier we mentioned the emailTpl instruction above which gives the name of a chunk which contains a HTML template for the email that will be sent out.
Make sure to create a new chunk and give it the same name that is in the emailTpl instruction above.
An example that you can use is as follows but this can be altered to meet your own needs.
<h1 align="center">You have received a message from</h1><h1 align="center">your website</h1><br />[[+name]] ([[+reply]]) wrote: <br />[[+message]]
This is a very simple template which will tell you that there is a new message from your website. It will then give you the name of the person filling in the form along with their email address in brackets. On a new line you will then receive the message they entered.
Conclusion
After setting up the form make sure to visit the ModX settings, search for SMTP and add the necessary settings for your chosen email provider.
You should now be able to test your new form and, if you've followed along, everything should work as expected.