Aide formulaire de contact

Aide formulaire de contact - HTML/CSS - Programmation

Marsh Posté le 16-02-2015 à 18:35:37    

Bonjour,
 
est ce que quelqu'un pourrais m'aider...
 
J'ai un formulaire de contacte sur mon site:
http://testwebsite.physio-in-esslingen.de/kontakt
 
Le code est le suivant:
           

Code :
  1. <div class="alert alert-success">
  2.                 Well done! You successfully read this important alert message.
  3.             </div>
  6.             <form action="mailto:info@physio-in-esslingen.de" id="contact-form">
  7.                 <div class="input-prepend">
  8.                     <span class="add-on"><i class="icon-user"></i></span>
  9.                     <input class="span4" id="prependedInput" size="16" type="text" placeholder="Name">
  10.                 </div>
  11.                 <div class="input-prepend">
  12.                     <span class="add-on"><i class="icon-envelope"></i></span>
  13.                     <input class="span4" id="prependedInput" size="16" type="text" placeholder="Email Addresse">
  14.                 </div>
  15.                 <div class="input-prepend">
  16.                     <span class="add-on"><i class="icon-globe"></i></span>
  17.                     <input class="span4" id="prependedInput" size="16" type="text" placeholder="Telefonnummer">
  18.                 </div>
  19.                 <textarea class="span6"></textarea>
  20.                 <div class="row">
  21.                     <div class="span2">
  22.                         <input type="submit" class="btn btn-inverse" value="Nachricht senden">
  23.                     </div>
  24.                 </div>
  25.             </form>


 
Le problème c'est que je n'arrive pas a le formater de facon a ce que l'email soit envoyer sans passer par un serveur mail.
 
Est ce que je peux le faire en html ou est ce que je dois passer par du php.
 
Et comment est ce que je peux le faire?
 
Merci

Reply

Marsh Posté le 16-02-2015 à 18:35:37   

Reply

Marsh Posté le 19-02-2015 à 16:58:59    

Bonjour,
 
Il te faut forcément un formulaire dynamique et donc un langage dynamique (php ou asp).
 
Sur google, tu trouveras un certain nombre de tuto php pour des formulaires de mails. La fonction principale est la suivante :
 

Code :
  1. mail($to, $subject, $message, $headers);


Message édité par slr56 le 19-02-2015 à 16:59:13

---------------
Configurations type du moment : https://forum.hardware.fr/hfr/Hardw [...] 1331_1.htm  https://www.jouannetphotographe.com
Reply

Marsh Posté le 22-02-2015 à 18:04:23    

C'est bon j ai fais mon formulaire et ca fonctionne!!!
 
Maintenant je souhaiterais seulement qu après l'envoi du message je n'ai pas l'ouverture d'une nouvelle page pour la confirmation mais seulement un message de confirmation sur la meme page comme mon message "Well done! You successfully read this important alert message. "
 
Voici mon code html:

Code :
  1. <div class="alert alert-success">
  2. Well done! You successfully read this important alert message.
  3. </div>
  5. <form id="contact" method="post" action="kontakt.php">
  6. <div class="input-prepend">
  7. <span class="add-on"><i class="icon-user"></i></span>
  8. <input class="span4" id="nachname" name="nachname" size="16" type="text" placeholder="Name">
  9. </div>
  10. <div class="input-prepend">
  11. <span class="add-on"><i class="icon-envelope"></i></span>
  12. <input class="span4" id="email" name="email" size="16" type="text" placeholder="Email Address">
  13. </div>
  14. <div class="input-prepend">
  15. <span class="add-on"><i class="icon-globe"></i></span>
  16. <input class="span4" id="telefon" name="telefon" size="16" type="text" placeholder="Website URL">
  17. </div>
  18. <textarea class="span6" id="nachricht" name="nachricht"></textarea>
  19. <div class="row">
  20. <div class="span2">
  21. <input type="submit" class="btn btn-inverse" id="submit" name="submit" value="Abschicken">
  22. </div>
  23. </div>
  24. </form>


Et mon code php:
 
Code: Tout sélectionner
   

Code :
  1. <?php
  2.        /* === Daten aus dem Formular auslesen und in Variablen speichern === */
  3.          $nachname = $_POST['nachname'];
  4.          $email = $_POST['email'];
  5.          $telefon = $_POST['telefon'];
  6.          $nachricht = $_POST['nachricht'];
  8.      
  9.        /* === Empfängeradresse und Betreff === */
  10.          $an = 'info@physio-in-esslingen.de'; //Hier Ihre E-Mail-Adresse eintragen
  11.          $betreff = "Kontaktformularnachricht | $nachname ";
  12.      
  13.        /* === Wenn Bedingung erfüllt, dann E-Mail abschicken - andernfalls Fehlermeldung ausgeben === */
  14.            if ((!empty($nachname))&&(!empty($email))&&(!empty($telefon))&&(!empty($nachricht))) {
  15.      
  16.              mail($an, $betreff, $nachricht, 'From:' . $email); //Mail versenden
  17.      
  18.              echo 'Ihre Kontaktnachricht wurde zugestellt. Sie werden bald möglichst eine Antwort erhalten.';
  19.            }
  20.            else {
  21.              echo 'Sie müssen alle Felder ausfüllen. <a href="kontakt.htm">Zurück</a>';
  22.            }
  23.        ?>


 
 
