Master Template

PHP Online Form

Test this example online php form

Name*
e-mail address*
Subject*
Contact number*
Favourite website URL*

Do you like this website form?*

Yes
No
Message*

Required fields marked with *

Here's the code for the above Form. You will need the following files to make this form operational.

  • contact.php
  • contactprocess.php
  • contactthankyou.php
  • form.ccs

contact.php


<form action="contactprocess.php" method="post">
	<div class="formelementtitle">
		Name* 
	</div>
	<div class="formelementinputarea">
		<span class="fieldbox">
			<input name="forename" type="text" size="45" value="<?php echo $forenameinput; ?>" />
		</span>
	</div>
	<div class="formelementtitle">
		e-mail address* 
	</div>
	<div class="formelementinputarea">
		<span class="fieldbox">
			<input name="email" type="text" size="45" value="<?php echo $emailinput; ?>" />
		</span>
	</div>
	<div class="formelementtitle">
		Subject* 
	</div>
	<div class="formelementinputarea">
		<span class="fieldbox">
			<input name="subject" type="text" size="45" value="<?php echo $subjectinput; ?>" />
		</span>
	</div>
	<div class="formelementtitle">
		Contact number* 
	</div>
	<div class="formelementinputarea">
		<span class="fieldbox">
			<input name="telephone" type="text" size="45" value="<?php echo $telephoneinput; ?>" />
		</span>
	</div>
	<div class="formelementtitle">
		Favourite website URL* 
	</div>
	<div class="formelementinputarea">
		<span class="fieldbox">
			<input name="website" type="text" size="45" value="<?php echo $websiteinput; ?>" />
		</span>
	</div>
	<div class="formelementtitle">
		<p style="margin-bottom:7px;">
			Do you like this website form?*
		</p>
		<div class="formelementtitle" style="width:13px;">
			<input name="likeit" type="radio" value="Like YES" /> 
		</div>
		<div class="formelementtitle" style="width:50px;">
			Yes 
		</div>
		<div class="formelementtitle" style="width:13px;">
			<input name="likeit" type="radio" value="Like No" /> 
		</div>
		<div class="formelementtitle" style="width:75px;">
			No 
		</div>
		<div class="formelementtitle">
			Message* 
		</div>
		<div class="msgbox">
			<textarea name="comments" rows="3" cols="1"><?php echo $commentsinput; ?>
</textarea> 
		</div>
		<div class="formelementtitle">
			<input class="formbutton" type="submit" value>
			</div>
			<p>
				Required fields marked with *
			</p>
		</form>

contactprocess.php


<?php
/* Set e-mail recipient */
$myemail  = "insert the e-mail address you want to send submissions to";
$fromemail = "insert a from e-mail address";

/* Check all form inputs using check_input function */
$forename = check_input($_POST['forename'], "Please enter your forename");
$email = check_input($_POST['email'], "Please use a valid e-mail address");
$subject  = check_input($_POST['subject'], "Please complete the subject field");
$telephone  = check_input($_POST['telephone'], "Please complete the telephone number field");
$website   = check_input($_POST['website'], "Please enter your favourite website address");
$likeit   = check_input($_POST['likeit'], "Please click either Yes or No on the do you you like this form question");
$comments = check_input($_POST['comments'], "Please write a message");

/* If e-mail is not valid show error message */
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email))
{
    show_error("E-mail address not valid");
}

/* If URL is not valid set $website to empty */
if (!preg_match("/^(https?:\/\/+[\w\-]+\.[\w\-]+)/i", $website))
{
    $website = '';
}

/* Let's prepare the message for the e-mail */
$message = "Hello!

Your contact form has been submitted by:

Name: $forename
E-mail: $email
Telephone Number: $telephone
Favourite Website: $website
Do you like this website form? $likeit
Comments: $comments

End of message
";

/* Send the message using mail() function */
mail($myemail, $subject, $message, "From:" . $fromemail);

/* Redirect visitor to the thank you page */
header('Location: contactthankyou.php');
exit();

