I am having a odd problem with my form page I have coded it and now whenever I try and link my social media sites the last site makes the whole form the link to it I have tried changing the css of the website but it does not change anything and if I link the social media below the form it puts the form and the social media in the same box regardless of using the <p> tag to separate them.
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cromika Web Designs - Contact</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
function checkForm() {
var theName = document.getElementById('name').value;
var theEmail = document.getElementById('email').value;
var theMessage = document.getElementById('message');
var emailerr = document.getElementById('emailspan');
var nameerr = document.getElementById('namespan');
var messageerr = document.getElementById('messagespan');
var message;
var myregex = /\S+@\S+\.\S+/;
if(theName==""){
message = 'Name is required;';
document.form1.name.focus();
nameerr.innerHTML = message;
return false;
} else{
nameerr.innerHTML ="";
}
if(theEmail=="") {
message = 'Email is required;';
document.form1.email.focus();
emailerr.innerHTML = message;
return false;
} else if (!myregex.test(theEmail)){
emailerr.innerHTML = "Your email entry is invalid;";
document.form1.email.focus();
return false;
} else {
emailer.innerHTML ="";
}
if(theMessage.value=="" || theMessage.value ==null || theMessage.value.indexOf('
') > 0) {
message = 'Please enter your message;';
document.form1.message.focus();
messageerr.innerHTML = message;
return false;
} else {
messageerr.innerHTML = "";
}
}
</script>
<style>
</style>
</head>
<body>
<header><img src="images/simple-logo.png" alt="Cromika Web Designs logo"</img> </header>
<nav>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html" class="current">About</a></li>
<li><a href="contact.php" class="current">Contact</a></li>
<li><a href="gallery.html" class="current">Gallery</a></li>
<li><a href="resume.html" class="current">Resume</a></li>
</ul>
</nav>
<h1> Contact me!</h1>
<?php
if(isset($_POST['send_email'])){
// collect the form values
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// set the email properties
$to = 'matthewc57@yahoo.com';
$subject = "Contact Form Submission";
$from = $email;
$headers = "From: $from";
// attempt to send the mail, catch errors if they occur
try {
mail($to, $subject, $message, $headers);
$msg = "<strong>Your mail was sent successfully!</strong>";
} catch(Exception $e) {
$msg = "An Exception was thrown: ".$e -> getMessage()."<br>";
}
}
?>
<p>
Social Media Links!
<a href="https://www.facebook.com/"><br>
<img src="images/FB-f-Logo__blue_29.png">
<a href="https://twitter.com/">
<img src="images/TwitterLogo.png" width="29px" height="29px"><br>
<a href="https://www.behance.net/">
<img src="images/PbyBehance-vertical-60px.png"><br>
</p>
<table align="left">
<form name="form1" method="post" action="<?php $_SERVER['PHP_SELF']?>" onSubmit="return checkForm()">
<tr> <th>Name:</th>
<td><input type="text" name="name" id="name" /><br><span style="color:red;" id="namespan"></span>
</td>
</tr>
<tr> <th>Email:</th>
<td><input type="text" name="email" id="email" /><br><span style="color:red;" id="emailspan"></span>
</td>
</tr>
<tr> <th>Message:</th>
<td><textarea name="message" id="message"></textarea><br><span style="color:red;" id="messagespan"></span>
</td>
</tr>
<tr> <td></td><td><input type="submit" name="send_email" value="Send Email Message" /></td></tr>
</form>
</table>
<p>
</p>
<footer>Created by - for on 11/13/2015</footer>
</body>
</html>
and the css
@charset "UTF-8";
/* CSS Document */
body{
font-size:16px;
cursor:default;
font-family:Georgia, serif;
background-color:#000000;
color: white;
}
header {
border-radius: 5px;
text-align: center;
margin-top: 12px;
height: 71px;
}
nav {
border-radius: 5px;
height: 20px;
width: auto;
display: block;
text-align:center;
padding-right: 35px;
color: #ffffff;
font-weight:bold;
background-color:#8000aa;
padding-top: .05px;
padding-bottom: 20px;
margin-top: 12px;
margin-bottom: 12px;}
nav li {
display: inline;
float: center;
}
nav a {
display: block, inline;
width: 60px;
}
/*link styles*/
a:link {
text-decoration: none;
}
a:visited {
text-decoration: underline;
color: white;
}
a:hover {
text-decoration: underline;
color: blue;
}
a:active {
text-decoration: underline;
}
/* end link styles */
/* main content */
h1 {
border-radius: 5px;
width: auto;
margin: 0 auto;
text-align: center;
margin-bottom: 12px;
background-color: #8000aa;}
table {
border-radius: 5px;
width: 100%;
height: auto;
margin: 0 auto;
padding-top:12px;
padding-bottom:12px;
margin-bottom: 12px;
background-color: #8000aa;
}
p {
border-radius: 5px;
width: auto;
height: auto;
margin: 0 auto;
text-align: center;
padding-top:12px;
padding-bottom:12px;
margin-bottom: 12px;
background-color: #8000aa;}
p a {
font-weight: bold;
}
/* end main content*/
footer {
border-radius: 5px;
clear: both;
text-align: center;
padding-top:12px;
padding-bottom:12px;
margin-bottom: 12px;
font-weight:bold;
background-color:#8000aa;}
