Dotclear

Vous n'êtes pas identifié(e).

Annonce

#1 2011-11-18 17:55:19

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Créer un formulaire style devis

Bonsoir,

J'ai beau chercher sur les moteurs de recherches mais j'arrive pas à trouver un réponse complète sur le sujet (c'est assez basique). Comment programmer un formulaire "devis" (qui ferait un pré-calcul) ?

Quels sont les bonnes techniques à utiliser?

Hors ligne

#2 2011-11-20 16:10:31

Philippe
Stagiaire
Lieu : Toulon
Inscription : 2004-06-13
Site Web

Re : Créer un formulaire style devis

Tu peux créer un formulaire simplement en html et l'inclure dans le blog avec une page connexe. Ce formulaire devra comporter, dans l'attribut action de la balise form, l'adresse d'une autre page connexe en php qui le traitera.

Voici un exemple . Il n'y a pas de prix calculé mais des options activées en fonction des choix opérés, c'est assez similaire (tu peux télécharger le js en regardant le code source de la page).

Hors ligne

#3 2011-11-20 16:36:41

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Créer un formulaire style devis

Bonsoir,

Merci pour ta réponse & l'exemple, je le garde sous le coude.

Hors ligne

#4 2011-11-20 16:47:45

Philippe
Stagiaire
Lieu : Toulon
Inscription : 2004-06-13
Site Web

Re : Créer un formulaire style devis

Si tu as besoin du code qui va derrière, il suffit de demander ;)

Hors ligne

#5 2011-11-20 17:06:12

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Créer un formulaire style devis

Merci de la proposition. Pour le moment, c'est juste un rafraichissement de connaissances… et peut-être à réaliser dans le cadre de potentielles prestations.

Hors ligne

#6 2011-12-29 10:19:57

Leolug
Membre
Lieu : Lyon
Inscription : 2008-03-29
Site Web

Re : Créer un formulaire style devis

amalgame a écrit :

Si tu as besoin du code qui va derrière, il suffit de demander ;)

Bonjour,

Voilà le type de formulaire qui m'intérsse pour le site du restaurant d'un ami. Pourrais-je avoir le code qui va derrière ? ;-) Merci par avance...

Hors ligne

#7 2011-12-29 10:39:46

Philippe
Stagiaire
Lieu : Toulon
Inscription : 2004-06-13
Site Web

Re : Créer un formulaire style devis

Mon exemple repose sur 2 pages connexes : une pour le formulaire (reservation.html), et une autre pour le traitement (envoyer.php), que tu devras bien entendu adapter à tes besoins.

1) reservation.html (l'extension html permet d'y utiliser les balises de template de dotclear)

