Mon formulaire de contact ne fonctionne pas correctement. Il y a 2 sections : la première permet de choisir le type de formulaire à afficher (avec jquery) et l'autre concerne le nom, l'email... La validation se fait avec plugin jquery.HTML5Form
La validation fonctionne bien, l'email est envoyé avec les informations de contact (deuxième champ) mais sans les textes d'entrée du premier champ (à l'exception des valeurs des boutons radio).
HTML :
$(document).ready(function() {
$('#projet').change(function(e) {
var current = $(this).val();
$('#cadreinfos').show();
$('#visible-spec').html($('#' + current).html());
initHTML5form ();
$('#devisresponse').empty();
});
});
<form action="devis.php" method="POST" id="devisform">
<fieldset id="cadreprojet">
<legend>Mon projet</legend>
<select name="projet" id="projet" title="Type de projet"/>
<OPTION selected >Type de projet
<OPTION value='devis-vitrine' >Formule "Vitrine"
<OPTION value='devis-site' >Formule "Mon site"
</select>
<div id="visible-spec">
</div>
<div id="devis-vitrine" class="hidden-spec">
<input type="text" name="activite" id="activite" title="Activité" size="30" maxlength="100" placeholder="Activité (entreprise, association...)" autocomplete="off" required/>
<input type="text" name="fonction" id="fonction" title="Fonction" size="40" maxlength="120" placeholder="Quelle doit être pour vous la fonction du site ?" autocomplete="off" />
<input type="text" name="public" id="public" title="Public" size="10" maxlength="120" placeholder="Public visé ?" autocomplete="off" />
<input type="text" name="image" id="image" title="Image" size="35" maxlength="120" placeholder="Quelle image voulez-vous véhiculer ?" autocomplete="off"/>
<div id="charte">Charte graphique existante ? <input type="radio" name="charte" id="charteN" value="Non" onClick="javascript:$('#couleurs').show();" required/>Non<input type="radio" name="charte" id="charteY" value="Oui" onClick="javascript:$('#couleurs').hide()" required>Oui</div>
<input type="text" name="couleurs" id="couleurs" title="Couleurs" size="18" maxlength="120" placeholder="Couleurs souhaitées ?" autocomplete="off" required/>
<input type="text" name="pages" id="pages" title="Nombre de pages" size="22" maxlength="3" placeholder="Nombre de pages estimé ?" autocomplete="off" required/>
<input type="text" name="exemple" id="exemple" title="Exemple de site" size="35" maxlength="40" placeholder="Adresse d'un site existant pour inspiration" autocomplete="off"/>
<input type="date" name="deadline" id="deadline" title="Deadline" size="27" maxlength="20" placeholder="Date de mise en ligne souhaitée" autocomplete="off" required/>
<textarea name="comment" id="comment" title="Message" cols="80" rows="7" maxlength="1000" placeholder="Merci d'indiquer ici un court descriptif de votre futur site : sujet, rubriques, type de contenu (texte, images, vidéos...), fonctionnalités spécifiques, demandes particulières..." required ></textarea>
</div>
<div id="devis-site" class="hidden-spec">
<input type="text" name="activite" id="activite" title="Activité" size="30" maxlength="100" placeholder="Activité (entreprise, association...)" autocomplete="off" required/>
<input type="text" name="fonction" id="fonction" title="Fonction" size="40" maxlength="120" placeholder="Quelle doit être pour vous la fonction du site ?" autocomplete="off" />
<input type="text" name="public" id="public" title="Public" size="10" maxlength="120" placeholder="Public visé ?" autocomplete="off" />
<input type="text" name="image" id="image" title="Image" size="35" maxlength="120" placeholder="Quelle image voulez-vous véhiculer ?" autocomplete="off"/>
<div id="charte">Charte graphique existante ? <input type="radio" name="charte" id="charteN" value="Non" onClick="javascript:$('#couleurs').show();" required/>Non<input type="radio" name="charte" id="charteY" value="Oui" onClick="javascript:$('#couleurs').hide()" required>Oui</div>
<input type="text" name="couleurs" id="couleurs" title="Couleurs" size="18" maxlength="120" placeholder="Couleurs souhaitées ?" autocomplete="off" required/>
<input type="text" name="admins" id="admins" title="Nombre d'administrateurs" size="27" maxlength="3" placeholder="Nombre d'administrateurs du site ?" autocomplete="off" required/>
<input type="text" name="exemple" id="exemple" title="Exemple de site" size="35" maxlength="40" placeholder="Adresse d'un site existant pour inspiration" autocomplete="off"/>
<input type="date" name="deadline" id="Deadline" title="Deadline" size="27" maxlength="20" placeholder="Date de mise en ligne souhaitée" autocomplete="off" required/>
<div id="charte">Quel contenu voulez-vous mettre à jour vous-même : <input type="checkbox" name="actu" id="actu" value="Actualités" required/>Actualités<input type="checkbox" name="photos" id="photos" value="Photos" required/>Photos<input type="checkbox" name="videos" id="videos" value="Vidéos" required/>Vidéos<input type="checkbox" name="cal" id="cal" value="Calendrier" required/>Calendrier / Réservations</div>
<textarea name="comment" id="comment" title="Message" cols="80" rows="7" maxlength="1000" placeholder="Merci d'indiquer ici un court descriptif de votre futur site : sujet, rubriques, type de contenu (texte, images, vidéos...), fonctionnalités spécifiques, demandes particulières..." required ></textarea>
</div>
</fieldset>
<fieldset id="cadreinfos">
<legend>Mes coordonnées</legend>
<label for="name"></label>
<input type="text" name="name" id="name" title="Nom" maxlength="60" placeholder="Nom" autocomplete="off" required/>
<label for="lastname"></label>
<input type="text" name="lastname" id="lastname" title="Prénom" maxlength="60" placeholder="Prénom" autocomplete="off" required/>
<label for="email"></label>
<input type="email" name="email" id="email" title="Email" maxlength="40" placeholder="Email" autocomplete="off" required/>
<label for="website"></label>
<input type="url" name="website" id="website" title="Site internet" maxlength="40" placeholder="http://" autocomplete="off" />
<label for="telephone"></label>
<input type="tel" name="telephone" id="telephone" title="Téléphone" maxlength="20" placeholder="Téléphone" autocomplete="off"/>
<input type="submit" value="Envoyer" class="submit"/><div id="devisresponse"></div>
</fieldset>
</form>
function initHTML5form(){
$('#devisform').html5form({
allBrowsers : true,
responseDiv : '#devisresponse',
messages : 'fr',
colorOn :'#8ab29f',
colorOff :'#494343'
});
}
PHP :
$to = "julien@divstudio.fr";
$subject = "Demande de devis";
$name_field = $_POST['name'];
$lastname_field = $_POST['lastname'];
$email_field = $_POST['email'];
$url_field = $_POST['website'];
$tel_field = $_POST['telephone'];
$activite = $_POST['activite'];
$fonction = $_POST['fonction'];
$public = $_POST['public'];
$image = $_POST['image'];
$charte = $_POST['charte'];
$couleurs = $_POST['couleurs'];
$pages = $_POST['pages'];
$exemple = $_POST['exemple'];
$deadline = $_POST['deadline'];
$message = $_POST['comment'];
$from = "From: $email_field\r\n";
$body = "De: $name_field $lastname_field\n $tel_field\n $url_field\n\n
Type de projet: $projet\n\n
Activité:$activite\n
Fonction:$fonction\n
Public:$public\n
Image:$image\n
Charte graphique:$charte\n
Couleurs:$couleurs\n
Nombre de pages:$pages\n
Exemple de site:$exemple\n
Deadline:$deadline\n\n
Message:\n $message";
echo "Merci $lastname_field, votre email a été envoyé !";
mail($to, $subject, $body, $from);
(désolé, c'est en français)
Voir le site aquí vivre. Cliquez ensuite sur le coin inférieur gauche et choisissez la première option de sélection.