Google

Client Login.



Justin Long // ExpressionEngine Expert

Selecting Multiple Recipients with Freeform

Written by: Justin Long | On: January 25, 2011

The Problem

If you build a site for a team that is larger then a few people you often have multiple departments that handle different request. In the early days of Freeform sending to multiple users based upon a users selection required writing a custom add-on or some fancy jQuery manipulation to get it working. Thankfully the team at Solspace listened to the users pleas and have added a Recipients feature to dynamically assign recipients. So today I was surprised when I saw Dominic's question on the Solspace forums and they did not immediately point him in the direction of the Recipients feature.

Status Update
So I took the time to make a quick little entry to explain how you could assign multiple recipients with checkboxes.

The Solution

The code in this tutorial is very basic but lays the foundation for some very powerful forms. Lets start of by building the basis of Freeform form.

{exp:freeform:form
   collection
="Recipient_Checkbox_Test"
   
required="name|email"
}

<p>Your Name: <input type="text" name="name" /></p>
<
p>Your Email: <input type="text" name="email" /></p>
<
p>
   <
input type="checkbox" value="" name="Brochure 1">Brochure 1<br />
   <
input type="checkbox" value="" name="Brochure 2">Brochure 2<br />
   <
input type="checkbox" value="" name="Brochure 3">Brochure 3<br /></p>
<
input type="submit" value="Submit" name="Submit" />
{/exp:freeform:form} 
This contains the basic markup of our form that we need. Now using the recipients feature. The first thing that we need to do is modify the opening tag for freeform.
{exp:freeform:form
   collection
="Recipient_Checkbox_Test"
   
required="name|email"
   
recipients="yes"
   
recipient_limit="3"
   
recipient1="Brochure 1|test1@example.com"
   
recipient2="Brochure 2|test2@example2.com"
   
recipient3="Brochure 3|test3@example.com"
As you can see from the code above I have added recipients="yes", I have declared 3 recipients and limited the form to only allow 3 recipients for good measure (you will want to change that to meet your needs). If you look at recipient1 I have "Brochure 1|test@example.com" the first part of the code "Brochure 1" will allow you to assign a name that will be shown to your front end user. You then separate it from the email address with a "|" character.
The next step is changing the actual form template code.
<p>Your Name: <input type="text" name="name" /></p>
<
p>Your Email: <input type="text" name="email" /></p>
<
p>
   <
input type="checkbox" value="{recipient_value1}" name="recipient_email[]">{recipient_name1}<br />
   <
input type="checkbox" value="{recipient_value2}" name="recipient_email[]">{recipient_name2}<br />
   <
input type="checkbox" value="{recipient_value3}" name="recipient_email[]">{recipient_name3}<br />
</
p>
<
input type="submit" value="Submit" name="Submit" /> 
As you can see from the code above I added "recipient_value" to the value field, this will pull the email from above but it will be encrypted. I have also changed the name to "recipient_email[]" which will tell Freeform that this input field is part of the Recipients function, the square brackets allow for multiple inputs allowing users to select multiple checkboxes. Then I added the "recipient_name" which allows you to use the name that we set up earlier. Once you save the template you should be able to try it out and now your users can select multiple recipients.

The Final Template Code

{exp:freeform:form
   collection
="Recipient_Checkbox_Test"
   
required="name|email"
   
recipients="yes"
   
recipient_limit="3"
   
recipient1="Brochure 1|test1@example.com"
   
recipient2="Brochure 2|test2@example2.com"
   
recipient3="Brochure 3|test3@example.com"
}

<p>Your Name: <input type="text" name="name" /></p>
<
p>Your Email: <input type="text" name="email" /></p>
<
p>
   <
input type="checkbox" value="{recipient_value1}" name="recipient_email[]">{recipient_name1}<br />
   <
input type="checkbox" value="{recipient_value2}" name="recipient_email[]">{recipient_name2}<br />
   <
input type="checkbox" value="{recipient_value3}" name="recipient_email[]">{recipient_name3}<br />
</
p>
<
input type="submit" value="Submit" name="Submit" />
{/exp:freeform:form} 
You can see this template code in action here

I hope this helps and as always if you have any questions or comments feel free to post them in the comments below.

Next entry >>> <<< Previous entry

Comments

<<< Go back to entry list