Vous n'êtes pas identifié.

Annonce

#1 Site de mariage - Formulaire d'inscription du 11-04-2014 12:48:01

cimbombom
c00lnaute nouveau
Date d'inscription: 11-04-2014
Messages: 4

Site de mariage - Formulaire d'inscription

Bonjour,

J’aimerais créer un site web pour mon mariage qui aura lieu prochainement. Le site est déjà bien en place mais je rencontre un problème pour lequel j’espère trouver une solution grâce à votre aide :

Il y a un formulaire sur le site grâce auquel mes invités peuvent confirmer le choix du menu et leur présence. Evidemment, j’aimerais recevoir un mail quand un invité a rempli le formulaire.

Malheureusement, je n’y arrive pas. Je travaille sur Dreamweaver. La page HTML du formulaire est en lien avec un fichier javascript. Tout me semble nickel au niveau du codage. Pourtant, quand l’invité clique sur le bouton « envoyer », rien ne se passe.

Voici le code de la page HTML :



Code:

<!-- add comment -->
                        <div class="add-comment contact-form">
                          
                            <div class="comment-form">
                            <form action="#" method="post" id="reservationForm" id="commentForm" />
                               
                                <div class="row field_text alignleft">
                                    <label class="label_title"><strong>PrEnom:</strong></label>
                                    <input type="text" name="prénom" id="prénom" value="" class="inputtext input_middle required" />
                                </div>
                               
                                <div class="row field_text alignleft omega">
                                    <label class="label_title"><strong>NOM:</strong></label>
                                    <input type="text" name="nom" id="nom" value="" class="inputtext input_middle required" />
                                </div>
                                                                           
                                <div class="clear"></div>  
                                                                           
                                                                            <div class="row field_text alignleft">
                                    <label class="label_title"><strong>Email:</strong></label>
                                    <input type="text" name="email" id="email" value="" class="inputtext input_middle required" />
                                </div>
                               
                                <div class="row field_text alignleft omega">
                                    <label class="label_title"><strong>TELEPhone:</strong></label>
                                    <input type="text" name="telephone" id="telephone" value="" class="inputtext input_middle required" />
                                </div>
                                                                           
                                <div class="clear"></div>  
                                                              
                               
                                <div class="row alignleft input_styled inlinelist omega">
                                                    <div class="rowRadio"><input type="radio" name="continent" value="radio_v1" id="radio_v1" checked="" /> <label for="radio_v1">OUI, JE VIENS</label></div>
                                                    <div class="rowRadio"><input type="radio" name="continent" value="radio_v2" id="radio_v2" /> <label for="radio_v2">NON, JE NE VIENS PAS</label></div>
                                                </div> 
                               
                                <div class="clear"></div>  
                                                        
                                <div class="row rowSubmit">
                                <input type="submit" class="btn-submit" id="send" formaction="mail@mail.com" formmethod="POST" value="Envoyer" />
                                </div>
                            </form>
                            </div>
                        </div>
                <!--/add comment -->

Voici le code du fichier javascript :

Code:

jQuery(document).ready(function(){ 
          tfuse_reservations_form();
});
 
function tfuse_reservations_form(){ 
          var my_error;
          jQuery("#send").bind("click", function(){
 
          my_error = false;
          jQuery("#reservationForm input, #reservationForm textarea, #reservationForm radio, #reservationForm select").each(function(i)
          {
                                      var surrounding_element = jQuery(this);
                                      var value               = jQuery(this).attr("value");
                                      var check_for                       = jQuery(this).attr("id");
                                      var required                          = jQuery(this).hasClass("required");
 
                                      if(check_for == "email"){
                                               surrounding_element.removeClass("error valid");
                                               baseclases = surrounding_element.attr("class");
                                               if(!value.match(/^\w[\w|\.|\-]+@\w[\w|\.|\-]+\.[a-zA-Z]{2,4}$/)){
                                                         surrounding_element.attr("class",baseclases).addClass("error");
                                                         my_error = true;
                                               }else{
                                                         surrounding_element.attr("class",baseclases).addClass("valid");
                                               }
                                      }
 
                                      if(required && check_for != "email"){
                                               surrounding_element.removeClass("error valid");
                                               baseclases = surrounding_element.attr("class");
                                               if(value == ""){
                                                         surrounding_element.attr("class",baseclases).addClass("error");
                                                         my_error = true;
                                               }else{
                                                         surrounding_element.attr("class",baseclases).addClass("valid");
                                               }
                                      }
 
 
                               if(jQuery("#reservationForm input, #reservationForm textarea, #reservationForm radio, #reservationForm select").length  == i+1){
                                               if(my_error == false){
                                                         jQuery("#reservationForm").slideUp(400);
 
 
                                                         var $datastring = "ajax=true";
                                                         jQuery("#reservationForm input, #reservationForm textarea, #reservationForm radio, #reservationForm select").each(function(i)
                                                         {
                                                                  var $name = jQuery(this).attr('name');
                                                                  var $value = encodeURIComponent(jQuery(this).attr('value'));
                                                                  $datastring = $datastring + "&" + $name + "=" + $value;
                                                         });
 
 
                                                         jQuery(".ajax_form #send").fadeOut(100);
 
                                                         jQuery.ajax({
                                                            type: "POST",
                                                            url: "./rsvp.php",
                                                            data: $datastring,
                                                            success: function(response){
                                                            jQuery("#reservationForm").before("<div class='ajaxresponse' style='display: none;'></div>");
                                                            jQuery(".ajaxresponse").html(response).slideDown(400);
                                                            jQuery("#reservationForm #send").fadeIn(400);
                                                            jQuery("#reservationForm input, #reservationForm textarea, #reservationForm radio, #reservationForm select").val("");
                                                                     }
                                                                  });
                                                         }
                                      }
 
                            });
                             return false;
          });
}

