Creating a Custom Contact Form with a Selectable Recipient

The Webvanta system includes a simple, default contact form that you can use on any site. It is quite fixed, however, in terms of the number of fields, and to whom the notification message goes (the email address specified in the Global Setting admin_contact_email).

You can create a custom contact form by creating a custom item type with whatever fields you need, and then using the form generator to create a form that submits to that item type. You can choose to have an email notification sent when the form is submitted, so it will act just like a contact form.

(You can learn the basics of this process in the article Creating Forms for User Submissions.)

With this setup, you can have the notification message go to any email address that you specify, or even to a list of email addresses that you specify.

Selecting the Form Recipient

But what if you want the site visitor to be able to select the form recipient? You might want to provide a list of staff members, or a list of departments, from which they could choose. And you might want to use the same form on different pages, and have it go to a different person depending on which page it came from.

You might think that we could just let you specify the email address of the recipient in a hidden form field, but this would be a security issue. A nefarious visitor could copy your form code, modify the recipient address, and use your form to send spam. So we need a more secure approach.

To specify a recipient from within the form, you must provide three pieces of information:

  • The name of a custom item type in which the recipient's email address is stored (placed in a hidden field, since this is not useful information to the visitor)
  • The name of the field within that item type that holds the email address (also in a hidden field)
  • The name or ID of a particular item (typically specified via a visible form element, either a radio button or a select list)

The fields are as follows:

Field NameValue
citCustom Item Type name
idName or ID of the specific database record. (If using ID, format is ID:nnnn, where nnnn is the item's ID)
fieldnameName of the CIT field that contains the email address (typically "email")

The name attribute for the fields must follow a particular syntax, exactly as in this example below. In this example, the Custom Item Type is named "staff", the field with the email address is "email", and the staff member's name (which must be in the field "name") is "Chris Haupt":

<input name="connect[receiver][cit]" type="hidden" value="staff" />
<input name="connect[receiver][fieldname]" type="hidden" value="email" />
<input name="connect[receiver][id]" type="hidden" value="Chris Haupt" />

If the database item is found, and the specified field contains a properly-formatted email address, the specified field will be used as the recipient address for the admin notification email. If no match is found, the default admin_contact_email Global Setting value is used.

Example: Drop-Down Recipient List

Let's look at a specific example of how this might be used. Suppose we have an item type "staff" and that it has, in addition to the name field, an email field.

First, we need to provide the hidden fields that specify the name of the item type and the name of the field that contains the email address:

<input name="connect[receiver][cit]" type="hidden" value="staff" />
<input name="connect[receiver][fieldname]" type="hidden" value="email" />

Now we need to set the name of the staff member whose email address we want the form to be sent to. This is typically done with a select list:

<li>
  <label for="recipient">Message For: </label>
  <select id="recipient" name="connect[receiver][id]">
    <w:kb:item:each type="staff" sort="name asc">
      <option value="<w:name />"><w:name /></option>
    </w:kb:item:each>
  </select>
</li>

This code creates an HTML select element (drop-down list), with one option element for each of the staff members. (If you wanted to include only some staff members, you could add a field to the custom item type to specify which members should be listed, and use that as a condition here.)

Now you just need to add this code to the form generated by the custom item type form generator (as described in the article referenced at the start of this article), and you'll have a contact form with a drop-down list of staff members to whom contact messages can be sent.