So this is a short post I am making as a minor addition to my last tutorial on Creating an Ajax Contact Form with jQuery. There was a great question comment left that I did not think to address, and I think it would be helpful to others so this addendum is to answer that.

Answer what?

Oh yeah, the question. How can I implement a drop down list to choose where the email goes to? For example, if I want the message to go to Sales Department, I choose it from the menu and it auto-magically is sent there. Great question now let’s make it happen.

Here is what it should look like when we are done, more or less.

This is really pretty simple to accomplish, we just need to add a few pieces to the existing form we made last time, and some new PHP to handle the new requests. There are many ways to do this and this one is going to be the easiest that I can think of. Start by opening up the form HTML page and adding in this, right between the email input field and the message box,

<label for="select-choice"></label>
<select id="selected" class="select" name="selected">
		<option value="email 1">General</option>
		<option value="email 2">Service/Support</option>
		<option value="email 3">Sales</option>
	</select>

This is just adding a drop down menu to the form with three options, each option will display a department name, and have a value of that departments email address. Done. Now open up the CSS file to add one tiny little line, just for funzies.

.select{
	width:355px;
	padding:2px;
	margin: 0 0 20px 0;
	font-size:16px;
}

This just adds a little matching style to the select bar, you can edit at your leisure.

Now open up the email.php file and we are going to edit one line really. Find the line

$to = "YOUR_EMAIL";

and change it to the following,

$to = $_POST['selected'];

You can totally guess what is happening here, the to variable is getting assigned the value of whichever choice was made. And after that the mail function is called as usual and sent away. Only this time it goes to whichever email was chosen via the drop down menu.

So that is that! Just a short addition that I did not want to stuff into a comment. So you can check out the entire first part of the tutorial here if you missed it.

About the Author: thatryan