Voici comment je les ai reliés dans Dreamweaver :

http://www.zimagez.com/zimage/lienhtml-js.php

Et enfin le visuel de la page en question :

http://www.zimagez.com/zimage/vuehtml.php

Je n'ai pas su où mettre l'adresse e-mail d'envoi dans le code Javascript. Autre chose, je m'étonne de voir un rsvp.php dans le code javascript alors que j'ai une page rsvp.html (celle du formulaire) et rsvp.js (celle du code java).

Sur demande je peux vous transmettre les deux fichiers.

Sauriez-vous me dire ce qui cloche ? Est-ce mieux de faire un formulaire PHP ?

Merci d’avance 1000x, ça m’embêterait de ne pas pouvoir mettre cette page sur mon site !


Hors ligne

 

11-04-2014 12:48:01

Mister $$$


#2 Re Site de mariage - Formulaire d'inscription du 11-04-2014 13:53:28

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: Site de mariage - Formulaire d'inscription

Bonjour cimbombom et bienvenue,

Je vais être très clair, je suis une "bille" en Javascript et encore plus avec Jquery 014 . De ce fait, je ne peux pas vous aidez, désolé.

L'avantage d'un formulaire Javascript comparé à PHP, c'est que la page n'a pas besoin d'être rechargé pour afficher les erreurs et autres.

Si vous optez pour un formulaire en PHP, là je pourrais certainement vous aidez.

Hors ligne

 

#3 Re Site de mariage - Formulaire d'inscription du 11-04-2014 13:59:48

cimbombom
c00lnaute nouveau
Date d'inscription: 11-04-2014
Messages: 4

Re: Site de mariage - Formulaire d'inscription

Merci coolman :-)

C'est un site que j'ai acheté "clé en mains". Pour toutes les autres pages sans formulaire mes connaissances web suffisent. Là, par contre, je bloque.

Le truc JQuery je sais même pas ce que c'est.

Sans vouloir abuser de votre gentillesse, c'est difficile de créer un formulaire PHP ?

Dernière modification par cimbombom (11-04-2014 14:00:14)


Hors ligne

 

#4 Re Site de mariage - Formulaire d'inscription du 11-04-2014 16:56:00

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: Site de mariage - Formulaire d'inscription

Jquery c'est du Javascript version très très avancé et oui il est difficile de créer un formulaire PHP sans connaissances.

Comme c'est pour la bonne cause, je vous l'est fait wink :

