[contact-form-7 id="24078" title="Feedback EN"]

Adding fields to the HTML contact form

This tutorial will show you how to add fields to the HTML contact form. This tutorial is a continuation of the tutorial How to create a contact form in HTML. If you have the files from that tutorial then open to continue on, or else download them

Part 1. HTML

Open the index.html file with your prefered HTML editor. We have 2 input, 1 textarea element and two buttons. So let’s add more features to it, like checkboxes, radio buttons and a drop-down list. The HTML syntax for all those elements is quite easy and you can check it below. Add this code right after the Submit and Reset buttons.

Additional options:

	<input type="checkbox" name="check[]" value="USA">USA<br />
	<input type="checkbox" name="check[]" value="Canada">Canada<br />
	<input type="checkbox" name="check[]" value="Mexico">Mexico<br />

Do you agree?

<input type="radio" value="yes" name="cf_radio_button">Yes
<input type="radio" value="no" name="cf_radio_button">No

Select an item from the drop-down:

<select size="1" name="cf_drop_down">
	<option>php</option>
	<option>html</option>
	<option>css</option>
	<option>asp</option>
	<option>ajax</option>
	<option>javascript</option>
</select>

Let’s clarify some interesting moments in this code. You might have noticed that the names assigned to the checkboxes are not different, as in case with text field added previously, also they have square brackets at the end. The brackets define that this is an array variable.
So this is how it works. For each checkbox you check, the check[] array receives the value of the checkboxes pressed. For example, after checking both the USA and Canada checkboxes, your check[] array contains the values checked_usa and check_canada as its elements.

Nothing fancy going on with the radion buttons or drop-down. We’ve assigned the same name “cf_radio_button” to both of the radio buttons, as you can’t select both at the same time, so each of them don’t need to have a unique name.

The drop-down list syntax is quite easy as well. Open the tag <select>, then list inside it the options, wrapped in <option>…</option> tags, and at the end close with a </select> tag. The <select> tag has 2 attributes assigned to it, one of which is name, and the second – size. The size attribute specifies the number of visible options in a drop-down list.</select>

So here’s the result you should get with that code added.

HTML contact form(click to enlarge)

Part 2. PHP

So, now that we have the elements on the page, we should proccess their data sent and add to the email sent. Below, is the final code of contact.php file

<?php
// Grabbing data sent from the form and assigning it to variables
$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

// Composing body of the message
$mail_to = '[email protected]';
$subject = 'Message from a site visitor '.$field_name;

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message."\n";
$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

// Creating headers of the message
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		alert('Thank you for the message. We will contact you shortly.');
		history.back(1);
	</script>
<?php
}

else { ?>
	<script language="javascript" type="text/javascript">
		alert('Message failed. Please, send an email to [email protected]');
		history.back(1);
	</script>
<?php
}
?>

Let’s see what parts of code have been added here, and what they actually do.

We’ll use the php function foreach() to iterate through an array “check” and store each element of the array into a variable called $value. Then we create a variable $check_boxes and increment it with the value of each element in your array

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

As you see below, the radio buttons and drop-down list are defined in a similar way to input text fields. We create a php variable and assign it the data sent from a radio box or the drop-down list

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

This piece of code is also similar to what we’ve done before. We just add new data to the final email

$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

TIP: One small update that might be usefull. In the previous version of the script, after the javascript alert message, there was a manual redirect to the page you specify in the code window.location = ‘contact_page.html’; So if you rename the contact_page.html to something else, you’ll need to correct the file name in contact.php A better way would be replacing that code with this one

history.back(1);

Basically the code itself explains what it does. This is the same as clicking the Back button in your browser.