/* Functions we used */
function check_input($data, $problem='')
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    if ($problem && strlen($data) == 0)
    {
        show_error($problem);
    }
    return $data;
}

function show_error($myError)
{
?>
    <html>
    <body>

    <b>Please correct the following error:</b><br />
    <?php echo $myError; ?>

    </body>
    </html>
<?php
exit();
}
?>

contactthankyou.php

TOP TIP! If you make this contactthankyou.php the whole page again but change the form snippet to the thank you code then to the casual user it looks as if the form has processed and thank you'd on the same page.



<h3>Your message was sent</h3>

<p style="margin-top:12px;">Your message was successfully sent! Thank you for contacting us, we will reply to your inquiry as soon as possible!</p>

form.css

Make sure that you include a link to the form.css file on the page where your form is to reside



.formelementtitle {position:relative;
display:inline-block;
width:500px;
padding-top:5px;
margin-bottom:5px;
}

.formelementinputarea {position:relative;
top:0px;
left:0px;
}

.fieldbox {
	background:none; /* transparent url('../images/subfield.jpg') no-repeat top left; */
	float:left;
	height:22px;
	padding-left:7px;
	border:#335 solid 1px;
	margin-bottom:10px;
}

.fieldbox input {
	background:none; /* url('../images/subfield.jpg') no-repeat top right; */
	height:22px;
	width:311px;
	border:none;
	font-size:14px;     /* set to allow input in fields to display vertically aligned in older ie browsers */
	line-height:28px;   /* set to allow input in fields to display vertically aligned in older ie browsers */
	padding-top:0px;    /* set to allow input in fields to display vertically aligned in older ie browsers */
    color: #335;
}


.msgbox {
	background:none; /* url('../images/msgfield.jpg') no-repeat top left; */
	float:left;
	height:100px;
	padding-left:5px;
	padding-bottom:5px;
	border:#335 solid 1px;
}

.msgbox textarea {
	background:none; /* url('../images/msgfield.jpg')  no-repeat top right ;  */
	height:100px;
	padding-top:5px;
	width:314px;
	border:none;
	overflow:auto;
	color:#335;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:20px; 

}


.formbutton{position:relative;
cursor:default;
border:none;
background:#999;
color:#666;
font-weight:bold;
padding: 1px 2px;
background:url('../images/submit.png') repeat-x left top;
background-size:58px 22px;
width:58px;
height:22px;
margin:8px auto 8px 0px;}

That’s your php form sorted!

Test it. Make sure it all works as you’d expect before moving on to the next stage.

The eagle eyed amongst you will notice the form does not contain any defense against robots.

We make sure your form works first before adding some security against robots using Google’s reCAPTCHA.

We do this so that any errors we encounter now will be as a result of the reCAPTCHA implimentation thus narrowing our search and investigation if we run into trouble.

Google reCAPTCHA

Google’s reCAPTCHA

https://www.google.com/recaptcha/intro/.

First off you need a Google Account

If you don't have one register one here.
https://accounts.google.com/Login

Then add the domain where your form resides to reCAPTCHA. You’ll be asked to sign in with your Google account.

With your domain added to reCAPTCHA you'll be presented with a “site key” and a “secret key”. Plus you’ll be provided with the following two code snippets to insert in your website page that contains your form.

  1. Insert the following code immediately before your </head> tag.
    <script src='https://www.google.com/recaptcha/api.js'></script>
  2. Insert the following code immediately before your submit button
    <div class="g-recaptcha" data-sitekey="YOUR SITE KEY IN HERE"></div>

Finally you have to invoke the reCAPTCHA code through your php form script

Add the following as part of your php form processing script as the first item to process.


/* Start Google Captcha Code */

$secret="YOUR SECRET KEY IN HERE";  /* Secret key for Google's reCAPTCHA Account */


$response=$_POST["g-recaptcha-response"];
$verify=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret}&response={$response}");