Code:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            label,input,textarea{
            display: block;
            width: 250px;
            float: left;
            margin-bottom: 10px;
            font-weight:bold;
            }
            label {
            text-align: right;
            width: 150px;
            padding-right: 20px;
            }
            br {
            clear: left;
            }
            input[type=submit],input[type=reset]{
            width: 70px;
            margin-right:5px;
            }
            .erreur{
            background:#F11A57;
            color:#FFF;
            border:1px solid #F11A57;
            padding:5px;
            margin:5px;
            border-radius:5px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            text-align:left;
            }
            .ok{
            background:#D6EFA1;
            color:#4F7307;
            border:1px solid #C1D779;
            padding:5px;
            margin:5px;
            border-radius:5px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            text-align:left;
            }            
        </style>
    </head> 
    
    <body> 
        
        <?php
            //initialisation du masquage du formulaire    
            $masquer_formulaire = 0;
            
            //si le bouton Valider a été prèssé
            if(isset($_POST["Valider"])){
                //on récupère toutes les variables du formulaire par l'intermédiaire de leurs noms
                $nom = $_POST["nom"];
                $prenom = $_POST["prenom"];
                $email = $_POST["email"];
                $telephone = $_POST["telephone"];
                $je_viens_ou_pas = $_POST["je_viens_ou_pas"];
                
                /***on contrôles ensuite chaque variables***/
                //Le nom est vide
                if(empty($nom)){
                    $alerte_nom_vide = 'Veuillez saisir votre nom.';
                }
                //le prénom est vide
                else if(empty($prenom)){
                    $alerte_prenom_vide = 'Veuillez saisir votre prénom.';
                }
                //L'email est vide
                else if(empty($email)){
                    $alerte_email_vide = 'Veuillez saisir votre email.';
                }
                //Validité de l'email
                else if (!preg_match("#^[0-9a-z]([-_.]?[0-9a-z])*@[0-9a-z]([-.]?[0-9a-z])*.[a-z]{2,4}$#",$email))
                { 
                    $alerte_email_bis ='Votre Email semble ne pas être valide.';
                }
                //Le téléphone est vide
                else if(empty($telephone)){
                    $alerte_telephone_vide = 'Veuillez saisir votre téléphone.';
                }                
                //La sélection du choix est vide
                else if(empty($je_viens_ou_pas)){
                    $alerte_venir_vide = 'Veuillez sélectionner votre choix.';
                }
                
                /***Tout est ok, on prépare et on envoie un email***/
                else{
                    //message à transmettre
                    $msg = "Objet du message : Invitation mariage<br/><br/>
                    Nom et prénom : $nom $prenom<br/>
                    Email : $email<br/>
                    Téléphone : $telephone<br/>
                    Serat il présent : $je_viens_ou_pas";            
                    
                    /***variables à compléter***/
                    $mon_email = 'aa@free.fr';
                    $objet = 'Invitation mariage';
                    /***fin de variables à compléter***/
                    
                    //permet de savoir qui envoie le mail et d'y répondre
                    $mailheaders = "From: $email\n";
                    $mailheaders .= "MIME-version: 1.0\n";
                    $mailheaders .= "Content-type: text/html; charset= utf-8\n";
                    //on envoie l'email
                    mail($mon_email, $objet, $msg, $mailheaders);
                    //on informe que le message est envoyé
                    $message_ok = 'Votre message a été envoyé.';
                    //on masque le formulaire
                    $masquer_formulaire=1;                
                }
            }
        ?>
        
        <?php 
            if(isset($message_ok)){
                echo '<div class="ok"><a name="ok"></a>'.$message_ok.'</div>';
            }
            //On masque le formulaire
            if($masquer_formulaire == 0) { 
            ?>
            
            <form name="monform" action="#" method="post">
                <fieldset>
                    
                    <?php if(isset($alerte_nom_vide)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_nom_vide.'</div>'; }?>
                    <label for="nom">Nom</label>
                    <input id="nom" name="nom" value="<?php if(!empty($_POST["nom"])){ echo $_POST["nom"]; } ?>"/><br/>
                    
                    <?php if(isset($alerte_prenom_vide)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_prenom_vide.'</div>'; }?>
                    <label for="prenom">Prénom</label>
                    <input id="prenom" name="prenom" value="<?php if(!empty($_POST["prenom"])){ echo $_POST["prenom"]; } ?>"/><br/>
                    
                    <?php 
                        if(isset($alerte_email_vide)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_email_vide.'</div>'; }
                        if(isset($alerte_email_bis)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_email_bis.'</div>'; }
                    ?>
                    <label for="email">Email</label>
                    <input id="email" name="email" value="<?php if(!empty($_POST["email"])){ echo $_POST["email"]; } ?>"/><br/>                
                    
                    <?php if(isset($alerte_telephone_vide)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_telephone_vide.'</div>'; }?>
                    <label for="telephone">Téléphone</label>
                    <input id="telephone" name="telephone" value="<?php if(!empty($_POST["telephone"])){ echo $_POST["telephone"]; } ?>"/><br/>
                    
                    <?php if(isset($alerte_venir_vide)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_venir_vide.'</div>'; }?>
                    <label for="je_viens_ou_pas">Serez-vous présent?</label>
                    <select name="je_viens_ou_pas">
                        <option value="">Sélectionnez un choix</option>
                        <option value="Oui" <?php if(isset($_POST["je_viens_ou_pas"]) && $_POST["je_viens_ou_pas"]=="Oui"){echo " selected";}?>>Oui</option>
                        <option value="Non" <?php if(isset($_POST["je_viens_ou_pas"]) && $_POST["je_viens_ou_pas"]=="Non"){echo " selected";}?>>Non</option>
                    </select><br/>
                    
                    <label for="valider">Action</label>
                    <input type="submit" name="Valider" value="Valider" id="valider"/>
                    <input name="Effacer" value="Effacer" type="reset" id="effacer"/>
                    
                </fieldset>
            </form>    
            
            <?php
                //On ferme if($masquer_formulaire == 0)
            }
        ?>        
    </body> 
    
