Creating a general purpose feedback form

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.

• The HTML Form
• The body of the email
• The thank you page

And offcourse we need to place the snippet call on our feedback page. The form will look something like this (after some styling)

The form

The HTML Form Template

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.

The [+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

The email template

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 Thank you message

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.

The Snippet call

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

• &formid=`feedbackForm
  This tells eForm which form it should process. The form must contain a hidden formid field with the same value. (You did read that note didn't you?)
• &to
  Here we have the three email addresses of which one can be selected in the form using the department select box. See the &mailselector below.
• &tpl
  The name of the chunk with the form template we created
• &report
  The name of the chunk with the email template
• &thankyou
  Yes,... you guessed it.
• &mailselector
  This contains the name of the department field which we use to select the email address to use. Note the option values of the department select 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 &to parameter.1 will select the first address, 2 the second and so on.
• &vericode
  When you add the &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 vericode field is then validated against the text displayed in the image.
• &subject
  This will be used as the subject of the email.

That's it,.. have fun.

Using chunks or documents for eForm templates

Although we have been using chunks for this example you can just as easily use documents for each template. In that case you would pass the document id to eForm as 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 eform attribute 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.

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.

Jelle Jager
AKA TobyL
(and no,.. don't try to pronounce it)