Posted on by

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]

9 thoughts on “Adding Fields to the Participants Database Contact Form

  1. Hello,

    I want to create a large form with some of the rows distributed in two columns, others in only one colum.

    I tried to assign the atribue width::50% to each field I want to distribute in two columns but it does nothing.

    Can you tell me how I can solve this question?

    Best regards
    Toni

    1. Instead of using attributes, you’ll have more control over the layout if you use custom CSS rules that target your form elements. It may not be as simple as setting the width, which only works in specific situations. Instead of using the width attribute, you can use the “class” attribute in the field definition, then target that classname with your CSS.

  2. Hello,
    How do I add placeholder text inside a few form fields?
    I could not find placeholder anywhere except under Form Element which does not server the purpose.
    Thanks for your help.

    1. You can add a placeholder to text inputs by setting up the “placeholder” attribute in the field definition. Add something like this to the field attribute:

      placeholder::please enter your full name

      You can combine that with additional attrributes if you need.

  3. Hello, how i can add the single record id from which the contact buton was pressed in the sent email body? thanks

    1. [id] should do it.

  4. Hi, I want to complete registration process for my visitors with non-standard fields

    – School Name
    – Lowest Fee
    – Highest Fee
    – Curriculum Type
    – Facebook Link
    – Website Link

    How do i make this form, collect above information. Thank you.

    1. The fields for your form are configured on the Manage Database Fields page. There are several fields defined to get you started, you can delete the ones you don’t need and add your own fields on the page.

      Once your fields have been defined, you add them to your signup form by clicking the “signup” checkbox in the field definition.

      For general configuration of the plugin, I suggest you visit the “Setup Guide” page in the Participants Database menu.

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.

9 thoughts on “Adding Fields to the Participants Database Contact Form

  1. Hello,

    I want to create a large form with some of the rows distributed in two columns, others in only one colum.

    I tried to assign the atribue width::50% to each field I want to distribute in two columns but it does nothing.

    Can you tell me how I can solve this question?

    Best regards
    Toni

    1. Instead of using attributes, you’ll have more control over the layout if you use custom CSS rules that target your form elements. It may not be as simple as setting the width, which only works in specific situations. Instead of using the width attribute, you can use the “class” attribute in the field definition, then target that classname with your CSS.

  2. Hello,
    How do I add placeholder text inside a few form fields?
    I could not find placeholder anywhere except under Form Element which does not server the purpose.
    Thanks for your help.

    1. You can add a placeholder to text inputs by setting up the “placeholder” attribute in the field definition. Add something like this to the field attribute:

      placeholder::please enter your full name

      You can combine that with additional attrributes if you need.

  3. Hello, how i can add the single record id from which the contact buton was pressed in the sent email body? thanks

    1. [id] should do it.

  4. Hi, I want to complete registration process for my visitors with non-standard fields

    – School Name
    – Lowest Fee
    – Highest Fee
    – Curriculum Type
    – Facebook Link
    – Website Link

    How do i make this form, collect above information. Thank you.

    1. The fields for your form are configured on the Manage Database Fields page. There are several fields defined to get you started, you can delete the ones you don’t need and add your own fields on the page.

      Once your fields have been defined, you add them to your signup form by clicking the “signup” checkbox in the field definition.

      For general configuration of the plugin, I suggest you visit the “Setup Guide” page in the Participants Database menu.

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.