</html>

Note : C'est du PHP alors il faut que votre fichier porte l'extension .php . Si vous utilisez le code tel quel, encoder de préférence votre fichier en UTF-8 sans BOM (sous Notepad++).

Hors ligne

 

#5 Re Site de mariage - Formulaire d'inscription du 11-04-2014 18:30:46

cimbombom
c00lnaute nouveau
Date d'inscription: 11-04-2014
Messages: 4

Re: Site de mariage - Formulaire d'inscription

C'est vraiment la classe, merci beaucoup ! Je vais vous exaspérer, mais j'ai un souci pour l'intégrer.

J'ai créé une page PHP en copiant-collant le texte. Ca fonctionne nickel.

Maintenant j'aimerais intégrer ça dans mon site, donc avec le design tout joli tout neuf. Mais ça défait totalement la page.

Je suis perdu, comment intégrer cela dans mon site ?

Quant à la bonne cause, je ne sais pas si c'est moi ou ma future femme qui la fait :-)

Dernière modification par cimbombom (11-04-2014 18:31:38)


Hors ligne

 

#6 Re Site de mariage - Formulaire d'inscription du 11-04-2014 19:12:47

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: Site de mariage - Formulaire d'inscription

Pour l'intégrer dans votre site c'est très simple.
Entre les balises <head> et </head> vous copiez/collez le code suivant :

Code:

        <style type="text/css">
            label,input,textarea{
            display: block;
            width: 250px;
            float: left;
            margin-bottom: 10px;
            font-weight:bold;
            }
            label {
            text-align: right;
            width: 150px;
            padding-right: 20px;
            }
            br {
            clear: left;
            }
            input[type=submit],input[type=reset]{
            width: 70px;
            margin-right:5px;
            }
            .erreur{
            background:#F11A57;
            color:#FFF;
            border:1px solid #F11A57;
            padding:5px;
            margin:5px;
            border-radius:5px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            text-align:left;
            }
            .ok{
            background:#D6EFA1;
            color:#4F7307;
            border:1px solid #C1D779;
            padding:5px;
            margin:5px;
            border-radius:5px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            text-align:left;
            }            
        </style>

Là ou vous voulez voir le formulaire vous copiez le code suivant :