<p>{{tpl:lang Fields marked with a}} <span class="required">*</span> {{tpl:lang are required.}}</p>
<tpl:SysIf blog_id="default">
<form id="comment-form" accept-charset="utf-8" action="/static/Reservation" method="post">
</tpl:SysIf>
<tpl:SysIf blog_id="en">
<form id="comment-form" accept-charset="utf-8" action="/static/Booking" method="post">
</tpl:SysIf>
<tpl:SysIf blog_id="de">
<form id="comment-form" accept-charset="utf-8" action="/static/reservierung" method="post">
</tpl:SysIf>
	<fieldset>
	<legend></legend>
	<div class="two-cols">	
		<div class="col">
			<p class="field">
				<label for="Nom" title="Entrez ici votre nom"><span class="required">*</span>{{tpl:lang Name:}}</label>
				<input type="text" name="Nom" id="Nom" size="35" value="" maxlength="255" onfocus="this.select();" />
			</p>
			<p class="field">
				<label for="Prenom" title="Entrez ici votre pr&eacute;nom">{{tpl:lang Surname:}}</label>
				<input type="text" name="Prenom" id="Prenom" size="35" value="" maxlength="255" onfocus="this.select();" />
			</p>
			
			<p class="field">
				<label for="TelPort" title="Entrez ici le num&eacute;ro de votre portable"><span class="required">*</span>{{tpl:lang Cell phone:}}</label>
				<input type="text" name="TelPort" id="TelPort" size="35" value="" maxlength="255" onfocus="this.select();" />
			</p>
			<p class="field">
				<label for="Email" title="Entrez ici votre adresse &eacute;lectronique"><span class="required">*</span>{{tpl:lang Email address:}}</label>
				<input type="text" name="Email" id="Email" size="35" value="" maxlength="255" onfocus="this.select();" />
			</p>
		</div>
		<div class="col">
			<p class="field">
				<label for="Adresse1" title="Entrez ici votre adresse"><span class="required">*</span>{{tpl:lang Address:}}</label>
				<input type="text" name="Adresse1" id="Adresse1" size="35" value="" maxlength="255" onfocus="this.select();" />
			</p>
			<p class="field">
				<label for="CodePostal" title="Entrez ici votre code postal"><span class="required">*</span>{{tpl:lang Postal code:}}</label>
				<input type="text" name="CodePostal" id="CodePostal" size="35" value="" maxlength="255" onfocus="this.select();" />
			</p>
			<p class="field">
				<label for="Ville" title="Entrez ici votre ville"><span class="required">*</span>{{tpl:lang Town:}}</label>
				<input type="text" name="Ville" id="Ville" size="35" value="" maxlength="255" onfocus="this.select();" />
			</p>
			<p class="field">
				<label for="Pays" title="Entrez ici votre pays">{{tpl:lang Country:}}</label>
				<input type="text" name="Pays" id="Pays" size="35" value="" maxlength="255" onfocus="this.select();" />
			</p>
			
		</div>
	</div>
	</fieldset>
	<fieldset>
	<legend>{{tpl:lang Guests}}</legend>
		<table class="guests" summary="Hôtes">
		
		<colgroup>
		<col width="2*"/>
		<col width="2*"/>
		<col width="2*"/>
		</colgroup>
		<thead>
		  <tr>
			<th id="entete1">{{tpl:lang Name}}</th>
			<th id="entete2">{{tpl:lang Surname}}</th>
			<th id="entete3">{{tpl:lang Birthdate}}</th>
		  </tr>
		</thead>
		
		<tbody>
		  <tr class="field" >
			<td headers="entete1"><label for="Nom2" title="{{tpl:lang Name}}"></label>
			  <input class="input2" type="text" name="Nom2" id="Nom2" size="24" value="" maxlength="255" onfocus="this.select();" />
			</td>
			<td headers="entete2"><label for="Prenom2" title="{{tpl:lang Surname}}"></label>
			  <input class="input2" type="text" name="Prenom2" id="Prenom2" size="24" value="" maxlength="255" onfocus="this.select();" />
			</td>
			<td headers="entete3"><label for="DDN2" title="{{tpl:lang Birthdate}}"></label>
			  <input class="input2" type="text" name="DDN2" id="DDN2" size="24" value="" maxlength="10" onfocus="this.select();" />
			</td>
		  </tr>
		  <tr class="field" >
			<td headers="entete1"><label for="Nom3" title="{{tpl:lang Name}}"></label>
			  <input class="input2" type="text" name="Nom3" id="Nom3" size="24" value="" maxlength="255" onfocus="this.select();" />
			</td>
			<td headers="entete2"><label for="Prenom3" title="{{tpl:lang Surname}}"></label>
			  <input class="input2" type="text" name="Prenom3" id="Prenom3" size="24" value="" maxlength="255" onfocus="this.select();" />
			</td>
			<td headers="entete3"><label for="DDN3" title="{{tpl:lang Birthdate}}"></label>
			  <input class="input2" type="text" name="DDN3" id="DDN3" size="24" value="" maxlength="10" onfocus="this.select();" />
			</td>
		  </tr>
		</tbody>
		</table>
	</fieldset>
	<fieldset>
	<legend>{{tpl:lang Your vacation}}</legend>
		<div class="two-cols">	
			<div class="col calendar">
				<p class="field">
					<label for="JArr" title="Choisissez un jour"><span class="required">*</span>{{tpl:lang Arrival date:}}</label>
					<input name="JArr" id="JArr" type="text" size="35"  class="date-pick dp-applied" />
				</p>
				<p class="field">
					<label for="JDep" title="Choisissez un jour"><span class="required">*</span>{{tpl:lang Departure date:}}</label>
					<input name="JDep" id="JDep" type="text" size="35"  class="date-pick dp-applied" />
				</p>
			</div>
			<div class="col">
				<p class="field">
					<label for="Nb" title="{{tpl:lang Number of nights:}}">{{tpl:lang Number of nights:}}</label>
					<input name="Nb" id="Nb" readonly="true" type="text" size="35"  />
				</p>
				<p class="field" style="margin-top:-0.8em;">
					<label for="formule">{{tpl:lang Wellness package:}}</label>
					<select name="formule" id="formule">
						<tpl:EntriesHeader>
						<option value="0" >{{tpl:lang Choose your package}}</option>
						</tpl:EntriesHeader>
						<tpl:Entries category="Formules" no_context="1" no_content="1">
						<option value="{{tpl:EntryPosition}}" >{{tpl:EntryTitle}}</option>
						<tpl:EntriesFooter>
						<option value="5" >{{tpl:lang Only bed and breakfast}}</option>
						</tpl:EntriesFooter>
						</tpl:Entries>
					</select>
					<input name="formules" id="formules" type="hidden" value="{{tpl:lang Choose your package}},<tpl:Entries category="Formules" no_context="1" no_content="1">{{tpl:EntryTitle}},</tpl:Entries>{{tpl:lang Only bed and breakfast}}" />
					<input name="lang" id="lang" type="hidden" value="{{tpl:BlogLanguage}}" />
				</p>
			</div>
		</div>
		<p class="tarifs"><a href="/public/_tarifs/tarifs-saison.jpg">{{tpl:lang Wellness packages, prices Season}}</a> - <a href="/public/_tarifs/tarifs-haute-saison.jpg">{{tpl:lang Wellness packages, prices High Season}}</a> - <a href="http://www.abricot-cannelle.com/public/_tarifs/Abricot-Cannelle-Tarifs-2012.pdf">PDF</a></p>
		
	</fieldset>
	
	<fieldset>
	<legend>{{tpl:lang Comment}}</legend>
	<p class="field">
		<textarea name="Commentaires" id="Commentaires" cols="60" rows="5"></textarea>
	</p>
	</fieldset>
	<fieldset>
	<legend>{{tpl:lang Signature:}}</legend>
		<p id="accepted">
			<input type="checkbox" name="accept" id="accept" value="oui" onfocus="this.select();" />
			<tpl:SysIf blog_id="default">
			<label for="accept"><span class="required">*</span>{{tpl:lang I hereby declare that I have read and accept}} <a href="/pages/Conditions-generales-de-location-et-de-reservation" >{{tpl:lang general sales and booking conditions}}</a></label>
			</tpl:SysIf>
			<tpl:SysIf blog_id="en">
			<label for="accept"><span class="required">*</span>{{tpl:lang I hereby declare that I have read and accept}} <a href="/pages/Booking-conditions" >{{tpl:lang general sales and booking conditions}}</a></label>
			</tpl:SysIf>
			<tpl:SysIf blog_id="de">
			<label for="accept"><span class="required">*</span>{{tpl:lang I hereby declare that I have read and accept}} <a href="/pages/Reservierungsbedingungen" >{{tpl:lang general sales and booking conditions}}</a></label>
			</tpl:SysIf>
		</p>
	</fieldset>
	<p>
		<label for="ok" title="Cliquer pour envoyer votre demande"></label>
		<input value="{{tpl:lang Send}}" type="submit" name="ok" id="ok" />
	</p>
