Mon, 2016-06-06 19:50
Hey Folks,
I really need your help here,
I have a html template am working on. Everything worked on well until i decided to change the contact page to a customized contact page suitable for sending of quotes.
when I view the Php contact form alone on my browser it looks good and perfect but when I insert it in the contact page of the template, it contradicts with the contact page and changes some other things on the page. Kindly see below the code:
<style type="text/css"> body{ font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; } p, h1, form, button{border:0; margin:0; padding:0;} .spacer{clear:both; height:1px;} /* ----------- My Form ----------- */ .myform{ margin:0 auto; width:400px; padding:14px; } /* ----------- basic ----------- */ #basic{ border:solid 2px #DEDEDE; } #basic h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } #basic p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #dedede; padding-bottom:10px; } #basic label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #basic .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #basic input{ float:left; width:200px; margin:2px 0 30px 10px; } #basic button{ clear:both; margin-left:150px; background:#888888; color:#FFFFFF; border:solid 1px #666666; font-size:11px; font-weight:bold; padding:4px 6px; } /* ----------- stylized ----------- */ #stylized{ border:solid 2px #b7ddf2; background:#ebf4fb; } #stylized h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } #stylized p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } #stylized label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #stylized .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #stylized input{ float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; margin:2px 0 20px 10px; } #stylized button{ clear:both; margin-left:160px; width:125px; height:31px; background:#444; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; } </style> </head> <body> <div id="stylized" class="myform"> <form id="form1" id="form1" action="mail.php" method="POST"> <label>Name <span class="small">Add your name</span> </label> <input type="text" name="name"> <label>Email <span class="small">Enter a Valid Email</span> </label> <input type="text" name="email"> <label>Phone <span class="small">Add a Phone Number</span> </label> <input type="text" name="phone"> <br /> <br /> <label>Website <span class="small">Your Website</span> </label> <input type="text" name="website"> <label>Budget <span class="small">Select Budget</span> </label> <select name="dropdown" size="1"> <option value="Under 50,000">Under 50,000</option> <option value="Under 100,000">Under 100,000</option> <option value="Under 150,000">Under 150,000</option> <option value="Under 250,000">Under 250,000</option> <option value="Above 250,000">Above 250,000</option> </select> <br /> <br /> <br /> <label>Priority <span class="small">Priority Level</span> </label> <select name="priority" size="1"> <option value="Low">Low</option> <option value="Normal">Normal</option> <option value="High">High</option> <option value="Emergency">Emergency</option> </select> <br /> <br /> <br /> <label>Type <span class="small">Type of Contact</span> </label> <select name="type" size="1"> <option value="update">Website/Graphics</option> <option value="change">Digital Marketing</option> <option value="addition">Database Management</option> <option value="new">Mobile Marketing</option> <option value="update">Training</option> <option value="change">Mobile App Development</option> <option value="addition">System Management</option> <option value="new">Search Engine Optimization</option> <option value="new">Others</option> </select> <br /> <br /> <br /> <label>Message <span class="small">Type Your Message</span> </label> <textarea name="message" rows="6" cols="25"></textarea><br /> <button type="submit" value="Send" style="margin-top:15px;">Submit</button> <div class="spacer"></div> </form> </div> <!-- end of form class -->
The above is for the customized contact page. And the below is for the contact page html
<!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> <head> <!-- Basic Page Needs ================================================== --> <meta charset="utf-8"> <title>21st Empire | The Best Website Design Company In Nigeria, Africa,Lagos, System Administration Company In Nigeria | VoIP, Robocall, Graphics Design Company, Digital Marketing Company, Web Consulting Company In Nigeria, Content Marketing Agency In Nigeria, SEO In Nigeria</title> <meta name="description" content="Free Responsive Html5 Css3 Templates | zerotheme.com"> <meta name="author" content="www.zerotheme.com"> <!-- Mobile Specific Metas ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- CSS ================================================== --> <link rel="stylesheet" href="css/zerogrid.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/lightbox.css"> <!-- Custom Fonts --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/menu.css"> <script src="js/jquery1111.min.js" type="text/javascript"></script> <script src="js/script.js"></script> <!--[if lt IE 8]> <div style=' clear: both; text-align:center; position: relative;'> <a href="http://windows.microsoft.com/en-US/internet-explorer/Items/ie/home?ocid=ie6_countdown_bannercode"> <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /> </a> </div> <![endif]--> <!--[if lt IE 9]> <script src="js/html5.js"></script> <script src="js/css3-mediaqueries.js"></script> <![endif]--> <style type="text/css"> } p, h1, form, button{border:0; margin:0; padding:0;} .spacer{clear:both; height:1px;} /* ----------- My Form ----------- */ .myform{ margin:0 auto; width:400px; padding:14px; } /* ----------- basic ----------- */ #basic{ border:solid 2px #DEDEDE; } #basic h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } #basic p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #dedede; padding-bottom:10px; } #basic label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #basic .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #basic input{ float:left; width:200px; margin:2px 0 30px 10px; } #basic button{ clear:both; margin-left:150px; background:#888888; color:#FFFFFF; border:solid 1px #666666; font-size:11px; font-weight:bold; padding:4px 6px; } /* ----------- stylized ----------- */ #stylized{ border:solid 2px #b7ddf2; background:#ebf4fb; } #stylized h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } #stylized p{ font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } #stylized label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; } #stylized .small{ color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #stylized input{ float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; margin:2px 0 20px 10px; } #stylized button{ clear:both; margin-left:160px; width:125px; height:31px; background:#444; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; } </head> <body> <div class="wrap-body"> <!--////////////////////////////////////Header--> <header class="zerogrid"> <div class="logo"><img src="images/logo.png" alt=""/></div> <div id='cssmenu' class="align-center"> <ul> <li><a href='index.html'><span>Home</span></a></li> <li><a href='portfolio.html'><span>Portfolio</span></a> <ul > </li> </li> </ul> </li> <li><a href='about.html'><span>About</span></a></li> <li><a href='#'><span>Store</span></a></li> <li class='last active'><a href='contact.html'><span>Contacts</span></a></li> </ul> </div> <style type="text/css"> </style> </header> <!--////////////////////////////////////Container--> <section id="container"> <div class="wrap-container"> <div class="zerogrid"> <div class="contact"> <h3>Contact Information</h3> <div class="row"> <div class="col-1-3"> <div class="wrap-col"> <i class="fa fa-home"></i> <h4>Address:</h4> <span>Chief J.A Keshinro Shopping Complex, Gedegede, Off Ilaje Bus-stop, Ajah, Lagos, Nigeria</span> </div> </div> <div class="col-1-3"> <div class="wrap-col"> <i class="fa fa-phone"></i> <h4>Phone:</h4> <span>0706-300-9035</span> </div> </div> <div class="col-1-3"> <div class="wrap-col"> <i class="fa fa-envelope"></i> <h4>Email:</h4> <span>info@21stempire.com</span> </div> </div> </div> <h3>Send Us A Quote</h3> <div id="stylized" class="myform"> <form id="form1" id="form1" action="mail.php" method="POST"> <label>Name <span class="small">Add your name</span> </label> <input type="text" name="name"> <label>Email <span class="small">Enter a Valid Email</span> </label> <input type="text" name="email"> <label>Phone <span class="small">Add a Phone Number</span> </label> <input type="text" name="phone"> <br /> <br /> <label>Website <span class="small">Your Website</span> </label> <input type="text" name="website"> <label>Budget <span class="small">Your Budget</span> </label> <select name="dropdown" size="1"> <option value="Under ₦50,000">Under ₦50,000</option> <option value="Under ₦100,000">Under ₦100,000</option> <option value="Under ₦150,000">Under ₦150,000</option> <option value="Under ₦250,000">Under ₦250,000</option> <option value="Above ₦250,000">Above ₦250,000</option> </select> <br /> <br /> <br /> <label>Priority <span class="small">Priority Level</span> </label> <select name="priority" size="1"> <option value="Low">Low</option> <option value="Normal">Normal</option> <option value="High">High</option> <option value="Emergency">Emergency</option> </select> <br /> <br /> <br /> <label>Type <span class="small">Type of Contact</span> </label> <select name="type" size="1"> <option value="update">Website/Graphics</option> <option value="change">Digital Marketing</option> <option value="addition">Database Management</option> <option value="new">Mobile Marketing</option> <option value="update">Training</option> <option value="change">Mobile App Development</option> <option value="addition">System Management</option> <option value="new">Search Engine Optimization</option> <option value="new">Others</option> </select> <br /> <br /> <br /> <label>Message <span class="small">Type Your Message</span> </label> <textarea name="message" rows="6" cols="25"></textarea><br /> <button type="submit" value="Send" style="margin-top:15px;">Submit</button> <div class="spacer"></div> </form> </div> <!-- end of form class --> </div> </div> </div> </div> </div> </div> </div> </section> <!--////////////////////////////////////Footer--> <footer> <div class="zerogrid"> <div class="wrap-footer"> <div class="row"> <div class="col-1-2"> <div class="wrap-col"> <span class="phone">CALL US:+234-706-300-9035</span><br/> <span>Chief J.A Keshinro Shopping Complex, Gedegede, Off Ilaje Bus-stop, Ajah, Lagos, Nigeria</span><br/> <span>Email: </p> <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%69%6e%66%6f%40%32%31%73%74%65%6d%70%69%72%65%2e%63%6f%6d%22%3e%69%6e%66%6f%40%32%31%73%74%65%6d%70%69%72%65%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p></span><br/> <span>Copyright 2016 - Designed by <a href="http://www.21stempire.com" rel="nofollow" target="_blank">21st Empire</a></span> </div> </div> <div class="col-1-2"> <div class="wrap-col t-right"> <ul class="social-buttons"> <li><a href="#"><i class="fa fa-twitter"></i></a> </li> <li><a href="#"><i class="fa fa-facebook"></i></a> </li> <li><a href="#"><i class="fa fa-google-plus"></i></a> </li> <li><a href="#"><i class="fa fa-linkedin"></i></a> </li> </ul> </ul> </div> </div> </div> </div> </div> </footer> <!-- Google Map --> <script> $('.maps').click(function () { $('.maps iframe').css("pointer-events", "auto"); }); $( ".maps" ).mouseleave(function() { $('.maps iframe').css("pointer-events", "none"); }); </script> </div> </body> </html>
Your contributions would be highly appreciated.