My contact form is not correctly working. There is 2 section : first fieldset enables you to choose a type of form to display (with jquery) and the other fieldset is for name, email... Validation is done with jquery.HTML5Form plugin
Validation works fine, email is sent with contact infos (second fieldset) but without any inputs texts of the first fieldset (except values for radio buttons).
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 = "[email protected]";
$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);
(sorry it's in french)
See it here live. Then click on bottom left corner and choose the first select option