Comment pourrais je le faire?
 
Merci

Reply

Marsh Posté le 23-02-2015 à 14:37:31    

Bonjour,
 
Pour faire du rafraîchissement partiel de ta page, il faut utiliser de l'AJAX.


---------------
Configurations type du moment : https://forum.hardware.fr/hfr/Hardw [...] 1331_1.htm  https://www.jouannetphotographe.com
Reply

Marsh Posté le 23-02-2015 à 14:57:34    

Reply

Marsh Posté le 23-02-2015 à 15:04:20    

seseba a écrit :

De l'AJAX?!


 
C'est un langage dynamique (comme l'ASP net) qui permet de faire du rafraîchissement partiel d'une page web.
 
Regarde cet exemple pour la confirmation d'envoi de mail :
 
http://stackoverflow.com/questions [...] jax-jquery


---------------
Configurations type du moment : https://forum.hardware.fr/hfr/Hardw [...] 1331_1.htm  https://www.jouannetphotographe.com
Reply

Marsh Posté le 23-02-2015 à 20:55:32    

Sorry mais là ca me dépasse...
 
Je ne comprend pas du tout comment faire :(

Reply

Marsh Posté le 24-02-2015 à 00:33:39    

L'ajax n'est pas un langage, c'est une technique d'échange de données de facon asynchrone (le premier A) entre le client (en général un navigateur web, le J signifiant JavaScript) et un serveur (qui peut par exemple du XML, d'où le X, mais ca peut renvoyer du HTML, du JSON, ... ce qu'on veut ou presque).
Contrairement au fonctionnement classique d'une page web (chargement/affichage), ca permet entre autre de récuperer les données de son choix afin de mettre à jour le contenu de sa page dynamiquement.

 

Il existe des librairies JavaScript qui te machent le boulot grandement, comme jQuery (en exemple plus haut). Tu trouveras des exemples en francais absolument partout sur le net.

 

Dans ton cas, on peut supposer que via jQuery tu appelles ton script PHP (via son URL), et tu recuperes le résulat de l'opération. En fonction de ce dernier, tu modifies en live le contenu de la page, tjrs avec jQuery.
Bonne chance :hello:


Message édité par SICKofitALL le 24-02-2015 à 00:38:36

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 26-02-2015 à 21:39:19    

J'ai réussi à coder ca:
 

Code :
  1. <html>
  2.     <head>
  3.         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4.         <title>Email-Validierung per AJAX</title>
  5.        
  6.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
  7.        
  8.         <script>
  9.             $(function(){
  10.                 var submit = $("input[type=submit]" );
  11.                 var email_feld = $("#email" );
  12.    var nachname_feld = $("#nachname" );
  13.    var telefon_feld = $("#telefon" );
  14.    var nachricht_feld = $("#nachricht" );
  15.                
  16.                 $(submit).attr("disabled", "disabled" );
  17.                
  18.                 $(email_feld).bind("change blur", function(){
  19.                     $.post('validate.php', {
  20.                         action: 'validate_email',
  21.                         email: $(email_feld).val()
  22.                     }, function(data){
  23.                         if(data == 'error'){
  24.                             $(email_feld).css("border", "2px solid red" );
  25.                             $(submit).attr("disabled", "disabled" );
  26.                         } else {
  27.                             $(email_feld).css("border", "2px solid green" );
  28.                             $(submit).removeAttr("disabled" );
  30.                         }
  31.                     });
  32.                 });
  34.    $(telefon_feld).bind("change blur", function(){
  35.                     $.post('validate.php', {
  36.                         action: 'validate_telefon',
  37.                         telefon: $(telefon_feld).val()
  38.                     }, function(data){
  39.                         if(data == 'error'){
  40.                             $(telefon_feld).css("border", "2px solid red" );
  41.                             $(submit).attr("disabled", "disabled" );
  42.                         } else {
  43.                             $(telefon_feld).css("border", "2px solid green" );
  44.                             $(submit).removeAttr("disabled" );
  46.                         }
  47.                     });
  48.                 });
  50.    $(nachname_feld).bind("change blur", function(){
  51.                     $.post('validate.php', {
  52.                         action: 'validate_nachname',
  53.                         nachname: $(nachname_feld).val()
  54.                     }, function(data){
  55.                         if(data == 'error'){
  56.                             $(nachname_feld).css("border", "2px solid red" );
  57.                             $(submit).attr("disabled", "disabled" );
  58.                         } else {
  59.                             $(nachname_feld).css("border", "2px solid green" );
  60.                             $(submit).removeAttr("disabled" );
  62.                         }
  63.                     });
  64.                 });
  66.    $(nachricht_feld).bind("change blur", function(){
  67.                     $.post('validate.php', {
  68.                         action: 'validate_nachricht',
  69.                         nachricht: $(nachricht_feld).val()
  70.                     }, function(data){
  71.                         if(data == 'error'){
  72.                             $(nachricht_feld).css("border", "2px solid red" );
  73.                             $(submit).attr("disabled", "disabled" );
  74.                         } else {
  75.                             $(nachricht_feld).css("border", "2px solid green" );
  76.                             $(submit).removeAttr("disabled" );
  78.                         }
  79.                     });
  80.                 });
  81.             })
  82.         </script>
  83.     </head>
  84.    
  85.     <body>
  86.        
  87.        
  88.       <form id="contact" method="post"  action="kontakt.php">
  89.                 <div class="input-prepend">
  90.                     <span class="add-on"><i class="icon-user"></i></span>
  91.                     <input class="span4" id="nachname" name="nachname" size="16" type="text" placeholder="Name">
  92.                 </div>
  93.                 <div class="input-prepend">
  94.                     <span class="add-on"><i class="icon-envelope"></i></span>
  95.                     <input class="span4" id="email" name="email" size="16" type="text" placeholder="Email Addresse">
  96.                 </div>
  97.                 <div class="input-prepend">
  98.                     <span class="add-on"><i class="icon-globe"></i></span>
  99.                     <input class="span4" id="telefon" name="telefon" size="16" type="text" placeholder="Telefonnummer">
  100.                 </div>
  101.                 <textarea class="span6" id="nachricht" name="nachricht" style="height:115px; margin-top:20px"></textarea>
  102.                 <div class="row">
  103.                     <div class="span2" style="margin-top:20px">
  104.                         <input type="submit" class="btn btn-inverse" id="submit" name="submit" value="Abschicken">
  105.                     </div>
  106.                 </div>
  107.             </form>
  108.     </body>
  109. </html>


 
Le truc c est que je sais pas comment faire pour que la confirmation de validation s'ouvre dans ma div...

Reply

Marsh Posté le 26-02-2015 à 22:50:30    

Tu as la réponse là :
http://api.jquery.com/jquery.post/
 
Lorsque tu postes via $.post, une requete http est envoyé à ton serveur à l'url que tu spécifies. Celle-ci réponds qqch (du html), ce dernier est récupérable dans la fonction assignée à la clé "success". Il s'agit d'un callback, càd une fonction anonyme qui recoit en parametre l'html qui "revient" du serveur.
Dans cette fonction, tu selectionnes le div en question et tu changes son html.
 
Si tu reprends l'exemple de la doc jquery, ca donnerait :

Code :
  1. $.post ("TON_URL_VERS_TA_PAGE_PHP", function (html_du_serveur) {
  2.   $(".LE_SELECTEUR_CSS_DE_TON_DIV" ).html (html_du_serveur);
  3. });


 
Au passage, dans ton code tu as par exemple
var submit = $("input[type=submit]" );
 
et plus loin tu fais  
$(submit).attr("disabled", "disabled" ); // double emploi
 
Ce n'est pas necessaire la variable "submit" étant déjà un object jQuery, tu n'as plus besoin de la re-jQuery-iser ;)
submit.attr("disabled", "disabled" );  // OK


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 26-02-2015 à 22:50:30   

