Sujet Précédent Sujet Suivant

Formulaire conversation - problème de vérification et d'envoi

Fermé
eway - 28 déc. 2016 à 16:47
 eway - 28 déc. 2016 à 20:56
Bonjour,

j'ai un projet universitaire à rendre pour le 1er Janvier et j'ai quelques soucis avec ma page de contact.
Je dois utiliser une librairie pour faire un formulaire original et j'ai trouvé ceci : https://space10-community.github.io/conversational-form/

C'est un formulaire dans une forme de conversation et je trouvais ça plutôt intéressant à travailler !
Cependant, j'ai un problème pour la vérification de l'email, de l'age et lors de l'envoi du formulaire à la fin qui me redirige sur une page introuvable (j'aimerais qu'à la fin, nous soyons rediriger vers l'index..).

J'ai retourné Google dans tous les sens mais impossible de trouver une solution à ces problèmes !

Pouvez-vous m'aider ?

Voici mon code... 

<!DOCTYPE html>
<html lang="fr">


<!-------------------------HEAD---------------------->
<!--------------------------------------------------->

<head>

    <meta charset="UTF-8">
    <title>WHO ARE WE ?</title>
    <link rel="stylesheet" href="styles.css">

    <!--Police Open Sans-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,800' rel='stylesheet' type='text/css'>


    <script type="text/javascript" src=""quot;https://rawgit.com/space10-community/conversational-form/master/dist/conversational-form.min.js" crossorigin></script>

    <script>
      (function(){
        setTimeout(function() {
          $(document).on("click", "#toggle-conversation", function(){
            if(!window.ConversationalForm){
              window.ConversationalForm = new cf.ConversationalForm({
                formEl: document.getElementById("conversational"),
                context: document.getElementById("form-outer"),
                userImage: "img/human.png"
              });
            }
            $(this).addClass("disabled");
            var form = $(".conversational-form");
            if (form.hasClass("conversational-form--show")) {
              $(this).removeClass("active");
              $(this).text("Turn on conversation");
              $(".conversational-form").removeClass("conversational-form--show");
            } else {
              $(this).addClass("active");
              $(this).text("Turn off conversation");
              $(".conversational-form").addClass("conversational-form--show");
            }
            $(this).removeClass("disabled");
          });
        }, 200);
      })();
    </script>


      <!------VALIDATION------>

     <script src=""quot;https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src=""quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>


</head>

<body>

<!------------------------FORMULAIRE----------------------->

        <form cf-form-element action="/post">
  	   		<p>
  	   			<label for="nom"> Bonjour, comment vous appelez-vous ?</label>
  	   			<input type="text" name="nom" id="nom"  data-validation="required" data-validation-length="2-15"/>
  	   		</p>

  	   		 <div class="form-group">
                      <label for="occupation">Occupation</label>
                      <div class="radio">
                        <label>
                          <input cf-questions="Nous sommes ravis de vous rencontrer, {previous-answer}! Que faites-vous dans la vie ?" type="radio" name="occupation" id="occupation-1" value="developer">
                          Je travaille à tournez ménage.
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="occupation" id="occupation-2" value="designer">
                          Je suis le père Fouras à Fort Boyaux.
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="occupation" id="occupation-3" value="curious-mind">
                          Je suis un ancien candidat à "Qui veut gagner du pognon".
                        </label>
                      </div>
                      <div class="radio">
                        <label>
                          <input type="radio" name="occupation" id="occupation-2" value="lost">
                          Je suis une galinette cendrée...
                        </label>
                      </div>
            </div>

  	   		<div class="form-group">
                      <label for="thats-all">Oh pardi !</label>
                      <select cf-questions="Oh pardi, une star !" id="thats-all" class="form-control">
                        <option></option>
                        <option>Non c'est juste mon destin !</option>
                      </select>
            </div>

  	   		<div class="form-group">
                              <label for="email">Email</label>
                              <input cf-questions="Bon d'accord, mais nous avons maintenant besoin de votre adresse mail" type="email" class="form-control" name="email" id="your-email" cf-error="Votre adresse n'est pas valide" placeholder="Enter a valid email address">
            </div>

  	   		<p>
  	   			<label for="age"> Quel est votre âge ?</label>
  	   			<input type="number" name="age" id="age" value="20" min="18" max="45" step="1"/>
  	   		</p>

  	   		<p> Objet :
			  <input cf-questions="Et quel est l'objet de votre demande ?" type="radio" cf-label="Je veux rejoindre la police">

			  <input cf-questions="Quelle originalité ! Et quel est l'objet de votre demande ?" type="radio" cf-label="J'ai des photos compromettantes sur M. Alumni">

			  <input cf-questions="Quelle originalité ! Et quel est l'objet de votre demande ?" type="radio" cf-label="Je veux un date avec le gardien de la paix">
		  </p>     

            <div class="form-group">
                      <label for="thats-all">Final go</label>
                      <select cf-questions="C'est tout pour moi, bonne journée !" id="thats-all" class="form-control">
                        <option>Vous aussi !</option>
                      </select>
            </div>
    </form>
	</section>

</body>
</html>


Merci à vous !

A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38451 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 mars 2025 4 739
28 déc. 2016 à 17:05
Bonjour,

Sur quelle "page introuvable" es tu redirigé ? /post ???
Si oui.. il te suffit de changer l'attribut ACTION du ton FORM 
<form cf-form-element action="/post">

Par, par exemple : 
<form cf-form-element action="traitement.php">

Il te faudra bien entendu créé le fichier : traitement.php
et y mettre ton code de vérif et d'envoi de mail.

NB: On parle ici de PHP ... si tu travailles en LOCAL sur ton PC tu dois installer (et utiliser) un serveur ou du moins une appli qui le simule (par exemple : WAMP ou EASYPHP ou XAMPP )



0
Réponse 2 / 2
eway
28 déc. 2016 à 18:28
Bonjour Jordane,

Je suis redirigé vers :

Votre fichier est introuvable
Il a peut-être été déplacé ou supprimé.
ERR_FILE_NOT_FOUND

Je suppose que c'est une question de fichier php ? (je ne sais pas faire, ce n'est pas mon domaine, j'ai juste quelques vagues connaissances..)

Il faudrait simplement que ça envoie les données comme sur un formulaire classique, mais à la dernière interaction, on tombe sur cette page...
0
jordane45 Messages postés 38451 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 mars 2025 4 739
28 déc. 2016 à 18:47
.... ça te dirige ... sur quelle URL ?

Et oui... C'est du php...
0
eway > jordane45 Messages postés 38451 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 mars 2025
28 déc. 2016 à 19:42
Sur ça exactement : file:///C:/post?nom=nbv&occupation=developer&email=jhg&age=
0
jordane45 Messages postés 38451 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 mars 2025 4 739 > eway
28 déc. 2016 à 19:43
Donc c'est bien ce que je t'ai dit dans ma réponse précédente ....
0
Doreamonstre > jordane45 Messages postés 38451 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 mars 2025
28 déc. 2016 à 20:17
Yo,
il faudra plus que de vagues connaissances.
Le formulaire sert à envoyer des informations(données) mais ver qui ou quoi?
C'est PHP qui détermine cela ici.

Voilà pour un formulaire avec POST:
http://www.xul.fr/ecmascript/get-post.php
et pour PHP
https://secure.php.net/manual/fr/index.php

Et comme en général on envoi vers quelque chose(via formulaire HTML qui transmet à PHP qui envoi à...:)
C'est dans 99.995% des cas la base de données le plus simple et le mieux:

http://sql.sh/
et bien sûr:
https://fr.wikipedia.org/wiki/Base_de_donn%C3%A9es

C'est assez simple dans le principe et facile à mettre en place mais il faut bien plus que de vagues connaissance. Tant mieux alors si vous êtes étudiant vous êtes là pour ça: travailler à apprendre des connaissances(pas vagues des connaissances tout court .).
0
eway
28 déc. 2016 à 20:56
D'accord, merci à vous deux alors !
Je vais laisser comme ça, tout le reste fonctionne :)

Encore merci pour vos réponses très rapides !
Passez une très bonne année ! :)
0

Discussions similaires

Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
Conversations disparaissent sur facebook rencontres
Peg -
Radinoz -

1 réponse
Comment supprimer une conversation Messenger pour les 2 personnes ?
mercidemaider -
sd -

7 réponses
mainlevée douanière ?
Leape -
Cece -

25 réponses
Envoie impossible messenger
LynaMorgana -
Kuroni -

1 réponse