1. Une librairie compatible avec les formulaires de PUBLITRAC est disponible. Assurez-vous d'avoir en main votre clef API (si vous n'en avez pas, adressez-vous à votre chargé de projet).
2. Créez un formulaire hébergé dans PUBLITRAC.
3. Générez le HTML du formulaire. Pour construire votre appel AJAX, vous devez utiliser le ID du formulaire et les noms des champs qui sont générés. (Voir en soulignés dans l'exemple ci-dessous).
<form class="nlForm" action="..." id="1394" name="1394">
<ul class="nlLblLeft">
...
<li class="nlField nlFormRequired">
<label id="lbl_Email">Courriel:</label>
<span class="nlInputField">
<input title="" class="nlFormText nlRequired" name="Email" id="Email" type="text" value="" maxlength="255" style="width:150px;" tabIndex="3" />
<span class="nlFormMsg" />
</span>
</li>
....
4. Construire l'appel AJAX avec la bibliothèque Javascript Publipage. En utilisant les informations recueillies au point 3, veillez configurer l'appel en spécifiant la cléf API, le ID du formulaire et tous les noms des champs du formulaire dans les attributs du lead.
<script type="text/javascript" src="https://app.publitrac.com/Publipage/PubliPage.Forms.WebForms-min.js...>
<script type="text/javascript">
function yourCustomJavascriptMethod(firstName, lastName, email, company, isGroupDev) {
/* Form identification */
PubliPage.Forms.WebForms.config.apiKey = '<API_KEY>';
PubliPage.Forms.WebForms.config.formId = '<formid>';
/* Leads attributes */
PubliPage.Forms.WebForms.config.fields.<formfielname> = <formfieldvalue>;
PubliPage.Forms.WebForms.config.fields.<formfielname> = <formfieldvalue>;
PubliPage.Forms.WebForms.config.fields.<formfielname> = <formfieldvalue>;
...
/* Application callbacks (optionals) */
PubliPage.Forms.WebForms.onPostedForm.callback = function(data) {
if(console != undefined) {
console.log('On Posted Form: ' + data);
}
}
PubliPage.Forms.WebForms.onError.callback = function(error) {
if(console != undefined) {
console.log('Error: ' + error);
}
}
/* End of application callbacks (optionals) */
/* Post the form */
PubliPage.Forms.WebForms.post();
}
</script>
5. Les 'callbacks' vous permettrons une implémentation complètement personnalisée de vos formulaires AJAX.
Articles reliés