Hi
I need some help, I can battle my way through CSS and HTML, but when it comes to enquiry forms I am out of my depth...
This is the site I am putting together and the form is in the end column:
http://vicarscafebistro.co.uk/website/contact.html
I tried using this form from here:
http://css-tricks.com/nice-and-simple-contact-form/
But it was far too big and when I tried to make it smaller it was all over the place so currently has no CSS applied to it...
From a layout perspective how can I get the text input fields to stack nicely and all aligned?
From a PHP perspective what have I done to break it? I am testing it with my home email address but it is not working...
Here is my HTML for it:
Code:
<div id="page-wrap">
<div id="contact-area">
<form method="post" action="contactengine.php">
<p><label for="Name">Name:</label>
<input type="text" name="Name" id="Name" /> </p>
<p><label for="City">City:</label>
<input type="text" name="City" id="City" /> </p>
<p><label for="Phone">Email:</label>
<input type="text" name="Phonr" id="Phone" /> </p>
<p><label for="Email">Phone:</label>
<input type="text" name="Email" id="Email" /> </p>
<p> </p>
<p><label for="Message">Comments:</label><br />
<textarea name="Message" rows="5" cols="33" id="Message"></textarea> </p>
<p><input type="submit" name="submit" value="Submit" class="submit-button" />
</form></p>
<div style="clear: both;"></div>
</div>
</div>
There is no CSS as I could not work out what to use, but what they suggested was:
Code:
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(images/stripe.png) repeat;
}
p {
font-size: 1.3em;
margin-bottom: 15px;
}
#page-wrap {
width: 660px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
#contact-area {
width: 600px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: right;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
The PHP They supply is here:
Code:
<?php
$EmailFrom = "chriscoyier@gmail.com";
$EmailTo = "CHANGE-THIS@YOUR-DOMAIN.com";
$Subject = "Nice & Simple Contact Form by CSS-Tricks";
$Name = Trim(stripslashes($_POST['Name']));
$Tel = Trim(stripslashes($_POST['Tel']));
$Email = Trim(stripslashes($_POST['Email']));
$Message = Trim(stripslashes($_POST['Message']));
// validation
$validationOK=true;
if (!$validationOK) {
print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
exit;
}
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Tel: ";
$Body .= $Tel;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
// redirect to success page
if ($success){
print "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">";
}
else{
print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
}
?>
Which I changed to this (I was guessing and it doesn't work)
Code:
<?php
$EmailFrom = "heypresto@blueyonder.co.uk";
$EmailTo = "heypresto@blueyonder.co.uk";
$Subject = "Nice & Simple Contact Form by CSS-Tricks";
$Name = Trim(stripslashes($_POST['Name']));
$City = Trim(stripslashes($_POST['City']));
$Phone = Trim(stripslashes($_POST['Phone']));
$Email = Trim(stripslashes($_POST['Email']));
$Message = Trim(stripslashes($_POST['Message']));
// validation
$validationOK=true;
if (!$validationOK) {
print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
exit;
}
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "City: ";
$Body .= $City;
$Body .= "\n";
$Body .= "Phone: ";
$Body .= $Phone;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Comments: ";
$Body .= $Comments;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
// redirect to success page
if ($success){
print "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">";
}
else{
print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
}
?>
Any help would be much appreciated.... Thanks