</form>

2) envoyer.php

<?php

$theme_path = path::fullFromRoot($core->blog->settings->system->themes_path."/".$core->blog->settings->system->theme,DC_ROOT);;
$theme_url = $core->blog->settings->system->themes_url."/".$core->blog->settings->system->theme;

l10n::set($theme_url.'/locales/'.$_lang.'/public');

$Nom = $_POST['Nom'];
$Prenom = $_POST['Prenom'];
$TelPort = $_POST['TelPort'];
$Email = $_POST['Email'];
$Adresse1 = $_POST['Adresse1'];
$CodePostal = $_POST['CodePostal'];
$Ville = $_POST['Ville'];
$Pays = $_POST['Pays'];


$Nom2 = $_POST['Nom2'];
$Prenom2 = $_POST['Prenom2'];
$DDN2 = $_POST['DDN2'];
$Nom3 = $_POST['Nom3'];
$Prenom3 = $_POST['Prenom3'];
$DDN3 = $_POST['DDN3'];

$JArr = $_POST['JArr'];
$JDep = $_POST['JDep'];
$Nb = $_POST['Nb'];
$lang = $_POST['lang'];

$formule = $_POST['formule'];
$formules = explode(',', $_POST['formules']);

$formule = $formules[$_POST['formule']];

$Commentaires = $_POST['Commentaires'];
$accept = $_POST['accept'];

