Code pour Connectez un formulaire de CONTACT html avec une base de donnee MYSQL en ligne
<?php
$servername = "mysql.hostinger.fr"; // ServerName
$username = "u538269644_hkess";
$password = "superhind2012";
$dbname = "u538269644_pac";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
// set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if(isset($_POST['submit'])){
$nom=$_POST['nom'];
$prenom=$_POST['prenom'];
$email=$_POST['email'];
$message=$_POST['message'];
$sql = "INSERT INTO message (nom,prenom,email,message) VALUES ('$nom','$prenom','$email','$message')";
// use exec() because no results are returned
$conn->exec($sql);
echo "<html> <center> [<font color='blue'> $nom </font>] Message envoyé avec succès !!! </center> </html>";
}
}
catch(PDOException $e)
{
echo $sql . "<br>" . $e->getMessage();
}
$conn = null;
?>
Voici le code HTML
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>NOVTECH S.A</title>
<!-- web-fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- off-canvas -->
<link href="css/mobile-menu.css" rel="stylesheet">
<!-- font-awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Flat Icon -->
<link href="fonts/flaticon/flaticon.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Style CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main-wrapper">
<!-- Page Preloader -->
<div id="preloader">
<div id="status">
<div class="status-mes"></div>
</div>
</div>
<div class="uc-mobile-menu-pusher">
<div class="content-wrapper">
<!-- Header Top -->
<div class="header-top visible-md visible-lg">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4">
<ul class="social-icon">
<li><a href="" class="fa fa-facebook" aria-hidden="true"> </a></li>
<li><a href="" class="fa fa-twitter" aria-hidden="true"> </a></li>
<!-- <li><a href="" class="fa fa-pinterest-p" aria-hidden="true"> </a></li>
<li><a href="" class="fa fa-google-plus" aria-hidden="true"> </a></li>
<li><a href="" class="fa fa-linkedin" aria-hidden="true"> </a></li> -->
</ul>
</div>
<div class="col-sm-12 col-md-8">
<ul class="top-contact pull-right">
<li class="phone"><i class="fa fa-phone-square" aria-hidden="true"></i>+509 2913-1414</li>
<li class="email"><i class="fa fa-envelope" aria-hidden="true"></i>
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=info@novtech-haiti.com&su=SUBJECT&body=BODY&bcc=PutYourEmailHere" target="_blank"> <font color="white"> info@novtech-haiti.com </font> </a>
</li>
<li class="get-a-quote"><a href="#" title="">Get a Quote</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- .navbar-top -->
<nav class="navbar m-menu navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="#navbar-collapse-1">
<ul class="nav navbar-nav navbar-right main-nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li> <!-- about.html -->
<li><a href="#">Services</a></li> <!--services.html -->
<li class="active"><a href="contact.html">Contact</a></li>
<!--
<li class="dropdown dropdown-toggle"><a href="#" data-toggle="dropdown">Plus<span><i class="fa fa-angle-down"></i></span></a>
<ul class="dropdown-menu">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</li> -->
</ul>
</div>
<!-- .navbar-collapse -->
</div>
<!-- .container -->
</nav>
<!-- .nav -->
<section class="single-page-title single-page-title-contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Contact us</h2>
</div>
</div>
</div>
</section>
<!-- .page-title -->
<!-- .page-title -->
<section class="our-location">
<div class="container">
<center>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d528.5546606819804!2d-72.32769130706991!3d18.540344925745614!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8eb9e7f7654ad62b%3A0xc3ff21db38aa375a!2sATIK!5e1!3m2!1sen!2sht!4v1540927438820" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</center>
</div>
</section>
<section class="contact-detail gray-bg">
<div class="container text-left">
<div class="row">
<div class="col-md-4">
<div class="promo-block-wrapper clearfix">
<div class="promo-icon promo-icon-blue">
<i class="fa fa-map-marker"></i>
</div>
<div class="promo-content">
<h3>Office Address</h3>
<address>
30, 1ère ruelle Jeremie <br>
Port au Prince. Haiti
</address>
</div>
</div><!-- /.promo-block-wrapper -->
</div>
<div class="col-md-4">
<div class="promo-block-wrapper clearfix">
<div class="promo-icon promo-icon-yellow">
<i class="fa fa-phone"></i>
</div>
<div class="promo-content">
<h3>Phone Number</h3>
<address>
<abbr title="Phone">Office</abbr> <br>
<abbr title="Phone"> </abbr>+509 2913-1414
</address>
</div>
</div><!-- /.promo-block-wrapper -->
</div>
<div class="col-md-4">
<div class="promo-block-wrapper clearfix">
<div class="promo-icon promo-icon-green">
<i class="fa fa-envelope-o"></i>
</div>
<div class="promo-content">
<h3>Email Address</h3>
<address>
<abbr title="Phone">Mail</abbr> <br>
<a href="#"> info@novtech-haiti.com</a>
</address>
</div>
</div><!-- /.promo-block-wrapper -->
</div>
</div><!-- /.row -->
</div>
</section> <!-- contact-detail -->
<section class="contact-section">
<div class="container">
<div class="section-title text-center">
<h2>If you have any questions or comments, or would just like to say hello,<br>
please feel free to contact us</h2>
</div>
<div class="contact-form mt-50">
<form action="contact.php" method="post" >
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="nameTwo" class="sr-only">Name</label>
<input type="text" class="form-control" required="" id="nameTwo" name="prenom" placeholder="First Name">
</div>
<div class="form-group">
<label for="emailTwo" class="sr-only">Email</label>
<input type="text" class="form-control" required="" id="emailTwo" name="nom" placeholder="Name">
</div>
<div class="form-group">
<label for="emailTwo" class="sr-only">Email</label>
<input type="email" class="form-control" required="" id="emailTwo" name="email" placeholder="Email Address">
</div>
</div> <!-- col-md-4 -->
<div class="col-md-8">
<div class="form-group">
<label for="messageTwo" class="sr-only">Message</label>
<textarea class="form-control" required="" rows="7" placeholder="Write message" name="message" ></textarea>
</div>
</div> <!-- col-md-8 -->
</div><!-- /.row-->
<button type="submit" name="submit" class="btn btn-primary btn-lg pull-right">Send Message</button>
</form>
</div> <!-- contact-form -->
</div>
</section> <!-- contact-section -->
<footer class="footer">
<div class="footer-widget-section">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="footer-logo">
<a href="#"><img class="img-responsive" src="img/logo-footer.png" alt=""></a>
</div>
</div><!-- /.col-sm-4 -->
<div class="col-md-8">
<div class="footer-text">
<p>Mission: Satisfy our customers, offer quality services, provide expert support.</p>
<ul>
<li class="phone"><i class="fa fa-volume-control-phone" aria-hidden="true"></i> +509 2913-1414
<small><i class="fa fa-clock-o" aria-hidden="true"></i> Mon - Fri 8.00 - 16.00h</small></li>
<li class="address">
<address>
<i class="fa fa-map-pin" aria-hidden="true"></i>
30, 1ère ruelle Jeremie, Port au Prince. Haiti
</address>
</li>
</ul>
</div>
</div><!-- .col-sm-4 -->
</div>
</div>
</div><!-- .footer-widget-section -->
<div class="copyright-section">
<div class="container clearfix">
<span class="copytext">Copyright © 2018 | <a href="#"> </a> Designed And Developed By: <strong style="color:#4d6de3">NOVTECCH S.A</strong></span>
<ul class="list-inline pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- .container -->
</div><!-- .copyright-section -->
</footer>
<!-- .footer -->
</div>
<!-- .content-wrapper -->
</div>
<!-- .offcanvas-pusher -->
<div class="uc-mobile-menu uc-mobile-menu-effect">
<button type="button" class="close" aria-hidden="true" data-toggle="offcanvas"
id="uc-mobile-menu-close-btn">×</button>
<div>
<div>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- .uc-mobile-menu -->
</div>
<!-- #main-wrapper -->
<!-- Script -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/mobile-menu.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
Commentaires
Enregistrer un commentaire