Finishing touches to my Booking Form

January 18, 2010 at 22:13:11
Specs: Windows XP
There are a few things I need to know how to do to complete the Booking Form on my website found here: http://www.n-v-m.co.uk/Booking.html

Any help on the below points would be much appreciated:

1- I need to center the labels in line with the multi line text fields... ie. where it says 'Collection Address including Postcode:' I want the label to be a couple of lines higher so that it is lined up with the center of the text area and not lined up with the bottom as it is now. I would have thought this would be an easy fix in Dreamweaver but I cant seem to find a solution!

2- When the form is live I want the text that is entered into the multi line text fields to be the same font/size as the text entered into the single line text fields... Currently they are different fonts/sizes but I don't know how to ammend it.

3- If the 'Is Vehicle roadworthy with full M.O.T.:' field is set 'No' or if the 'I agree with the Terms and Conditions' checkbox has not been checked I want the user to receive an error message telling them these must be set to 'Yes' and 'checked'. All other fields on the form are optional.

4- On completion of the form, instead of the message "Okey! We Are Proceed. Thank You !" I want the browser to redirect to http://www.n-v-m.co.uk/Thankyou.html

I have included the html for the Booking Form below, and the code for the PHP script (sendform.php) that sends the details through to my email address is below that:

Booking Form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>National Vehicle Movements - Booking Form</title>
<style type="text/css">
<!--
body {
background-color: #1d255f;
margin: 0px;
padding: 0px;
}
#apDiv1 {
position:absolute;
width:487px;
height:706px;
z-index:auto;
left: 50%;
top: 433px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
background-position: center;
margin-left: -244px;
}
-->
</style></head>

<body>
<div align="center">
<div id="apDiv1">
<form id="form1" name="form1" method="post" action="sendform.php">

<strong>Company:
<input type="text" name="company" id="Company" />
</strong></p>
<p class="text"><strong>Name:
<input type="text" name="name" id="Name" />
</strong></p>
<p class="text"><strong>Phone Number:
<input type="text" name="phonenum" id="Phone Number" />
</strong></p>
<p class="text"><strong>Email Address:
<input type="text" name="email" id="Email" />
</strong></p>
<p class="text"><strong>Vehicle Make and Model:
<input type="text" name="vmam" id="Vehicle Make and Model" />
</strong></p>
<p class="text"><strong>Vehicle Reg./Ref. No.:
<input type="text" name="vreg" id="Vehicle Reg." />
</strong></p>
<p class="text"><strong>Collection Address including Postcode:
<textarea name="colladd" rows="4" id="Collection Address"></textarea>
</strong></p>
<p class="text"><strong>Collection Contact Name:
<input type="text" name="collconname" id="Collection Contact Name" />
</strong></p>
<p class="text"><strong>Collection Contact Number:
<input type="text" name="collconnum" id="Collection Contact Number" />
</strong></p>
<p class="text"><strong>Delivery Address including Postcode:
<textarea name="deladd" rows="4" id="Delivery Address"></textarea>
</strong></p>
<p class="text"><strong>Delivery Contact Name:
<input type="text" name="delconname" id="Delivery Contact Name" />
</strong></p>
<p class="text"><strong>Delivery Contact Number:
<input type="text" name="delconnum" id="Delivery Contact Number" />
</strong></p>
<p class="text"><strong>Collection Date/Time:
<input type="text" name="collectiondt" id="Collection Date/Time" />
</strong></p>
<p class="text"><strong><em>(if possible please give a time window eg. '7th - 9th August' and we will arrange collection for you)</em></strong></p>
<p class="text"><strong>Delivery Date/Time:
<input type="text" name="deliverydt" id="Delivery Date/Time" />
</strong></p>
<p class="text"><strong><em>(if possible please give a time window eg. '7th - 9th August' and we will arrange delivery for you)</em></strong></p>
<p class="text"><strong>Is Vehicle Taxed:
<select name="Taxed" id="Is Vehicle Taxed">
<option>Yes</option>
<option selected="selected">No</option>
</select>
</strong></p>
<p class="text"><strong>Is Vehicle roadworthy with full M.O.T.:
<select name="Is Vehicle Roadworthy with Full M.O.T." id="Is Vehicle Roadworthy with Full M.O.T.">
<option>Yes</option>
<option selected="selected">No</option>
</select>
</strong></p>
<p class="text"><strong>Billing Address:
<textarea name="billadd" rows="3" id="Billing Address"></textarea>
</strong></p>
<p class="text"><strong><em>(if same as collection or delivery address please enter 'collection' or 'delivery')</em></strong></p>
<p class="text"><strong>Your Customer Ref./Order No. (if any):
<input type="text" name="custordnum" id="Customer Ref./Order No." />
</strong></p>
<p class="text"><strong>Any additional comments:
<textarea name="addcom" rows="3" id="Any additional comments"></textarea>
</strong></p>
<p class="text"><strong>
<input type="checkbox" name="checkbox" id="checkbox" />
I agree with the <u>Terms and Conditions</u></strong></p>
<p class="text"><strong>
<input type="submit" name="button" id="button" value="Submit order" />
<input type="reset" name="button2" id="button2" value="Reset form" />
</strong></p>
</form>

 </p>
