How to Create an HTML/PHP Contact Form – Radio Buttons, Checkboxes, Dropdown Menus

Welcome back to our contact form tutorial series. If you’re not exactly sure why I’m saying “back”, check this link. This is the third episode and in this tutorial we’re gonna learn how to add different types of inputs to the contact form and process that with PHP. It’ll make your contact form look absolutely gem and the features allow you to obtain some extra info from the user. So, you totally need to know how to do that.
If you followed my two previous contact form tutorials you should have 2 files: contact-form.html and send-mail.php. If not, then you can download them here. Now just open them with your favorite html/php editor.

By the way, if your job involves taking care of a server or you’re just running a website, you really need to take a look at the server maintenance checklist, which allows to ensure that everything is configured properly and working as it’s supposed to.

Radio buttons

The first new input type we are going to add is the radio button. This type of input is used when you want to provide a variety of options for the user, but from that variety a user can select just one.

<p>Select your hosting plan:</p>
<input id="radio_1" type="radio" name="radio_group_1" value="shared">
<label for="radio_1">Shared server</label>

<input id="radio_2" type="radio" name="radio_group_1" value="vps">
<label for="radio_2">Virtual Private Server</label>

<input id="radio_3" type="radio" name="radio_group_1" value="dedicated">
<label for="radio_3">Dedicated Server</label>

Let’s analyze the additional contact form code above. Basically you should be already familiar with all the attributes used, but there are some tricky things.

The first thing you might have noticed is that all the three radio buttons have the same value assigned for the name attribute – radio_group_1. This way we basically combine those 3 radio buttons into one group, so the browser knows that only one radio button can be selected from this specific group.

When the user selects one option from the list, the data of this value attribute is sent to the server. So this attribute is a “must-have” else the server won’t know that any option has been selected.

Now for the PHP code of our contact form. We create a new variable entitled $host_plan that will store the result of the selected radio button.
For example, if we select the second option and submit the contact form, the $host_plan variable’s value will be vps, if the third radio button is selected – then it will be dedicated, and so on if we have more options.

$host_plan = $_POST['radio_group_1'];

CHECKBOX

Checkbox inputs are quite similar to radio buttons, except that a user can select multiple options, not just one.

<p>Additional hosting options:</p>
<input id="check_1" type="checkbox" name="checkbox_group_1[]" value="privacy">
<label for="check_1">Domain Privacy</label>

<input id="check_2" type="checkbox" name="checkbox_group_1[]" value="ssl">
<label for="check_2">SSL certificate</label>

<input id="check_4" type="checkbox" name="checkbox_group_1[]" value="mysql">
<label for="check_3" >Additional MySQL Databases</label>

One thing to note here is how we define the value for the name attribute. I bet you noticed that I added square brackets [ ] at the end, this tells the server to create an array to store the checked values. If we don’t do that, then the server will receive only the value of the last marked checkbox.

To convert an array of checked options into a string, we’ll use the PHP implode function. It basically creates an empty string, then grabs each value from the array, and appends it to the string.

$additional_options = implode(' | ', $_POST['checkbox_group_1']);

Note, the first parameter of the function - ' | ' – it works as a separator.
If we tick all 3 checkboxes and implode the array, the result string would be ” privacy | ssl | mysql ” You can use anything as a separator – a comma, a whitespace or even some text or special symbol.

Dropdown menu

<select name="dropdown">
    <option value="1m">1 month</option>
    <option value="2m">3 month</option>
    <option value="6m">6 month</option>
    <option value="1y">1 year</option>
    <option value="3y">3 years</option>
</select>

The code above creates a dropdown list with 5 options in it. This feature can make any contact form look cool and robust. The syntax is quite simple – the option tags are wrapped inside the opening and closing select tags. The text between the option tags is what we see in the browser, and the value attribute is what the server actually receives. For the select tag, we just need to specify the name attribute. And the PHP code below

$host_period = $_POST['dropdown'];

Final Steps

One last thing to do (which I almost forgot). We should now add some script to our contact form that allows to send the new data to our email. To do that, we can append new variables to the body message. Here’s the last piece of code we need to add to the PHP file

$body_message .= 'User selected the ' . $host_plan . ' hosting plan';
$body_message .= 'Additional options selected: ' . $additional_options;
$body_message .= 'Hosting period: ' . $host_period;

That’s all for today folks. I hope this part of my contact form tutorial was easy enough to follow. If some part was not clear, you can download the final files from this link and investigate the completed code.

Designs with a Built-in Form

Alternatively, you can just use the designs that already have forms so that you get your site off the ground in virtually no time. Check’em out! 🙂

Under Construction Page w/ AJAX contact form

Divine – vCard/Portfolio – With AJAX Contact Form

Wisdom of Life – HTML Template + PHP Contact Form

iSite – 1 Page Folio + Contact Styling Validation

Animated Under Construction – Twitter & Ajax forms

Let me know if you have any questions or issues with your contact form.