Code:

        <?php
            //initialisation du masquage du formulaire    
            $masquer_formulaire = 0;
            
            //si le bouton Valider a été prèssé
            if(isset($_POST["Valider"])){
                //on récupère toutes les variables du formulaire par l'intermédiaire de leurs noms
                $nom = $_POST["nom"];
                $prenom = $_POST["prenom"];
                $email = $_POST["email"];
                $telephone = $_POST["telephone"];
                $je_viens_ou_pas = $_POST["je_viens_ou_pas"];
                
                /***on contrôles ensuite chaque variables***/
                //Le nom est vide
                if(empty($nom)){
                    $alerte_nom_vide = 'Veuillez saisir votre nom.';
                }
                //le prénom est vide
                else if(empty($prenom)){
                    $alerte_prenom_vide = 'Veuillez saisir votre prénom.';
                }
                //L'email est vide
                else if(empty($email)){
                    $alerte_email_vide = 'Veuillez saisir votre email.';
                }
                //Validité de l'email
                else if (!preg_match("#^[0-9a-z]([-_.]?[0-9a-z])*@[0-9a-z]([-.]?[0-9a-z])*.[a-z]{2,4}$#",$email))
                { 
                    $alerte_email_bis ='Votre Email semble ne pas être valide.';
                }
                //Le téléphone est vide
                else if(empty($telephone)){
                    $alerte_telephone_vide = 'Veuillez saisir votre téléphone.';
                }                
                //La sélection du choix est vide
                else if(empty($je_viens_ou_pas)){
                    $alerte_venir_vide = 'Veuillez sélectionner votre choix.';
                }
                
                /***Tout est ok, on prépare et on envoie un email***/
                else{
                    //message à transmettre
                    $msg = "Objet du message : Invitation mariage<br/><br/>
                    Nom et prénom : $nom $prenom<br/>
                    Email : $email<br/>
                    Téléphone : $telephone<br/>
                    Serat il présent : $je_viens_ou_pas";            
                    
                    /***variables à compléter***/
                    $mon_email = 'aa@free.fr';
                    $objet = 'Invitation mariage';
                    /***fin de variables à compléter***/
                    
                    //permet de savoir qui envoie le mail et d'y répondre
                    $mailheaders = "From: $email\n";
                    $mailheaders .= "MIME-version: 1.0\n";
                    $mailheaders .= "Content-type: text/html; charset= utf-8\n";
                    //on envoie l'email
                    mail($mon_email, $objet, $msg, $mailheaders);
                    //on informe que le message est envoyé
                    $message_ok = 'Votre message a été envoyé.';
                    //on masque le formulaire
                    $masquer_formulaire=1;                
                }
            }
        ?>
        
        <?php 
            if(isset($message_ok)){
                echo '<div class="ok"><a name="ok"></a>'.$message_ok.'</div>';
            }
            //On masque le formulaire
            if($masquer_formulaire == 0) { 
            ?>
            
            <form name="monform" action="#" method="post">
                <fieldset>
                    
                    <?php if(isset($alerte_nom_vide)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_nom_vide.'</div>'; }?>
                    <label for="nom">Nom</label>
                    <input id="nom" name="nom" value="<?php if(!empty($_POST["nom"])){ echo $_POST["nom"]; } ?>"/><br/>
                    
                    <?php if(isset($alerte_prenom_vide)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_prenom_vide.'</div>'; }?>
                    <label for="prenom">Prénom</label>
                    <input id="prenom" name="prenom" value="<?php if(!empty($_POST["prenom"])){ echo $_POST["prenom"]; } ?>"/><br/>
                    
                    <?php 
                        if(isset($alerte_email_vide)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_email_vide.'</div>'; }
                        if(isset($alerte_email_bis)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_email_bis.'</div>'; }
                    ?>
                    <label for="email">Email</label>
                    <input id="email" name="email" value="<?php if(!empty($_POST["email"])){ echo $_POST["email"]; } ?>"/><br/>                
                    
                    <?php if(isset($alerte_telephone_vide)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_telephone_vide.'</div>'; }?>
                    <label for="telephone">Téléphone</label>
                    <input id="telephone" name="telephone" value="<?php if(!empty($_POST["telephone"])){ echo $_POST["telephone"]; } ?>"/><br/>
                    
                    <?php if(isset($alerte_venir_vide)){ echo '<div class="erreur"><a name="ok"></a>'.$alerte_venir_vide.'</div>'; }?>
                    <label for="je_viens_ou_pas">Serez-vous présent?</label>
                    <select name="je_viens_ou_pas">
                        <option value="">Sélectionnez un choix</option>
                        <option value="Oui" <?php if(isset($_POST["je_viens_ou_pas"]) && $_POST["je_viens_ou_pas"]=="Oui"){echo " selected";}?>>Oui</option>
                        <option value="Non" <?php if(isset($_POST["je_viens_ou_pas"]) && $_POST["je_viens_ou_pas"]=="Non"){echo " selected";}?>>Non</option>
                    </select><br/>
                    
                    <label for="valider">Action</label>
                    <input type="submit" name="Valider" value="Valider" id="valider"/>
                    <input name="Effacer" value="Effacer" type="reset" id="effacer"/>
                    
                </fieldset>
            </form>    
            
            <?php
                //On ferme if($masquer_formulaire == 0)
            }
        ?>

Il est possible le style css provoque des bugs d'affichage.
Par ailleurs j'ai omis de vous dire que vous deviez compléter les variables suivantes :

Code:

$mon_email = 'aa@free.fr';
$objet = 'Invitation mariage';

...par votre email et l'objet que vous souhaitez.

Hors ligne

 

#7 Re Site de mariage - Formulaire d'inscription du 12-04-2014 10:16:29

cimbombom
c00lnaute nouveau
Date d'inscription: 11-04-2014
Messages: 4

Re: Site de mariage - Formulaire d'inscription

Merci à vous coolman. J'ai contacté le site qui m'a vendu... le site et ils ont pu me trouver une solution. Merci encore et bon week-end !


Hors ligne

 

Propulsé par PunBB
© Copyright 2007
Forum créer un site

Partenaires de « créer un site internet »