Adding Fields to the Participants Database Contact Form

The recently-released Contact Button add-on for Participants Database adds a javascript-powered pop-up contact form to any list or single record display. The form is pre-set to include inputs for a name, email address and contact message, but it is possible to add additional fields if you need something more from people who are sending contact messages.

The form generated by the add-on has several action hooks that allow you to easily add form elements (or anything, really) to the contact form. If you add a form element, the information entered by the user will be passed to the email template that sends the email, so it can be included in the contact email.

Constructing an HTML Form Element

There are a lot of different form elements that can be added to a contact form, and using the HTML attributes, the input can be specialized for a particular type of data. For the purpose of this tutorial, we are going to add an input for a telephone number. The HTML includes a label and the actual input:

<label for="pdbcff-phone">Phone Number</label>
<input id="pdbcff-phone" title="phone number format: 123-456-7890" name="pdbcff-phone" pattern="^\d{3}-\d{3}-\d{4}$" required="" type="tel" value="">

Using the “pattern” attribute, we can ensure that the phone number is complete and in the right format. The “required” attribute forces the user to fill in the field, while the “title” attribute gives them a hint for the format to use.

Need to know more about the patterns you can use? Take a look at this page…

If you want a more compact presentation, you can drop the label element and place the name of the field in a “placeholder” attribute in the input field.

Placing the Input Element

To actually add the input element to the form, we need to use an action that is set up to add content at specific points in the generation of the contact form. For this input we will be using the ‘pdbcff-before_message_area’ action, which places the new input field just before the message (or the subject line of you have that enabled). When the action is fired, our function simply prints the input field HTML and that’s it!

Getting the Information

When a contact form is submitted, all that really happens is the data from the contact form and the data from the record (contact buttons are associated with a Participants Database record) is sent to the email template. It’s up to the template to do something with the information…such as display it in the email.

For our demonstration here, the telephone number the user has entered with be available in the email template as the value tag [pdbcff-phone] You will notice that this is the value of the “name” attribute of our input. If you want to add other inputs, just remember that the “name” of the input field is used to index the information the user entered. This will then be available to the email template as a “value tag.”

Also important to remember is that the information from the contact form and the information from the associated record are all available at the same time. If you add a field with the same name as one of the fields in the record, you will have a conflict. To avoid this, we prefix the contact form input names with “pdbcff-“

Adding the Code

The easiest way to add functionality to your site with with a plugin. Plugins can be extremely simple (this one here is a great example of that) and yet they are easy to enable/disable (should you need) and you don’t have to worry about messing with your theme. So, here is the plugin that adds the telephone field to the contact form:

You can install this easily by clicking on the filename, then downloading the zip file on the page that takes you to. You can easily install the plugin from the zip file by following the “add plugin” links on the plugins page in the admin. (hint: it’s at the top of the page)

Once it’s installed and activated, all that’s left to do is to add it to your email template. For instance you can add a line like this to the body of the email template:

Phone: [pdbcff-phone]