I am creating a contact form for a website and when I open the contact page some of my php code is showing at the top of the page. In the very top left corner of the page, ";} ?> is displayed above my menu.
Here is the php/HTML:
<?php
if($_POST["submit"]) {
$recipient="collin@klopcrete.com";
$subject="Contact Form from klopcrete.com";
$sender=$_POST["sender"];
$senderEmail=$_POST["email"];
$senderPhone=$_POST["phone"];
$senderAddress=$_POST["address"];
$message=$_POST["message"];
$mailBody="Name: $sender\nEmail: $senderEmail\nPhone: $senderPhone\nAddress: $senderAddress\n\n$message";
mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>KC Contact Information </title>
<link type="text/css" rel="stylesheet" href="kc.css" />
<link type="text/css" rel="stylesheet" href="contact.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>
<div class="container">
<div class="menu-btn">
<ul class="smallNav">
<li><a href="#" onClick="showMainMenu()";>Menu</a></li>
<li style="float:right"><a href="#" onClick="showMainMenu()";><img src="images/hamburger.png" height="20" width="40" alt="menu icon" /></a></li>
</ul>
</div>
<div id="links">
<ul id="navMenu">
<li class="nav"><a href="kcweb.htm">Home</a></li>
<li class="nav"><a href="about.htm">About Us</a></li>
<li class="nav"><a href="contact.htm">Contact Us</a></li>
<li class="nav"><a href="#" onClick="showSubMenu()";>Photos</a>
<ul class="submenu">
<li class="gallery"><a href="stamp.htm">Stamped Concrete</a></li>
<li class="gallery"><a href="exposed.htm">Exposed Aggregate</a></li>
<li class="gallery"><a href="stain.htm">Stained Concrete</a></li>
<li class="gallery"><a href="driveway.htm">Driveway/Walkway</a></li>
<li class="gallery"><a href="walls.htm">Walls</a></li>
<li class="gallery"><a href="countertop.htm">Countertops</a></li>
<li class="gallery"><a href="commercial.htm">Commercial</a></li>
</ul>
</li>
</ul>
</div>
<div id="sign">
<p><span>Klopstein Concrete</span><br />
Everything Concrete...</p>
<ul class="socMedia">
<li><a href="https://www.facebook.com/pages/Klopstein-Concrete/256257947822?ref=hl"><img src="images/facebook.png" alt="facebook" /></a></li>
<li><a href="http://www.bbb.org/stlouis/business-reviews/concrete-contractors/klopstein-concrete-in-foley-mo-310436248#reasonrating"><img src="images/bbb.png" alt="better business bereau" /></a></li>
</ul>
</div>
<div id="main">
<div id="info">
<p>Office Phone Number: 636-668-6027</p><br />
<ul class="contact">
<li>Joe Klopstein</li>
<li><i>President</i></li>
<li>Phone Number: 314-574-1244</li>
<li>E-Mail: joe@klopcrete.com</li>
</ul>
<ul class="contact">
<li>Collin Klopstein<li>
<li><i>Vice President</i></li>
<li>Phone Number: 314-574-1187</li>
<li>E-Mail: collin@klopcrete.com</li>
</ul>
<ul class="contact">
<li>Conor Klopstein</li>
<li><i>Vice President</i></li>
<li>Phone Number: 314-220-6070</li>
<li>E-Mail: conor@klopcrete.com</li>
</ul>
<br />
<br />
</div>
<div id="personal">
<form id="contact-form" action="contact.php" method="post">
<p>Fill in the form below, and we'll get back to you within 24 hours.<p>
<div>
<label class="contact-form" >
Name: (required)<br />
<input placeholder="Please enter your name" type="text" name="sender" tabindex="1" required autofocus>
</label>
</div>
<div>
<label class="contact-form">
Email: (required)<br />
<input placeholder="Please enter your email address" type="email" name="email" tabindex="2" required>
</label>
</div>
<div>
<label class="contact-form">
Telephone: (required)<br />
<input placeholder="Please enter your number" type="tel" name="phone" tabindex="3" required>
</label>
</div>
<div>
<label class="contact-form">
Address: (required)<br />
<input placeholder="Please enter your address" type="text" name="address" tabindex="4" required>
</label>
</div>
<div>
<label class="contact-form">
Message: (required)<br />
<textarea placeholder="Include all the details you can" tabindex="5" name="message" required></textarea>
</label>
</div>
<div>
<button name="submit" type="submit" id="contact-submit">Submit</button>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script>
function showSubMenu() {
$('.submenu').toggle('');
}
function showMainMenu() {
$('#navMenu').toggle('');
}
</script>
</body>
</html>
