twinsen60 | Bonjour,
Voilà, je fais un site pour une entreprise, et j'ai un formulaire de contact (nom, téléphone, mail, message), et le contenu me reviens sur mon mail.
Cela marche bien, sauf que dans mon mail, j'ai des caractères étrange a la place des accents.
Je ne sais pas quoi modifié par rapport à çà. Mes fichiers (HTML, PHP, et JS sont en UTF8)
Merci d'avance
Si vous avez une autre solution dans le même genre qui prends les accents, je suis preneur aussi.
Voici les codes:
HTML:
Code :
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Mon site Internet</title>
- <meta charset = "UTF-8">
- <meta name="description" content="Your description">
- <meta name="keywords" content="Your keywords">
- <meta name="author" content="Your name">
- <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
- <link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">
- <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
- <link rel="icon" type="image/png" href="img/ico/favicon.png" />
- <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="img/ico/favicon.ico" /><![endif]-->
- <link rel="apple-touch-icon" sizes="57x57" href="img/ico/apple-icon-57x57.png">
- <link rel="apple-touch-icon" sizes="60x60" href="img/ico/apple-icon-60x60.png">
- <link rel="apple-touch-icon" sizes="72x72" href="img/ico/apple-icon-72x72.png">
- <link rel="apple-touch-icon" sizes="76x76" href="img/ico/apple-icon-76x76.png">
- <link rel="apple-touch-icon" sizes="114x114" href="img/ico/apple-icon-114x114.png">
- <link rel="apple-touch-icon" sizes="120x120" href="img/ico/apple-icon-120x120.png">
- <link rel="apple-touch-icon" sizes="144x144" href="img/ico/apple-icon-144x144.png">
- <link rel="apple-touch-icon" sizes="152x152" href="img/ico/apple-icon-152x152.png">
- <link rel="apple-touch-icon" sizes="180x180" href="img/ico/apple-icon-180x180.png">
- <link rel="icon" type="image/png" sizes="192x192" href="img/ico/android-icon-192x192.png">
- <link rel="icon" type="image/png" sizes="32x32" href="img/ico/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="96x96" href="img/ico/favicon-96x96.png">
- <link rel="icon" type="image/png" sizes="16x16" href="img/ico/favicon-16x16.png">
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/superfish.js"></script>
- <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
- <script src="js/forms.js"></script>
- <script>
- jQuery(window).load(function() {
- jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function (){jQuery(this).css('display','none')});
- });
- </script>
- <!--[if lt IE 8]>
- <div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/></a></div>
- <![endif]-->
- <!--[if (gt IE 9)|!(IE)]><!-->
- <!--<![endif]-->
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
- <![endif]-->
- </head>
- <body>
- <div class="spinner"></div>
- <!--=== header ===-->
- <header>
- <div class="container clearfix">
- <div class="row">
- <div class="span12">
- <div class="navbar navbar_">
- <div class="container">
- <h1 class="brand brand_"><a href="index.html"><img alt="" src="img/logo2.png"> </a></h1>
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse_">Menu <span class="icon-bar"></span> </a>
- <div class="nav-collapse nav-collapse_ collapse">
- <ul class="nav sf-menu">
- <li><a href="index.html">Accueil</a></li>
- <li><a href="realisations.html">Nos réalisations</a></li>
- <li><a href="photos.html">Galleries photos</a></li>
- <li><a href="atelier.html">Notre atelier</a></li>
- <li class="active"><a href="contact.html">Nous contacter</a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </header>
- <div class="bg-content">
- <!--=== content ===-->
- <div id="content">
- <div class="container">
- <div class="row">
- <article class="span6">
- <h3>Nous Contacter</h3>
- <div class="inner-1">
- <form id="contact-form">
- <div class="success"> Message Envoyé ! <strong>Nous vous contacterons prochainement.</strong> </div>
- <fieldset>
- <div>
- <label class="name">
- <input type="text" value="Nom">
- <br>
- <span class="error">*Ce n'est pas un nom.</span> <span class="empty">*Champ requis.</span> </label>
- </div>
- <div>
- <label class="phone">
- <input type="tel" value="Téléphone">
- <br>
- <span class="error">*Ce n'est pas un numéro de téléphone.</span> <span class="empty">*Champ requis.</span> </label>
- </div>
- <div>
- <label class="email">
- <input type="email" value="E-mail">
- <br>
- <span class="error">*Ce n'est pas une adresse E-mail.</span> <span class="empty">*Champ requis.</span> </label>
- </div>
- <div>
- <label class="message">
- <textarea>Message</textarea>
- <br>
- <span class="error">*Le message est trop court.</span> <span class="empty">*Champ requis.</span> </label>
- </div>
- <div class="buttons-wrapper"> <a class="btn btn-1" data-type="reset">Effacer</a> <a class="btn btn-1" data-type="submit">Envoyer</a></div>
- </fieldset>
- </form>
- </div>
- </article>
- <article class="span6">
- <h3>Nous situer</h3>
- <span style="color: white">Entreprise</span><br>
- <span style="color: white">Rue du soleil</span><br>
- <span style="color: white">99 999 Lac Bleur</span><br><br>
- <address class="address-1">
- <div class="overflow">
- <span>Bureau:</span><span style="color: white">00.00.00.00.00</span><br>
- <span>Fax:</span><span style="color: white">00.00.00.00.00</span><br>
- <span>Portable:</span><span style="color: white">00.00.00.00.00</span><br>
- <span>E-mail:</span><a href="mailto:monsite@orange.fr" class="mail-1">monsite@orange.fr</a><br>
- </address>
- <h3>Horaires d'ouverture:</h3>
- <span style="color: white">8h-12h / 13h-17h</span><br>
- <h3>Horaires de fermeture:</h3>
- <span style="color: white">samedi et dimanche</span><br>
- </article>
- </div>
-
- </div>
-
- </div><!--fin de row-->
- <div class="container">
- <div class="row">
- <article class="span12">
- <div class="map_area">
- <div id='map-canvas' ></div><br>
- </div>
- </article>
- </div>
- </div>
- </div>
- </div>
- <!--=== footer ===-->
- <footer>
- <div class="container clearfix">
- <ul class="list-social pull-right">
- <li><a href="index.html"><img alt="" src="img/logo3.png"> </a></h1></li>
- </ul>
- <div class="privacy pull-left">2016 - Mon site Internet</div>
- </div>
- </footer>
- <script type="text/javascript" src="js/bootstrap.js"></script>
- <!-- Google Map js -->
- <!--<script src="https://maps.googleapis.com/maps/api/js"></script>-->
- <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MYAPIKEY&exp&sensor=false&libraries=places">sensor=false"></script> <!-- Google Maps API -->
- <script>
- var map; // Google map object
- // Initialize and display a google map
- function Init()
- {
- // Create a Google coordinate object for where to center the map
- var latlngDC = new google.maps.LatLng( 0.0, 0.0 ); // Coordinates of Washington, DC (area centroid)
- // Map options for how to display the Google map
- var mapOptions = { zoom: 16, center: latlngDC };
- // Show the Google map in the div with the attribute id 'map-canvas'.
- map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
- // Place a standard Google Marker at the same location as the map center (Washington, DC)
- // When you hover over the marker, it will display the title
- var marker = new google.maps.Marker( {
- position: latlngDC,
- map: map,
- icon: 'img/logomarker.png',
- animation: google.maps.Animation.BOUNCE // set marker to bounce
- });
- }
- // Call the method 'Init()' to display the google map when the web page is displayed ( load event )
- google.maps.event.addDomListener( window, 'load', Init );
- </script>
- <style>
- /* style settings for Google map */
- #map-canvas
- {
- width : 100%; /* map width */
- height: 370px; /* map height */
- }
- </style>
- </body>
- </html>
|
forms.js:
Code :
- //forms
- ;(function($){
- $.fn.forms=function(o){
- return this.each(function(){
- var th=$(this)
- ,_=th.data('forms')||{
- errorCl:'error',
- emptyCl:'empty',
- invalidCl:'invalid',
- notRequiredCl:'notRequired',
- successCl:'success',
- successShow:'4000',
- mailHandlerURL:'bat/MailHandler.php',
- ownerEmail:'mailreponse@orange.fr',
- stripHTML:true,
- smtpMailServer:'localhost',
- targets:'input,textarea',
- controls:'a[data-type=reset],a[data-type=submit]',
- validate:true,
- rx:{
- ".name":{rx:/^[a-zàáâãäåçèéêëìíîïðòóôõöùúûüýÿ][a-zàáâãäåçèéêëìíîïðòóôõöùúûüýÿ\' -]+[a-zàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]$/i,target:'input'},
- ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
- ".email":{rx:/^(("[\w-\s]+" )|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+" )([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
- ".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
- ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
- ".message":{rx:/.{20}/,target:'textarea'}
- },
- preFu:function(){
- _.labels.each(function(){
- var label=$(this),
- inp=$(_.targets,this),
- defVal=inp.val(),
- trueVal=(function(){
- var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
- return defVal==''?defVal:tmp
- })()
- trueVal!=defVal
- &&inp.val(defVal=trueVal||defVal)
- label.data({defVal:defVal})
- inp
- .bind('focus',function(){
- inp.val()==defVal
- &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
- })
- .bind('blur',function(){
- _.validateFu(label)
- if(_.isEmpty(label))
- inp.val(defVal)
- ,_.hideErrorFu(label.removeClass(_.invalidCl))
- })
- .bind('keyup',function(){
- label.hasClass(_.invalidCl)
- &&_.validateFu(label)
- })
- label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
- })
- _.success=$('.'+_.successCl,_.form).hide()
- },
- isRequired:function(el){
- return !el.hasClass(_.notRequiredCl)
- },
- isValid:function(el){
- var ret=true
- $.each(_.rx,function(k,d){
- if(el.is(k))
- ret=d.rx.test(el.find(d.target).val())
- })
- return ret
- },
- isEmpty:function(el){
- var tmp
- return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
- },
- validateFu:function(el){
- el.each(function(){
- var th=$(this)
- ,req=_.isRequired(th)
- ,empty=_.isEmpty(th)
- ,valid=_.isValid(th)
- if(empty&&req)
- _.showEmptyFu(th.addClass(_.invalidCl))
- else
- _.hideEmptyFu(th.removeClass(_.invalidCl))
- if(!empty)
- if(valid)
- _.hideErrorFu(th.removeClass(_.invalidCl))
- else
- _.showErrorFu(th.addClass(_.invalidCl))
- })
- },
- getValFromLabel:function(label){
- var val=$('input,textarea',label).val()
- ,defVal=label.data('defVal')
- return label.length?val==defVal?'nope':val:'nope'
- }
- ,submitFu:function(){
- _.validateFu(_.labels)
- if(!_.form.has('.'+_.invalidCl).length)
- $.ajax({
- type: "POST",
- url:_.mailHandlerURL,
- data:{
- name:_.getValFromLabel($('.name',_.form)),
- email:_.getValFromLabel($('.email',_.form)),
- phone:_.getValFromLabel($('.phone',_.form)),
- fax:_.getValFromLabel($('.fax',_.form)),
- state:_.getValFromLabel($('.state',_.form)),
- message:_.getValFromLabel($('.message',_.form)),
- owner_email:_.ownerEmail,
- stripHTML:_.stripHTML
- },
- success: function(){
- _.showFu()
- }
- })
- },
- showFu:function(){
- _.success.slideDown(function(){
- setTimeout(function(){
- _.success.slideUp()
- _.form.trigger('reset')
- },_.successShow)
- })
- },
- controlsFu:function(){
- $(_.controls,_.form).each(function(){
- var th=$(this)
- th
- .bind('click',function(){
- _.form.trigger(th.data('type'))
- return false
- })
- })
- },
- showErrorFu:function(label){
- label.find('.'+_.errorCl).slideDown()
- },
- hideErrorFu:function(label){
- label.find('.'+_.errorCl).slideUp()
- },
- showEmptyFu:function(label){
- label.find('.'+_.emptyCl).slideDown()
- _.hideErrorFu(label)
- },
- hideEmptyFu:function(label){
- label.find('.'+_.emptyCl).slideUp()
- },
- init:function(){
- _.form=_.me
- _.labels=$('label',_.form)
- _.preFu()
- _.controlsFu()
- _.form
- .bind('submit',function(){
- if(_.validate)
- _.submitFu()
- else
- _.form[0].submit()
- return false
- })
- .bind('reset',function(){
- _.labels.removeClass(_.invalidCl)
- _.labels.each(function(){
- var th=$(this)
- _.hideErrorFu(th)
- _.hideEmptyFu(th)
- })
- })
- _.form.trigger('reset')
- }
- }
- _.me||_.init(_.me=th.data({forms:_}))
- typeof o=='object'
- &&$.extend(_,o)
- })
- }
- })(jQuery)
- $(window).load(function(){
- $('#contact-form').forms({
- ownerEmail:'mailreponse@orange.fr'
- })
- })
|
mailhander.php :
Code :
- <?php
- $owner_email = $_POST["owner_email"];
- $headers = "MIME-Version: 1.0\r\n";
- $headers = "\nContent-Type: text/plain; charset=iso-8859-1" // Type MIME
- $headers = 'From:' . $_POST["email"];
- $subject = 'Message de Mon site internet';
- $messageBody = "";
- if($_POST['name']!='nope'){
- $messageBody .= '<p>Nom: ' . $_POST["name"] . '</p>' . "\n";
- $messageBody .= '<br>' . "\n";
- }
- if($_POST['email']!='nope'){
- $messageBody .= '<p>E-mail: ' . $_POST['email'] . '</p>' . "\n";
- $messageBody .= '<br>' . "\n";
- }else{
- $headers = '';
- }
- if($_POST['state']!='nope'){
- $messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";
- $messageBody .= '<br>' . "\n";
- }
- if($_POST['phone']!='nope'){
- $messageBody .= '<p>Téléphone: ' . $_POST['phone'] . '</p>' . "\n";
- $messageBody .= '<br>' . "\n";
- }
- if($_POST['fax']!='nope'){
- $messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";
- $messageBody .= '<br>' . "\n";
- }
- if($_POST['message']!='nope'){
- $messageBody .= '<p>Message: ' . '</p>' . "\n";
- $messageBody .= '<br>' . "\n";
- $messageBody .= '<p>'. $_POST['message'] . '</p>' . "\n";
- }
- if($_POST["stripHTML"] == 'true'){
- $messageBody = strip_tags($messageBody);
- }
- try{
- if(!mail($owner_email, $subject, $messageBody, $headers)){
- throw new Exception('mail failed');
- }else{
- echo 'mail sent';
- }
- }catch(Exception $e){
- echo $e->getMessage() ."\n";
- }
- ?>
|
---------------
L'amour c'est comme le jardinage : Cà commence par une pelle, et çà se termine par une graine.
|