Reply

Marsh Posté le 26-02-2015 à 22:54:25    

Concernant le selecteur css de ton div, si on prend l'exemple suivant :
<div class="input-prepend" id="monDiv">
 
Le selecteur jQuery est le même que celui-ci que tu utiliserais pour appliquer un css dessus, càd
$("div.input-prepend" ); // prend tt les divs avec une classe input-prepend (sous forme de tableau, voir la doc jquery)
$(".input-prepend" ); // prend tt les elements avec une classe input-prepend (tableau aussi)
$("div" ); // prend tt les divs (pareil)
$("#monDiv" ); // prend l'element avec cet ID en particulier, normalement il n'ya que 1 id


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 27-02-2015 à 21:11:11    

J'ai essayé mais je ne comprends pas tout. Faut il que je change les info dans mon kontakt.php ou dans mon kontakt.html?
 

Code :
  1. <?php
  2. /* === Daten aus dem Formular auslesen und in Variablen speichern === */
  3.   $nachname = $_POST['nachname'];
  4.   $email = $_POST['email'];
  5.   $telefon = $_POST['telefon'];
  6.   $nachricht = $_POST['nachricht'];
  9. /* === Empfängeradresse und Betreff === */
  10.   $an = 'info@.....de'; //Hier Ihre E-Mail-Adresse eintragen
  11.   $betreff = "Kontaktformularnachricht | $nachname ";
  13. /* === Wenn Bedingung erfüllt, dann E-Mail abschicken - andernfalls Fehlermeldung ausgeben === */
  14.     if ((!empty($nachname))&&(!empty($email))&&(!empty($telefon))&&(!empty($nachricht))) {
  16.       mail($an, $betreff, $nachricht, 'From:' . $email); //Mail versenden
  18.       echo 'Ihre Kontaktnachricht wurde zugestellt. Sie werden bald möglichst eine Antwort erhalten.';
  19.     }
  20.     else {
  21.       echo 'Sie müssen alle Felder ausfüllen. <a href="kontakt.htm">Zurück</a>';
  22.     }
  23. ?>


 
