I am following a tutorial for creating a contact form with PHP, HTML, and CSS. This is my first time using php and I am having some trouble. The tutorial is here. When I try to submit the form to check the error messages, nothing seems to happen. I have no idea whats wrong and have been trying to solve this all day. Any help would be greatly appreciated. The code is for a landing page for a full website that I've been working on.
Here is the HTML and CSS for the code:
body {
font-family:"Open Sans", Helvetica, Arial, sans-serif;
font-weight:300;
font-size: 12px;
line-height:30px;
color:#777;
}
.emailcontainer {
max-width:400px;
width:100%;
margin:0 auto;
position:relative;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
#contact {
background:#F9F9F9;
padding:25px;
margin:50px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 30px;
font-weight: 400;
}
#contact h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}
#contact textarea {
height:100px;
max-width:100%;
resize:none;
}
#contact button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#0CF;
color:#FFF;
margin:0 0 5px;
padding:10px;
font-size:15px;
}
#contact button[type="submit"]:hover {
background:#09C;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
.
<!DOCTYPE html>
<head>
<title> Fiber Optics Engineering Solutions Landing Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<meta name="description" content="Specializing in upgrading and installing optimized fiber optic networks. Upgrade your infrastructure network to the speed of light.">
<meta name="author" content="Angelo Rodriguez | Apollo Visual Arts">
<meta name="keywords" content= "Fiber, Optics, Internet, Upgrade, Speed, Networking, Solutions, Fast, Copper">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="Statement"> <h7>Thanks for visiting Fiber Optic Engineering Solutions. Our full site is currently under maintenance</h7>
</div>
<div class="fold">
<!-- This div is for the landing page pics and log at the upper area of the fold -->
<div class="fold_high">
<img id="Logo" src="media/Logo.svg" alt="Fiber Optic Engineering Solutions">
<div class="fold_pics">
<img id="pic3" src="media/Landing_Page_Pics/Buildings%20Pic.png" alt="pic3">
<img id="pic2" src="media/Landing_Page_Pics/Hardware%20Pic.png" alt="pic2">
<img id="pic1" src="media/Landing_Page_Pics/Data%20Pic.png" alt="data_pic">
</div>
<h4>
UPGRADING YOUR NETWORK TO THE SPEED OF LIGHT
</h4>
<ul>
<li>Interested in improving the overall performance of your network?</li>
<li>We engineer internal fiber optic networks for any property.</li>
<li>Maximize the potential of your band width and improve the overall quality of your infrasturcture with <i>Turnkey E.F.I.</i></li>
</ul>
<h3>WORK WITH US</h3>
<img id="arrow"
src="media/Arrow_down.png"
alt="Arrow Down">
</div>
</div>
<?php include('form_process.php'); ?>
<div class="Under_fold">
<div class="container">
<form id="contact" action="<?= $_SERVER['PHP SELF']; ?>" method="POST">
<h3>Get in Touch With Us</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" name="name" value="<?= $name ?>" autofocus>
<span class="error"><?=$name_error ?></span>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="text" tabindex="2" name="email" >
<span class="error"><?=$email_error ?></span>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" type="text" tabindex="3" name="phone" >
<span class="error"><?=$phone_error ?></span>
</fieldset>
<fieldset>
<input placeholder="Business Name" type="text" name="bus_name" tabindex="4">
<span class="error"><?=$bus_name_error ?></span>
</fieldset>
<fieldset>
<textarea placeholder="Comments or Questions? Type your Message Here...." type="text" name="message" tabindex="5" ></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</div>
</body>
And here is the code for the php processing page:
<?php
print_r ($_POST);
// define variables and set to empty values
$name_error = $email_error = $phone_error = $bus_name_error = "";
$name = $email = $phone = $message = $bus_name = $success = "";
//form is submitted with POST method
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$name_error = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$name_error = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$email_error = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$email_error = "Invalid email format";
}
}
if (empty($_POST["phone"])) {
$phone_error = "Phone is required";
} else {
$phone = test_input($_POST["phone"]);
// check if e-mail address is well-formed
if (!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i",$phone)) {
$phone_error = "Invalid phone number";
}
}
if (empty($_POST["bus_name"])) {
$bus_name_error = "";
} else {
$url = test_input($_POST["bus_name"]);
// check if URL address syntax is valid (this regular expression also allows dashes in the URL)
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$url)) {
$bus_name_error = "Invalid Business Name";
}
}
if (empty($_POST["message"])) {
$message = "";
} else {
$message = test_input($_POST["message"]);
}
if ($name_error == '' and $email_error == '' and $phone_error == '' and $url_error == '' ){
$message_body = '';
unset($_POST['submit']);
foreach ($_POST as $key => $value){
$message_body .= "$key: $value\n";
}
$to = 'angelo.rodriguez150@gmail.com';
$subject = 'Contact Form Submit';
if (mail($to, $subject, $message)){
$success = "Message sent, thank you for contacting us!";
$name = $email = $phone = $message = $bus_name = '';
}
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
Any help would be greatly appreciated, thanks in advance. Sorry if the code is a little unorganized.