Adding fields to the HTML contact form, 4.3 out of 5 based on 13 ratings
  • no1jester

    great guide i just have 1 question
    can i just insert the information on the contact page into a page on my webpage instead of the “contact” page?

    • Anonymous

      Yes you can do this.

  • This guide was quite helpful and I learned a few valuable things. However, I found that the resulting email message did not contain ANY headers. I didn’t know any PHP before this, but when I experimented and changed ‘$cf_email’ in the headers section to ‘$field_email’, my problem was resolved. Perhaps this was a typo?

  • Gordon J. Blair

    Thank you Brian for noting the error. The code has been corrected

  • wcs

    i dont seem to be getting sent an email i change where i saw your email to mine as well as $mail_to = ‘my email’ it comes up saying the mail was sent successfully but i never receive anything any ideas?

  • wcs

    i seem to be struggling a little i dont get an error but i also dont receive the email but i get the msg saying it has been sent

    • Anonymous

      Please make sure you set the correct email adress to receive messages.Also make sure your mail server is configured correctly. You can contact your hosting provider to check mail server.
      Also please contact our technicians using our online help desk at http://esupport.template-help.com/index.php?/Tickets/Submit, they will provide you with further assistance.

  • Thank you for the wonderful and explicit exposition of these codes. However, i woul like to know where to put the contact.php , because i put mine in the public_html yet i don’t receive emails sent by visitors on the website. Your candid response is appreciated.

    • Gordon J. Blair

      The contact.php file should be placed into the same directory as the .html file with the contact form. So if your contact_page.html file is for example in folder /public_html/test/ then the .php file should be there as well

  • Kim Harrison

    Hi,
    Thank you very much for this tutorial! I’m finding that it’s not working for me.. and I’m sure it’s something I’m doing wrong.

    When I click submit, it changes to an error page and when I look at the link, it’s actually gone to the contact.php page. Is this supposed to happen?

    Also, I’m not sure if this is the reason why, but for my website, I’m using php files and I’m using the php includes for things such as the navigation, footer and the contact form. These are in a separate folder called includes. The form is also in this folder but I also put the contact.php file in there too.

    What am i doing wrong?

  • Steve

    Great help and thank you!

    Can you please tell me how I can add a phone number between the email and message fields?

    • Anonymous

      This cab done the same way as described in the tutorial, but instead of readio button or select box use the text input:

      • Steve

        Great, got it. One thing more – I am trying to get the info coming back to me to include “From”. The info only comes back in the subject part of the email and the from is blank.

        Here is the code from the contact.php – What do I need to add to get the from in the from instead of all in the subject? Thanks Steve.

        <?php
        $field_name = $_POST['cf_name'];
        $field_email = $_POST['cf_email'];
        $field_phone = $_POST['cf_phone'];
        $field_message = $_POST['cf_message'];

        $mail_to = '[email protected]';
        $subject = 'Message from contact visitor '.$field_name;

        $body_message = 'From: '.$field_name."n";
        $body_message .= 'E-mail: '.$field_email."n";
        $body_message .= 'Phone: '.$field_phone."n";
        $body_message .= 'Message: '.$field_message."n";

        $headers = 'From: '.$cf_email."rn";
        $headers .= 'Reply-To: '.$cf_email."rn";

        $mail_status = mail($mail_to, $subject, $body_message, $headers);
        ……

        • Gordon

          there was a small error in the tutorial files. Replace
          $headers = ‘From: ‘.$cf_email.”rn”;
          $headers .= ‘Reply-To: ‘.$cf_email.”rn”;

          with

          $headers = ‘From: ‘.$field_email.”rn”;
          $headers .= ‘Reply-To: ‘.$field_email.”rn”;

          The code in the files and tutorial has been updated

  • Steve

    How do you add captcha security to the form?

    • Anonymous

      Adding captcha is an additional customization and is beyond of our sphere of free support services. We recommend you to search google. It offers a lot of affordable solutions

  • Victor Chia

    Great tutorial. Is there a way where i could custom style the pop-up mail status message? please advise.

    • Anonymous

      Unfortunately it’s not possible to change the pop-up window style in this contact form example. You can only do that if you are using the JavaScript based contact form.

  • Brock

    Hello, Im hoping someone can help. I am also using the contact.php code provided by template monster, but I can’t get the code to work 100%.

    I get one of the following things happen:

    1) if i use…

    $headers = ‘From: ‘.$cf_email.”rn”;
    $headers .= ‘Reply-To: ‘.$cf_email.”rn”;

    …I recieve an email, but I get 2 “undefined variable” error msgs for the above 2 lines.

    2) if I use…

    $headers = “From: $cf_emailrn”;
    $headers .= “Reply-To: $cf_emailrn”;

    …no email will send, but no error msgs either?

    Please help, it’s driving me mad!

    • Anonymous

      Please replace the variable $cf_email with $field_email

  • Gordon

    If you get full php code of the file, it means PHP is not installed or enabled on the server. You need to consult with your host provider

  • Satyam Saini

    Hi..

    could you please design the php form for the code below?

    Name (required)

    Email (required)

    Website

    Thank you!

    • Anonymous

      We regret but our team do not offer customization services. You can contact our partner at templatetuning.com and get any kind of customization there.

  • Alex Ross

    You should use unique names for your select boxes like cf_drop_down1 and cf_drop_down2. Then in PHP you can use:
    $drop_down_item1 = $_POST[‘cf_drop_down1’];

    $drop_down_item2 = $_POST[‘cf_drop_down2’];

    • mistergookey

      I figured it out a few minutes after commenting in the end but thanks anyway!

  • Teriann Shrum

    THANK YOU for this tutorial. I just needed a very simple contact form and you provided it with excellent instruction!