Sujet fermé
Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

[Résolu] Formbuilder et ancre
#2

Bonjour, la solution est de valider le formulaire en AJAX :

01. Créer un gabarit de page (Core:Tongueage) 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'}
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 :

Code :
[== HTML ==]

<div id="ajax_contact_form" class="form">
    <div class="throbber" style="display: none;"></div>
    {FormBuilder form='alias_du_form'}
</div>
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
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 Smile

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
Sujet fermé


Messages dans ce sujet

Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)