Hi.
I've been thrown in the deep end with a community shed website when the person who knows HTML bailed out
I have very little knowledge of writing forms - none actually.
I've done my best at writing (plagarising) an application form with no success.
Can someone give me a heads up where I've gone wrong?
This is the application HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Application</title>
<meta content="Alistair" name="author">
<style>
body {
background-color:rgb(102, 255, 255);
}
ul {
list-style-type: none;
display: flex;
margin: 70;
padding: 60;
overflow: hidden;
spacing: 120;
# background-color:rgb(102, 255, 255);
}
li {
float: left;
}
li {
margin-right: 110px;
}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: grey;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body style="margin-left: 0px; width: 1303px;">
<table style="width: 1280px; height: 129px;" border="0">
<tbody>
<tr>
<td style="width: 377.25px; text-align: right;"><img
style="width: 302px; height: 115px;" alt="Logo" src="Images/logo.png"></td>
<td style="width: 560.883px;">
<div style="text-align: center;"><font size="+3"><span
style="font-family: serif;"><span
style="font-family: Helvetica,Arial,sans-serif;">Livingston Community
Shed
<div style="text-align: center;"><small
style="font-family: sans-serif;">Application Form</small><br>
</div>
<font size="+3"><span style="font-family: serif;"><span
style="font-family: Helvetica,Arial,sans-serif;"></span></span></font></span></span></font></div>
<big> <font size="+3"> <font size="+3"><span
style="font-family: serif;"></span></font> </font></big></td>
<td style="width: 402.867px; text-align: left;"><span><img
src="Images/smsa-logo.png" alt="smsa logo"
style="width: 279px; height: 102px;"><br>
</span></td>
</tr>
</tbody>
</table>
<ul>
<li style="font-weight: bold;"><big><a href="index.html">Home</a></big></li>
<li style="font-weight: bold;"><big><a href="about.html">About</a></big></li>
<li style="font-weight: bold;"><big><a href="findus.html">Find Us</a></big></li>
<big> </big>
<li style="font-weight: bold;" class="dropdown"><big> <a
href="javascript:void(0)" class="dropbtn">News</a></big>
<div style="top: 178px; left: 671px;" class="dropdown-content"><a
href="updates.html">Updates</a><a href="projects.html">Projects</a><a
href="gardens.html">Gardens</a><a href="videos.html">Videos</a></div>
</li>
<li style="font-weight: bold;"><big><a href="join.html">Join</a></big></li>
<big> <big> </big> </big>
<li style="font-weight: bold;"><big><a href="contact.html">Contact</a></big></li>
</ul>
<div style="text-align: center;"><!-- ************ End of Headings ************** -->
<br>
<big><big><big><span
style="font-family: Helvetica,Arial,sans-serif; color: rgb(51, 51, 255); font-weight: bold;">Livingston
Community Shed Application Form</span></big></big></big>
</div>
<div style="text-align: center; width: 1199px;"><br>
</div>
<table
style="text-align: left; width: 900px; margin-left: auto; margin-right: auto;"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 464px;">
<form style="margin-left: 0px; width: 410px;"><!-- ************ Forename ************** -->
<div style="margin-left: 0px; width: 391px;">
<div style="text-align: left;"> <label for="fname">First name:</label><br>
</div>
<div style="text-align: left;"><input id="fname" name="fname"
value="" type="text"><br>
<br>
</div>
<!-- ************ Surname ************** -->
<div style="text-align: left;"><label for="sname">Surname:</label><br>
</div>
<div style="text-align: left;"><input id="sname" name="sname"
value="" type="text"><br>
<br>
</div>
<!-- ************ Address 1 ************** -->
<div style="text-align: left;"> <label for="add1">Address 1:</label><br>
</div>
<div style="text-align: left;"><input size="30" id="add1"
name="add1"><br>
<br>
</div>
<!-- ************ Address 2 ************** -->
<div style="text-align: left;"><label for="add2">Address 2:</label><br>
</div>
<div style="text-align: left;"><input size="30" id="add2"
name="add2"><br>
<br>
</div>
<!-- ************ Town ************** -->
<div style="text-align: left;"> <label for="town">Town / City:</label><br>
</div>
<div style="text-align: left;"><input id="town" name="town"
value="" type="text"><br>
<br>
</div>
<!-- ************ Postcode ************** -->
<div style="text-align: left;"><label for="pcode">Postcode:</label><br>
</div>
<div style="text-align: left;"><input size="8" name="pcode"
id="pcode"><br>
<br>
</div>
<!-- ************ email ************** -->
<div style="text-align: left;"><label for="email">Email:<br>
<input id="email" name="email" type="email"><br>
</label></div>
<!-- ************ Phone number ************** -->
<div style="text-align: left;"><label for="phone">Phone Number:</label><br>
</div>
<div style="text-align: left;"><input size="15" name="phone"
id="phone" type="tel"><br>
<br>
</div>
<!-- ************ Birthday ************** -->
<div style="text-align: left;"><label for="bday">Date of Birth:</label><br>
</div>
<div style="text-align: left;"><input size="8" id="bday"
name="bday" value="" type="date"><br>
<br>
</div>
</div>
</form>
</td>
<td style="vertical-align: top; width: 632px;">
<form style="width: 529px;"> <label for="cname">Contact name:</label><br>
<input id="cname" name="cname" value="" type="text"><br>
<br>
<label for="relat">Relationship:</label><br>
<input id="relat" name="relat" value="" type="text"> <br>
<br>
<label for="cphone">Contact Phone Number:</label><br>
<input id="cphone" name="cphone" type="tel"> <span
style="font-weight: bold;"><br>
<br>
</span>
<div><label for="allergy">Please list any allergies you may
have:<br>
</label>
<div style="text-align: left; margin-left: 0px; width: 978px;"
class="fcf-input-group"> <textarea cols="30" id="allergy"
name="allergy" class="fcf-form-control" rows="5" maxlength="1000"
required=""></textarea> </div>
<br>
<label for="skill">Please list any skills/interests which may
be useful to the shed:</label><br>
<div style="text-align: left; margin-left: 0px; width: 978px;"
class="fcf-input-group"> <textarea cols="30" id="skill" name="skill"
class="fcf-form-control" rows="5" maxlength="1000" required=""></textarea>
</div>
<br>
</div>
</form>
</td>
</tr>
</tbody>
</table>
<table
style="text-align: left; width: 950px; margin-left: auto; height: 31px; margin-right: auto;"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 874px;"><input id="permit"
name="permit" value="No" type="checkbox"> <label for="permit">May we
include a summary of this and a photo in the member’s section of the
website?</label><br>
</td>
</tr>
</tbody>
</table>
<table
style="text-align: left; height: 151px; margin-right: auto; width: 950px; margin-left: auto;"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td colspan="1" rowspan="1"
style="vertical-align: top; text-align: center; width: 950px;">
<p style="line-height: 100%; margin-bottom: 0cm;" align="left"><font
style="font-size: 14pt;" size="4"><b>Constitution acceptance</b></font></p>
<span style="font-weight: bold;"></span>
<p style="line-height: 100%; margin-bottom: 0cm;" align="left"><font
style="font-size: 12pt;" size="3"><input id="perm" name="agree"
value="No" type="checkbox"> <label for="agree">I
agree to abide by the constitution of the Livingston Community Shed, a
copy of which is held in the shed
and on this Website.</label><br>
</font><br>
</p>
<p style="line-height: 100%; margin-bottom: 0cm;" align="left"><font
style="font-size: 12pt;" size="3"><input id="smsa" name="smsa"
value="No" type="checkbox"><label for="smsa">By
applying, I also agree to abide by the Scottish Men’s Sheds Association
(SMSA) Constitution and Purposes to which we are affiliated with group
membership.</label></font></p>
<form style="margin-top: 16px; height: 55px;" enctype="text/plain"
method="post" action="/application.php"> <input
style="height: 50px; width: 70px;" value="Submit" align="middle"
type="submit"><br>
<!-- **** If you click the "Submit" button, the form-data will be sent to a page called "/application.php **** -->
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The PHP page that accompanies it is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<?php if (isset($_POST['Email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "
[email protected]";
$email_subject = "New Application Request.";
function problem($error)
{
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br><br>";
echo $error . "<br><br>";
echo "Please go back and fix these errors.<br><br>";
die();
}
// validation expected data exists
if (
!isset($_POST['fname']) ||
!isset($_POST['sname']) ||
!isset($_POST['email']) ||
!isset($_POST['bday']) ||
!isset($_POST['agree']) ||
!isset($_POST['smsa'])
) {
problem('We are sorry, but there appears to be a problem with the form you submitted.');
}
$fname = $_POST['fname']; // required
$sname = $_POST['sname']; // required
$email = $_POST['email']; // required
$fname = $_POST['bday']; // required
$sname = $_POST['agree']; // required
$email = $_POST['smsa']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if (!preg_match($email_exp, $email)) {
$error_message .= 'The Email address you entered does not appear to be valid.<br>';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if (!preg_match($string_exp, $fname)) {
$error_message .= 'The Name you entered does not appear to be valid.<br>';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if (!preg_match($string_exp, $sname)) {
$error_message .= 'The Name you entered does not appear to be valid.<br>';
}
$string_exp = "";
if(!preg_match($string_exp,$bday)) {
$error_message .= 'You did not choose a date.<br />';
}
if (isset($_POST['agree'])) {
// Checkbox is checked
} else {
$error_message .= 'You did not agree to the constitution.<br>';
}
if (isset($_POST['smsa'])) {
// Checkbox is checked
} else {
$error_message .= 'You did not agree to the SMSA rules.<br>';
}
$email_message = "Form details below.\n\n";
function clean_string($string)
{
$bad = array("content-type", "bcc:", "to:", "cc:", "href");
return str_replace($bad, "", $string);
}
$email_message .= "Foreame: " . clean_string($fname) . "\n";
$email_message .= "Surname: " . clean_string($sname) . "\n";
$email_message .= "Address1: " . clean_string($add1) . "\n";
$email_message .= "Address2: " . clean_string($add2) . "\n";
$email_message .= "Town: " . clean_string($town) . "\n";
$email_message .= "Postcode: " . clean_string($pcode) . "\n";
$email_message .= "Email: " . clean_string($email) . "\n";
$email_message .= "Phone Number: " . clean_string($phone) . "\n";
$email_message .= "Date of Birth: " . clean_string($bday) . "\n";
$email_message .= "Contact Name: " . clean_string($cname) . "\n";
$email_message .= "Relationship: " . clean_string($relat) . "\n";
$email_message .= "Contact Phone: " . clean_string($cphone) . "\n";
$email_message .= "Allergies: " . clean_string($allergy) . "\n";
$email_message .= "Skills: " . clean_string($skill) . "\n";
$email_message .= "Page Permission: " . clean_string($permit) . "\n";
$email_message .= "Abide by LCS Rules: " . clean_string($agree) . "\n";
$email_message .= "Abide by SMSA Rules: " . clean_string($smsa) . "\n";
// create email headers
$headers = 'From: ' . $email . "\r\n" .
'Reply-To: ' . $email . "\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?><!-- include your success message below -->
<title>Application.php</title>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(102, 255, 255);"
alink="#000099" link="#000099" vlink="#990099">
<br>
<div style="text-align: center;"><?php }
?>
<br>
<br>
<big>Thank you for your application. We will be in touch with you
very soon.
<br>
</big>
</div>
<div style="text-align: center;"><big><a href="index.html"><br>
Back to Home page</a></big><br>
</div>
</body>
</html>