</div>
</div>
<div align="center">
<map name="Map" id="Map">
<area shape="rect" coords="475,191,578,206" href="mailto:info@n-v-m.co.uk" alt="Email us" />
<area shape="rect" coords="36,155,158,173" href="index.html" alt="Home" />
<area shape="rect" coords="29,174,151,189" href="Prices.html" alt="Prices" />
</map>
</div>
</body>
</html>

PHP script (sendform.php)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<?php

$Name = $_POST['name']; //senders name

$to = "info@n-v-m.co.uk"; //recipient
$subject = "Order from ".$_POST['company']." (".$_POST['name'].")"; //subject
$message = $_POST['company']."|".$_POST['name']."|".$_POST['phonenum']."|".$_POST['email']."|".$_POST['vmam']."|".$_POST['vreg']."|".$_POST['colladd']."|".$_POST['collconname']."|".$_POST['collconnum']."|".$_POST['deladd']."|".$_POST['delconname']."|".$_POST['delconnum']."|".$_POST['collectiondt']."|".$_POST['deliverydt']."|".$_POST['Taxed']."|".$_POST['billadd']."|".$_POST['custordnum']."|".$_POST['addcom']; //mail body
$from = "NVM Booking Form"; //
$headers = "From: ".$from."\r\n"; //optional headerfields

mail($to, $subject, $message, $headers); //mail command :) you can add any variable here... I know you have so many, but it is possible...
if(mail)
echo "Okey! We Are Proceed. Thank You !";
else
echo "Sorry We Can't Proceed, Please Try After Some Time!";
?>
</BODY>
</HTML>

Cheers

Paul


See More: Finishing touches to my Booking Form

Report •

#1
February 28, 2010 at 07:42:46
Hi,
Looks like you solved your centering issue on the data labels as the label 'Collection Address including Postcode:' appears perfectly in the center next to the input box?

As for the form input field formatting, add this to your style definition section and it will look nice and consistent:

input {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
font-color: #1d255f;
}

textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
font-color: #1d255f;
}


Report •

#2
February 28, 2010 at 08:41:50
For this one:

"...3- If the 'Is Vehicle roadworthy with full M.O.T.:' field is set 'No' or if the 'I agree with the Terms and Conditions' checkbox has not been checked I want the user to receive an error message telling them these must be set to 'Yes' and 'checked'. All other fields on the form are optional...."

You would need to insert Javascript form validation checks.

For the drop-down validation for the M.O.T., it would be something like:

if ( mot == No )
{
alert ( "In order to qualify, you must have a roadworthy vehicle with full M.O.T." );
valid = false;
}

For the check box validation, it would be something like:

if ( agreeToTerms == false )
{
alert ( "You must agree to the Terms & Conditions, please check this box." );
valid = false;
}

Tip: Suggest writing your validating code in the server-side scripts to avoid those that turn off their Javascript in their browsers.


Report •

#3
February 28, 2010 at 08:56:12
Regarding this item #4, have you tried adding a header to your PHP?

header( 'Location: http://www.n-v-m.co.uk/Thankyou.html' ) ;

As long as you aren't sending any text to the browser before that header, this is one possible solution.



Report •
Related Solutions


Ask Question