Qu'est ce que l'html de mon serveur?
 
Merci

Reply

Marsh Posté le 28-02-2015 à 00:08:06    

C'est le texte que tu renvois à partir de ton php.
Le php tu l'executes bien sur ton serveur non ? il te renvoit qqch, et ce qqch c'est des données que ton navigateur sait interpreter, donc principalement du html.
Lorsque ton mail part, tu fais un echo, c'est ce qu'affiche ce dernier que tu recupreres du coté client, càd avec jQuery.
Il n'ya rien de sorcier la-dedans, c'est pour ca que je te conseille soit d'utiiliser autre chose, soit de commencer à zero avec ce genre de système (tu trouveras des milliers d'exemples sur le net) :)
 


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 28-02-2015 à 17:48:56    

voila comment j ai fait:
 

Code :
  1. <div class="alert alert-success" id="ajax-response" style="display:none;">
  2.             </div>
  4.   <form id="contact" method="post"  action="kontakt.php">
  5.                 <div class="input-prepend">
  6.                     <span class="add-on"><i class="icon-user"></i></span>
  7.                     <input class="span4" id="nachname" name="nachname" size="16" type="text" placeholder="Name" required>
  8.                 </div>
  9.                 <div class="input-prepend">
  10.                     <span class="add-on"><i class="icon-envelope"></i></span>
  11.                     <input class="span4" id="email" name="email" size="16" type="email" placeholder="Email Addresse" required>
  12.                 </div>
  13.                 <div class="input-prepend">
  14.                     <span class="add-on"><i class="icon-globe"></i></span>
  15.                     <input class="span4" id="telefon" name="telefon" size="16" type="text" placeholder="Telefonnummer" required>
  16.                 </div>
  17.                 <textarea class="span6" id="nachricht" name="nachricht" style="height:115px; margin-top:20px" required></textarea>
  18.                 <div class="row">
  19.                     <div class="span2" style="margin-top:20px">
  20.                         <input type="submit" class="btn btn-inverse" id="submit" name="submit" value="Abschicken">
  21.                     </div>
  22.                 </div>
  23.             </form>
  24. </div><!--End page content column-->
  26. <script>$( document ).ready(function() {
  27.     $( "#contact" ).submit(function( event ) {
  29.   // Stop form from submitting normally
  30.   event.preventDefault();
  32.   // Lock form
  33.   $("#contact :input" ).attr("disabled", true); 
  35.   // Get some values from elements on the page:
  36.   var $form = $( this );
  37.   var email_inhalt = $("#email" ).val();
  38.   var nachname_inhalt = $("#nachname" ).val();
  39.   var telefon_inhalt = $("#telefon" ).val();
  40.   var nachricht_inhalt = $("#nachricht" ).val();
  42.   // Send the data using post
  43.   var posting = $.post( $form.attr( "action" ), {email: email_inhalt, nachname: nachname_inhalt, telefon: telefon_inhalt, nachricht: nachricht_inhalt} );
  45.   // Put the results in a div
  46.   posting.done(function( data ) {
  47.     $( "#ajax-response" ).text(data);
  48.     // unlock form
  49.     $("#contact :input" ).attr("disabled", false);
  50. $("#ajax-response" ).fadeIn(); 
  51.   });
  52. }); 
  53. });
  54. </script>

Reply

Marsh Posté le 28-02-2015 à 21:29:38    

Tout ca me semble à priori très correct. Ca ne fonctionne pas ou ca répond pas à tes besoins ?


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 28-02-2015 à 22:12:32    

Ca fonctionne parfaitement, je voulais juste donner mon resultat.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed