13/03/2017, 17:48:10
Bonjour, la solution est de valider le formulaire en AJAX :
01. Créer un gabarit de page (Core:age) et l'appeler par ex AJAX avec pour seul contenu :
02. Créer une page pour le formulaire de contact :
Contenu :
Options de la page :
Décocher "Désactiver l'éditeur WYSIWYG sur cette page (indépendamment du gabarit ou de la configuration de l'utilisateur)"
Gabarit: AJAX
03. Dans la page ou le gabarit où on appelle le form :
Ne pas oublier d'ajouter l'appel à Jquery.form dans le gabarit de page où est affiché le form (+ l'appel à JQUERY) :
<script type="text/javascript" src="js/jquery.form.min.js">
(Télécharger le script ici : http://malsup.com/jquery/form/#download)
+ ajouter le script en inline en fin de gabarit
Remplacer "ALIAS_DE_LA_PAGE_DU_FORM"(x2 dans le script ci-dessus) par L'alias de la page du form est renseigné dans la liste des pages (Gestionnaire de contenus).
Remplacer "ID_DE_LA_PAGE_DU_FORM"(x1 dans le script ci-dessus) L'id de la page se trouve en survolant le nom de la page du form (Id du contenu
04. Un peu de css pour voir s'afficher le "throbber" (l'image doit exister... chercher "throbber.gif" dans google images au pire)
Dans le même genre, afficher le form dans une popup :
https://www.cmscanbesimple.org/blog/form...modal-view
01. Créer un gabarit de page (Core:age) et l'appeler par ex AJAX avec pour seul contenu :
Code :
[== Indéfini ==]
{content}
02. Créer une page pour le formulaire de contact :
Contenu :
Code :
[== Indéfini ==]
{FormBuilder form='alias_du_formulaire'}
Décocher "Désactiver l'éditeur WYSIWYG sur cette page (indépendamment du gabarit ou de la configuration de l'utilisateur)"
Gabarit: AJAX
03. Dans la page ou le gabarit où on appelle le form :
Code :
[== HTML ==]
<div id="ajax_contact_form" class="form">
<div class="throbber" style="display: none;"></div>
{FormBuilder form='alias_du_form'}
</div>
<script type="text/javascript" src="js/jquery.form.min.js">
(Télécharger le script ici : http://malsup.com/jquery/form/#download)
+ ajouter le script en inline en fin de gabarit
Code :
[== JavaScript ==]
<script>
{literal}
//contact Form
jQuery(document).ready(function(){
var contact_form = $('#ajax_contact_form form');
function formValidate(formData, jqForm, options){
// var queryString = $.param(formData);
// var formElement = jqForm[0];
// alert('About to submit: \n\n' + queryString);
contact_form.fadeOut("slow", function(){$(".throbber").fadeIn("slow")});
return true;
};
// Prepare form
var options = {
target: '#ajax_contact_form',
beforeSubmit: formValidate,
type: 'post'
};
$('#ajax_contact_form form input[name*=returnid]').attr('value','ID_DE_LA_PAGE_DU_FORM');
$('#ajax_contact_form form input[name=page]').attr('value','ALIAS_DE_LA_PAGE_DU_FORM');
contact_form.attr('action','{/literal}{root_url}{literal}/index.php?page=aliasdelapageduform&showtemplate=false').ajaxForm(options);
});
{/literal}
Remplacer "ALIAS_DE_LA_PAGE_DU_FORM"(x2 dans le script ci-dessus) par L'alias de la page du form est renseigné dans la liste des pages (Gestionnaire de contenus).
Remplacer "ID_DE_LA_PAGE_DU_FORM"(x1 dans le script ci-dessus) L'id de la page se trouve en survolant le nom de la page du form (Id du contenu
04. Un peu de css pour voir s'afficher le "throbber" (l'image doit exister... chercher "throbber.gif" dans google images au pire)
Code :
[== CSS ==]
.throbber {
background: url("../img/throbber.gif") no-repeat center center;
height: (ajouter au minimum une hauteur mini, le throbber étant en image de fond, par défaut la div n'a pas de hauteur)
}
Dans le même genre, afficher le form dans une popup :
https://www.cmscanbesimple.org/blog/form...modal-view