Collecting visitor comments

This item is the first in a series that explains how I built the commenting system for the Loosely Coupled website, using Xara Modules. Each item in the step-by-step guide describes how to build a finished, working function in as little as ten or fifteen minutes, ready to 'plug in' to any website for immediate use. So anyone following the guide can choose to add features to their website one step at a time, or — thanks to the modular architecture of Xara's connectable modules — they can miss out certain functions entirely, and build a system with just the features they want.

Step one creates a form to collect visitor comments (as pictured right — click thumbnail for larger version), and a mailer module that automatically emails any comments submitted to any email address that you specify. Later postings in the series will explain how to add commenting options to individual pages or weblog items, store the comments in a database, and automatically publish them on your website.

Before getting started, it's worth spending a few minutes with a pen and paper to decide two things:

1. What information you want to collect on your form. A basic comment form only needs to collect the person's name, email address and comment, which would be just three fields. However it's often useful to split the name into first name and last name, and I've opted to ask for a website URL too. It's also a good idea at this stage to give each field a short but recognizable system fieldname. These are the fields I've decided on, with their system fieldnames in brackets:
   • Your email address (email)
   • First name (fname)
   • Last name (lname)
   • Your website URL (siteurl)
   • Your comment (comment)


2. How you want to lay out the form. I knew I wanted the form to run across most of the width of the page, so I decided on a three-column layout, which would allow me to put the smaller fields together on a single row. My preferred character font is 10pt Verdana, which happens to be the default choice in Xara.

Armed with this basic preparation, it's now time to sign in to Xara Modules and enter your module store. Here's how to create the form:

1. From the left-hand menu, Select Data Manager — Form — Create New. Find the predesigned form headed "Product Enquiry" (at the time of writing, it's the first one you see, at top right of the first page). Click on it to select it.
2. You'll then see the form in a screen where you can edit it, as pictured right (click thumbnail for larger version). You can edit cells either individually or collectively. Each individual cell in the form has its own edit and delete buttons in the top right corner, along with a checkbox that allows you to select multiple cells for editing together. Underneath the form, you can see the 'edit selected' and 'edit all' buttons, which let you edit either a selection of the cells or all of them at the same time. The big purple arrowheads along the top and left of the form allow you to edit rows and columns.
3. First I clicked the 'edit all' button to globally edit the font size and style for the form. This brought up a popup window containing various cell formatting options. I clicked on 'set font', entered a font size of 10, and removed the bold. Then I clicked the 'OK' buttons to return.
4. Using the arrowhead tools, I quickly rearranged the rows and columns to match my planned layout:
   
   1. First I added an extra column on the right of the form. Clicking on the top right arrowhead brought up a popup window. Underneath the cell formatting options in the popup, there is a row of column tools. I clicked on the one that adds a new column to the right.
   2. Clicking the top left-hand arrowhead brought up a new popup window with cell formatting options and a line of row tools, which I used to delete the heading row. (If I had wanted to keep the heading, I would have used the individual cell edit button to change the wording, font and background color).
   3. Clicking on the left-hand arrowhead for the next row of the form, this time I selected the tool to 'insert new row below', which inserted a row containing duplicates of the first two fields.
   4. I then selected the middle row (the one with the 'Products' field) and deleted it.
   
   
5. The next step was to edit the individual field cells to match my chosen fieldnames and formatting:
   1. Moving to the first cell of the form, I clicked on the 'edit cell' button to bring up its popup editing window, which you can see pictured right (click thumbnail for larger version). I selected the cell tool to 'merge with cell on right'. Then I clicked on the edit button again, and made several other changes in the popup window:
      1. I edited the label to read "Your email address:"
      2. I clicked on 'change fieldname' and changed it to "email"
      3. I changed the width of the field to 256 pixels
   
   
   2. Moving to the next row, I selected the first cell, and changed the label to "First name:", changed the fieldname to "fname" and made the width 100 pixels.
   3. I selected the second cell of the same row, changed the label to "Last name:", changed the fieldname to "lname" and made the width 150 pixels.
   4. The third cell in that row was an empty cell, so when I clicked on the 'edit cell' button, it opened a popup window with a choice of cell types. I selected "Single line text input". Then I changed the label to "Your website URL:", changed the fieldname to "siteurl" and made the width 240 pixels.
   5. Moving to the next row, I clicked on the edit tool for the cell containing the "enquiry" box, and selected 'merge with cell on right', to stretch it across all three columns. Then I clicked the edit button again and changed the label to "Your comment:". I set the font to bold, and I changed the fieldname to "comment". Finally, I made the width 496 pixels, and doubled the height of the input box to 150.


6. Moving to the last row of the form, I clicked the edit control for the 'Submit' button and selected 'merge with cell on right'. Then I clicked again and renamed the label "Submit your comment". The form was now complete.
7. Moving down to the 'table properties' panel below the form itself, I clicked on the 'Background Color' box, which brought up a popup 'color picker' window. Instead of picking a new color, I selected transparent, and then 'Set Color', so that the form will inherit whatever background color it is placed on.
8. The form is now ready to save. In the top right corner of the form editor screen, there's a small white box that contains the name the form will be saved under. Edit the default name (usually "Form") to something meaningful, like "Comment", and then click the 'save and publish' button.
9. The final screen will show you a line of text with the word SCRIPT at each end. This is the HTML snippet that you paste into your web page to publish the form you've just created.

Having created the form, it's a simple process to add the mailer module:

1. Back in the module store, go to the left-hand menu, Select Data Manager — Mailer — Create New. This will take you straight to the mailer editor, where the first thing to do is to connect it to the form you just created:
   1. Scroll down to the 'Mail Merge' section and click on the 'connect' link
   2. You'll see a screen showing all the suitable modules in your module store. Find the icon for the form you just created and click on it.
   3. The next screen shows a list of all the fields in the form (the "outputs"). Go to the bottom of the list and click the 'connect' button.
   4. This takes you back to the mailer editor, where you'll see that the mail merge section now contains a list of the fieldnames from the form.


2. Highlight the list of fieldnames with your mouse, and copy and paste them all into the email content box above. Then rearrange them the way you'd like them to appear as the body of an email message when somebody posts a comment, as shown for example in the picture right (click thumbnail for larger version).
3. Add your email address and a suitable from name and subject in the email header fields.
4. Rename the mailer in the small white box at the top right of the screen, and then click the 'save and publish' button.

Because the modules have been connected, the mailer is automatically triggered whenever anybody submits a comment using the form. So the completed function is now ready to go live, just by pasting the HTML snippet for the form into your web page.

posted by Phil 12:34 PM (GMT) | comments | link