$captcha_success=json_decode($verify);
if ($captcha_success->success==false) 
{
    show_error("Please confirm you are a human being and not a ROBOT!

Use your browsers back button to return to the form.");
}
	else if ($captcha_success->success==true) {}
	
/* END Google Captcha Code */

UK Counties. Do we need to include them in a contact form?

No! The UK post office does not use the county information to deliver mail. Therefore you do not need to include county in your contact address forms..

However, nothing is black and white. You may wish to include the county drop down because your client wants to know whereabouts in the UK you are without having to look up postcodes. People have also expressed the value of this information from a user point of view giving them added confidence that the address is “full and complete” when they complete their form.

UK counties for <li> dropdown lists

Style 1


  <select name="state" class="form-control selectpicker" >
      <option value=" " >Please select your county</option>
          <option selected>England</option>
          <option>-South East</option>
          <option value="Bedfordshire">--Bedfordshire</option>
          <option value="Berkshire">--Berkshire</option>
          <option value="Buckinghamshire">--Buckinghamshire</option>
          <option value="East Sussex">--East Sussex</option>
          <option value="Essex">--Essex</option>
          <option value="Hampshire">--Hampshire</option>
          <option value="Hertfordshire">--Hertfordshire</option>
          <option value="Isle of Wight">--Isle of Wight</option>
          <option value="Kent">--Kent</option>
          <option value="London">--London</option>
          <option value="Central London">---Central London</option>
          <option value="City of London">----City of London</option>
          <option value="East London">---East London</option>
          <option value="North London">---North London</option>
          <option value="North West London">---North West London</option>
          <option value="South East London">---South East London</option>
          <option value="South West London">---South West London</option>
          <option value="West London">---West London</option>
          <option value="Middlesex">--Middlesex</option>
          <option value="Oxfordshire">--Oxfordshire</option>
          <option value="Surrey">--Surrey</option>
          <option value="West Sussex">--West Sussex</option>
          <option>-South West</option>
          <option value="Avon">--Avon</option>
          <option value="Bristol">--Bristol</option>
          <option value="Cornwall">--Cornwall</option>
          <option value="Devon">--Devon</option>
          <option value="Dorset">--Dorset</option>
          <option value="Gloucestershire">--Gloucestershire</option>
          <option value="NE Somerset">--NE Somerset</option>
          <option value="North Somerset">--North Somerset</option>
          <option value="Somerset">--Somerset</option>
          <option value="South Gloucs">--South Gloucs</option>
          <option value="Wiltshire">--Wiltshire</option>
          <option>-North East</option>
          <option value="Durham">--Durham</option>
          <option value="Northumberland">--Northumberland</option>
          <option value="Teesside">--Teesside</option>
          <option value="Tyne & Wear">--Tyne & Wear</option>
          <option>-North West</option>
          <option value="Cheshire">--Cheshire</option>
          <option value="Cumbria">--Cumbria</option>
          <option value="Isle of Man">--Isle of Man</option>
          <option value="Lancashire">--Lancashire</option>
          <option value="Manchester">--Manchester</option>
          <option value="Merseyside">--Merseyside</option>
          <option value=>-Yorkshire</option>
          <option value="Humberside">--Humberside</option>
          <option value="North Yorkshire">--North Yorkshire</option>
          <option value="South Yorkshire">--South Yorkshire</option>
          <option value="West Yorkshire">--West Yorkshire</option>
          <option value="East Yorkshire">--East Yorkshire</option>
          <option>-East Anglia</option>
          <option value="Cambridgeshire">--Cambridgeshire</option>
          <option value="Norfolk">--Norfolk</option>
          <option value="Suffolk">--Suffolk</option>
          <option>-East Midlands</option>
          <option value="Derbyshire">--Derbyshire</option>
          <option value="Leicestershire">--Leicestershire</option>
          <option value="Lincolnshire">--Lincolnshire</option>
          <option value="Northamptonshire">--Northamptonshire</option>
          <option value="Nottinghamshire">--Nottinghamshire</option>
          <option>-West Midlands</option>
          <option value="Birmingham">--Birmingham</option>
          <option value="Hereford & Worcs">--Hereford & Worcs</option>
          <option value="Shropshire">--Shropshire</option>
          <option value="Staffordshire">--Staffordshire</option>
          <option value="Warwickshire">--Warwickshire</option>
          <option>Scotland</option>
          <option value="Aberdeenshire">-Aberdeenshire</option>
          <option value="Borders">-Borders</option>
          <option value="Dumfries">-Dumfries</option>
          <option value="Edinburgh">-Edinburgh</option>
          <option value="Fife">-Fife</option>
          <option value="Glasgow">-Glasgow</option>
          <option value="Grampian">-Grampian</option>
          <option value="Highlands">-Highlands</option>
          <option value="Lothian">-Lothian</option>
          <option value="Moray">-Moray</option>
          <option value="Stirling">-Stirling</option>
          <option value="Strathclyde">-Strathclyde</option>
          <option>Wales</option>
          <option value="Cardiff">-Cardiff</option>
          <option value="Clwyd">-Clwyd</option>
          <option value="Dyfed">-Dyfed</option>
          <option value="Gwent">-Gwent</option>
          <option value="Gwynedd">-Gwynedd</option>
          <option value="Mid Glamorgan">-Mid Glamorgan</option>
          <option value="Pembrokeshire">-Pembrokeshire</option>
          <option value="Powys">-Powys</option>
          <option value="South Glamorgan">-South Glamorgan</option>
          <option value="Swansea">-Swansea</option>
          <option value="West Glamorgan">-West Glamorgan</option>
          <option value="Wrexham">-Wrexham</option>
          <option value="Channel Islands">Channel Islands</option>
          <option>Northern Ireland</option>
          <option value="Antrim">-Antrim</option>
          <option value="Armagh">-Armagh</option>
          <option value="Belfast">-Belfast</option>
          <option value="Derry">-Derry</option>
          <option value="Down">-Down</option>
          <option value="Fermanagh">-Fermanagh</option>
          <option value="Tyrone">-Tyrone</option>
          <option>Ireland</option>
          <option>-Midlands</option>
          <option value="Kildare">--Kildare</option>
          <option value="Laois">--Laois</option>
          <option value="Longford">--Longford</option>
          <option value="Meath">--Meath</option>
          <option value="Offaly">--Offaly</option>
          <option value="Westmeath">--Westmeath</option>
          <option value="Wicklow">--Wicklow</option>
          <option>-North East</option>
          <option value="Cavan">--Cavan</option>
          <option value="Louth">--Louth</option>
          <option value="Monaghan">--Monaghan</option>
          <option>-North West</option>
          <option value="Donegal">--Donegal</option>
          <option value="Galway">--Galway</option>
          <option value="Leitrim">--Leitrim</option>
          <option value="Sligo">--Sligo</option>
          <option>-South East</option>
          <option value="Carlow">--Carlow</option>
          <option value="Dublin">--Dublin</option>
          <option value="Kilkenny">--Kilkenny</option>
          <option value="Waterford">--Waterford</option>
          <option value="Wexford">--Wexford</option>
          <option>-South West</option>
          <option value="Cork">--Cork</option>
          <option value="Kerry">--Kerry</option>
          <option value="Limerick">--Limerick</option>
          <option value="Tipperary">--Tipperary</option>
          <option>-West</option>
          <option value="Clare">--Clare</option>
          <option value="Mayo">--Mayo</option>
          <option value="Roscommon">--Roscommon</option>
 </select>

 

example:

UK counties for <li> dropdown lists

Style 2


<select name="county">
	<optgroup label="England">
		<option>Avon</option>
		<option>Bedfordshire</option>
		<option>Berkshire</option>
		<option>Buckinghamshire</option>
		<option>Cambridgeshire</option>
		<option>Cheshire</option>
		<option>Cleveland</option>
		<option>Cornwall</option>
		<option>Cumbria</option>
		<option>Derbyshire</option>
		<option>Devon</option>
		<option>Dorset</option>
		<option>Durham</option>
		<option>East Sussex</option>
		<option>Essex</option>
		<option>Gloucestershire</option>
		<option>Hampshire</option>
		<option>Herefordshire</option>
		<option>Hertfordshire</option>
		<option>Isle of Wight</option>
		<option>Kent</option>
		<option>Lancashire</option>
		<option>Leicestershire</option>
		<option>Lincolnshire</option>
		<option>London</option>
		<option>Merseyside</option>
		<option>Middlesex</option>
		<option>Norfolk</option>
		<option>Northamptonshire</option>
		<option>Northumberland</option>
		<option>North Humberside</option>
		<option>North Yorkshire</option>
		<option>Nottinghamshire</option>
		<option>Oxfordshire</option>
		<option>Rutland</option>
		<option>Shropshire</option>
		<option>Somerset</option>
		<option>South Humberside</option>
		<option>South Yorkshire</option>
		<option>Staffordshire</option>
		<option>Suffolk</option>
		<option>Surrey</option>
		<option>Tyne and Wear</option>
		<option>Warwickshire</option>
		<option>West Midlands</option>
		<option>West Sussex</option>
		<option>West Yorkshire</option>
		<option>Wiltshire</option>
		<option>Worcestershire</option>
	</optgroup>
	<optgroup label="Wales">
		<option>Clwyd</option>
		<option>Dyfed</option>
		<option>Gwent</option>
		<option>Gwynedd</option>
		<option>Mid Glamorgan</option>
		<option>Powys</option>
		<option>South Glamorgan</option>
		<option>West Glamorgan</option>
	</optgroup>
	<optgroup label="Scotland">
		<option>Aberdeenshire</option>
		<option>Angus</option>
		<option>Argyll</option>
		<option>Ayrshire</option>
		<option>Banffshire</option>
		<option>Berwickshire</option>
		<option>Bute</option>
		<option>Caithness</option>
		<option>Clackmannanshire</option>
		<option>Dumfriesshire</option>
		<option>Dunbartonshire</option>
		<option>East Lothian</option>
		<option>Fife</option>
		<option>Inverness-shire</option>
		<option>Kincardineshire</option>
		<option>Kinross-shire</option>
		<option>Kirkcudbrightshire</option>
		<option>Lanarkshire</option>
		<option>Midlothian</option>
		<option>Moray</option>
		<option>Nairnshire</option>
		<option>Orkney</option>
		<option>Peeblesshire</option>
		<option>Perthshire</option>
		<option>Renfrewshire</option>
		<option>Ross-shire</option>
		<option>Roxburghshire</option>
		<option>Selkirkshire</option>
		<option>Shetland</option>
		<option>Stirlingshire</option>
		<option>Sutherland</option>
		<option>West Lothian</option>
		<option>Wigtownshire</option>
	</optgroup>
	<optgroup label="Northern Ireland">
		<option>Antrim</option>
		<option>Armagh</option>
		<option>Down</option>
		<option>Fermanagh</option>
		<option>Londonderry</option>
		<option>Tyrone</option>
	</optgroup>
	<optgroup label="Ireland">
		<option>Carlow</option>
		<option>Cavan</option>
		<option>Clare</option>
		<option>Cork</option>
		<option>Donegal</option>
		<option>Dublin</option>
		<option>Galway</option>
		<option>Kerry</option>
		<option>Kildare</option>
		<option>Kilkenny</option>
		<option>Laois</option>
		<option>Leitrim</option>
		<option>Limerick</option>
		<option>Longford</option>
		<option>Louth</option>
		<option>Mayo</option>
		<option>Meath</option>
		<option>Monaghan</option>
		<option>Offaly</option>
		<option>Roscommon</option>
		<option>Sligo</option>
		<option>Tipperary</option>
		<option>Waterford</option>
		<option>Westmeath</option>
		<option>Wexford</option>
		<option>Wicklow</option>
	</optgroup>
</select>

 

example:

 

 

Please share if you find the content useful - thank you

Master Template World

Contact

Master Template Forum Robot

FORUM

Have a comment or something to say?
Say it here…

[privacy policy]