For this example we're creating a feedback form where web site users can send feedback to three different departments or email addresses. This is achieved trough the subject selectbox which will be used by eForm to select the correct email address. All fields will be required and to avoid any spamming by automated submit scripts were also adding a CAPTCHA field. When users succesfully have submitted the form they will be presented with a thank you message which includes a copy of what the user submitted.
To achieve this we firstly need to create the following 'templates' either as chunks or in (unplished) MODx documents.
And offcourse we need to place the snippet call on our feedback page. The form will look something like this (after some styling)
For this example we will create a chunk called 'eFeedBackForm' and copy and paste the following form
A fairly straight forward html form with some placeholders for error messages and the vericode (CAPTCHA). Note the
formid field. This hidden field is required so that eForm can recognize the form. We'll get back to that later at the snippet call.
The required fields have formatting and validations options set using the
eform pseudo attribute (See the form validation page for details on setting values for the
eform attribute) The eform attribute will be stripped from the form before it is sent to the browser.
[+validationmessage+] placeholder will be filled with an error message if the form submit was unsuccesful. Below is an example message:
Some errors were detected in your form:
The following required field(s) are missing: Your Name, Comments
Your Email Address is not a valid email address
Note! In the above template we use a hidden field for the formid:
<input type="hidden" name="formid" value="feedbackForm" />
If you are using eForm 1.4+ you can instead use the id attribute of the form tag itself and leave out the hidden field:
<form id="feedbackForm" method="post" action="[~[*id*]~]">.
Either way will work
We'll create another chunk for the body of the email and call this one 'eFeedbackReport'
As you can see you can use HTML markup in your email. Using placeholders for each field we can populate the email with all information from the submitted form. Placeholders must have the same name as the name used for the from field.
The same recipe... another chunk, called 'eFeedBackThanks' this time
The thank you template can be used to present the web site user with a more comprehensive follow up after thay have submitted the form and can contain the same placeholders as used in the report template.
You should have all paramters on one line but just to make things a bit more readable below is a slightly more verbose printout.
I'll go through them one by one
formidfield with the same value. (You did read that note didn't you?)
departmentselect box. See the
departmentfield which we use to select the email address to use. Note the option values of the
departmentselect box in the form. They are 1,2 and 3. The value returned from this field will select one of the addresses we just declared in the
&toparameter.1 will select the first address, 2 the second and so on.
&vericode=`1`parameter to the snippet call eForm will replace the
[+verimageurl+]placeholder in the form with a CAPTCHA generated image. On submitting the form the
vericodefield is then validated against the text displayed in the image.
That's it,.. have fun.
Although we have been using chunks for this example you can just as easily
use documentsor even snippets for each template.
In the case of a document you would pass the document id to eForm, for example
&tpl=`31`. (There is a catch however when you are using the tinyMCE editor. TinyMCE cleans
HTML from what it considers invalid attributes and thus will strip the
from your form. If you want to place your form in a document instead of a chunk
make sure you don't use the TinyMCE editor for that document.)
Using a snippet as your template source gives you even more flexibility. You can dynamically create options and fields, however you must make sure that the snippet returns the same form template between form submits as otherwise eForm's validation code may incorrectly evaluate invalid values. If for instance you have a select box with the options values 1,2 & 3 (from a database for instance) at the first pass and when those values have changed to 2,3 & 4 by the time the form is submitted (and the template retrieved a second time with the changed values), eform will see a submitted value of 1 as invalid...
There is a way to add the eform as a valid attribute to tinyMCE but you'll have to dig into the tinyMCE plugin code to do that. However that's beyond the scope of this article.
(and no,.. don't try to pronounce it)