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]
Roland Barker 
martin 
Toni 
I am a happy user of participants database, used for maintaining the membership for a brand specific car club. We have several custom field groups for entering owned car details. This works great. However, over time some members sell existing or buy new (to them) cars. Is there a way to add a checkbox or other way for the user to trigger an sql script or process to clear, for the current record, the existing values from the fields in a field group?
There is a way to do this, it would require a simple custom plugin that kicks in when someone updates their record. It checks for the value of a checkbox and performs the action if it is checked. I have an example of this, but it is set up to delete the whole record, you’d need to modify it to only clear the specific fields you want reset.
https://gist.github.com/xnau/40ff2abd35fb856e3d06dbb4bdbc7169
For your consideration, we have an add-on, Participant Log, that gives people a way to maintain a personal list of items, which could well be the car or cars in their collection. In this form, it is very easy for the user to add or delete items from the list. There would be some work to convert your current system to use the Log instead of keeping the car info in the main record, but may well be worth the effort.
Hi Roland,
I took your advice and bought the Participant Log add-on, installed and configured it. I added one record and exported it. I also took and exported all of the records from my previous custom field groups and formatted them into the same structure as the new Log export. Before I try to import them, a few questions:
1. Do I need to manually create an ID for each log record or will the import increment and generate it?
2. Do I need to include the field names as the first row of the import or just ensure it is the same order?
Please keep up the great work on this plugin and add-ons!!
Martin
No need to include an ID, it will be created with the new entry.
Yes, CSV files must always have the field list in the first line. Make sure this is a comma-separated list of field names, not the field titles.
Hi Roland,
The log I created is:
===================
Year Dropdown List
Model Dropdown List
Body Style Dropdown List
Engine Dropdown List
Colour Text-line
Condition Dropdown/Other
Features/Modifications Text Area
Used For Dropdown/Other
Land-Rover Picture Image Upload Field
=============
I then created a 2 record csv.
=============
record_id,member_landrovers_year,member_landrovers_model,member_landrovers_body_style,member_landrovers_engine,member_landrovers_colour,member_landrovers_condition,member_landrovers_other_features,member_landrovers_used_for,member_landrovers_pictures
28,”1996″,”Series Hybrid”,”2 Door Hard Top”,”4.0L V8″,”tbd”,”Modified”,”Series 3 body fitted to Disco frame and motor.”,”Daily Driver (on/off road)”
28,”2005″,”LR3″,”4 Door Hard Top”,,”Black”,”Original”,,”Daily Driver (on/off road)”
==============
However, it doesn’t load. No errors, just sits at Importing Entries. What am I doing wrong?
Actually I figured it out. Only quote if there’s spaces or embedded quotes. I should have known that……. :)
Thanks Roland. Works great!
Glad you got it worked out!
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
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.
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.
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 nameYou can combine that with additional attrributes if you need.
Thank you Mr. Roland
Hello, how i can add the single record id from which the contact buton was pressed in the sent email body? thanks
[id] should do it.
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.
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.