$dest="reservation@abricot-cannelle.com";

$ok = 1;

$texte = '';

if ($Nom == ''){
$ok = 0;
$texte .= '<li>'.__('your name').'</li>';
}

if ($Adresse1 == ''){
$ok = 0;
$texte .= '<li>'.__('your address').'</li>';
}

if ($CodePostal == ''){
$ok = 0;
$texte .= '<li>'.__('your postal code').'</li>';
}

if ($Ville == ''){
$ok = 0;
$texte .= '<li>'.__('your town').'</li>';
}

if ($TelPort == ""){
$ok = 0;
$texte .= '<li>'.__('your cell phone number').'</li>';
}

if ($Email == ''){
$ok = 0;
$texte .= '<li>'.__('your email address').'</li>';
}

if ($JArr == ''){
$ok = 0;
$texte .= '<li>'.__('your arrival date').'</li>';
}

if ($JDep == ''){
$ok = 0;
$texte .= '<li>'.__('your departure date').'</li>';
}

if ($formule == '' || $formule == '0'){
$ok = 0;
$texte .= '<li>'.__('your choice of wellness package').'</li>';
}

if ($accept == ''){
$ok = 0;
$texte .= '<li>'.__('you must certify that you have read and accept our general sales and booking conditions').'</li>';
}


if ($ok == 1) {
	if($Nom2 != ''){
		$Accompagnants .= $Nom2.' '.$Prenom2.' né(e) le '.$DDN2."\n";
	}
	if($Nom3 != ''){
		$Accompagnants .= $Nom3.' '.$Prenom3.' né(e) le '.$DDN3."\n";
	}
	

	// envoi du resultat par email
	$sujet= '[Abricot Cannelle - Réservation ('.$lang.')] '.$Nom.' '.$Prenom;
	$body.= 'Demande de réservation'."\n"."\n";
	$body.= 'CLIENT :'."\n";
	$body.= $Nom."\n";
	$body.= $Prenom."\n";
	$body.= $Adresse1."\n";
	$body.= $CodePostal."\n";
	$body.= $Ville."\n"."\n";
	$body.= $Pays."\n"."\n";
	$body.= $TelPort."\n"."\n";
	$body.= $Email."\n"."\n";

	$body.= 'HÔTES :'."\n";
	$body.= $Accompagnants."\n"."\n";
	$body.= 'DATES DE SEJOUR :'."\n";
	$body.= 'du '.$JArr.' au  '.$JDep."\n"."\n";
	$body.= 'Nombre de nuits : '.$Nb."\n";
	$body.= 'Formule : '.$formule."\n"."\n";

	$body.= 'COMMENTAIRES :'."\n";
	$body.= $Commentaires."\n";

	
	$entete  = 'From: '.mail::B64Header($_POST['Nom']).' <'.$_POST['Email'].'>'."\n";
	$entete .= 'MIME-Version: 1.0'."\n";
	$entete .= 'Content-Type: text/plain; charset=\'utf-8\''."\n";
	$entete .= 'Content-Transfer-Encoding: 8bit'."\n";
	
	if(!mail($dest,$sujet,$body,$entete)){
		echo 
		'<div class="error">'.
		'<h3>'.__('Error').'</h3>'.
		'<p>'.__('Oups ! Error while sending email. Please try again.').'</p>'.
		'<div>';
	}

	echo
	'<h3>'.__('Thank you').'</h3>'.
	'<p>'.__('Your request has been send successfully, you will receive our answer shortly in your mail box:').' <strong>'.$Email.'</strong>.</p>';
	
} else {
	echo
	'<div class="error">'.
	'<h3>'.__('Error').'</h3>'.
	'<p>'.__('Your request is not complete, please add the following information:').'</p>'.
	'<ul>'.$texte.'</ul>'.
	'</div>';   
}
?>

À noter que le formulaire ne faisant qu'un envoi par email des informations saisies, il n'y a pas vraiment de problème de sécurité et le traitement est très basique.

Pour le javascript, tu peux le récupérer directement sur le site, il est appelé dans le head du fichier external.html du thème ;)

Hors ligne

Vous n'êtes pas identifié(e).

Pied de page des forums

Sites map