Sergio Pinna

Web Designer

CF7 e Bootstrap

cf7 invio dati affermativo con un pop-up modale

cf7 invio dati affermativo con un pop-up modale un esempio semplice quanto potente di cosa voglia dire user expereince

CF7 con i suoi oltre 1 milione di download e decine di add-on è certamente uno dei più blasonati plugin di WordPress per la gestione delle form.

È sicuramente semplice gestire i campi: l’inserimento dei moduli, gli output di risposta (corretta o errata che sia), ecc.ecc.

L’errore che ho notato è che un plugin così evoluto gestisce l’output di risposta in maniera così… “semplicistica”, ma forse è voluto anche questo: in maniera tale che un utente abbastanza accorto possa modificare a suo piacimento la visualizzazione sullo schermo dell’avvenuto invio dei dati della form.

cf7-risposta-positiva-default

Utilizzando il framework Bootstrap hai la possibilità di usare un pop-up modale tale per cui possa avvenire la visualizzazione dell’avvenuto invio dei dati in un modal box, in altre parole una finestra che sia apre nella stessa pagina ove è presente la form.

Cf7 invio dati affermativo con un pop-up modale

Il codice

Per prima cosa, inserisci questo codice direttamente in CF7 -> “Modulo”, proprio alla fine di tutto il codice che hai precedentemente scritto:

<div class="modal fade" id="myModal_sp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Informazioni inviate correttamente</h4>
            </div>
            <div class="modal-body">
                <p>Le informazioni da lei inserite sono state inviate correttamente.<br></p>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

Mentre in CF7 -> “Impostazioni aggiuntive” di CF7 inserisci la riga:

on_sent_ok: "$("#myModal_sp").modal();"

Adesso ogni volta che il tuo messaggio sarà inviato apparirà un pop-up modale con la scritta di avvenuto invio del messaggio, come questo:

cf7-risposta-con-modal-bootstap

Come utlimissimo passaggio non ti resta altro di non stampare a video il ringraziaento di defautl di CF7 con queta regola css:

.wpcf7-mail-sent-ok {
 display: none !important;
}

Come avrai potuto notare “cf7 invio dati affermativo con un pop-up modale”, rende la nota user experience assai più accattivante e l’articolo ne risulta più elegante: l’utente, in ultima analisi, non deve cambiare pagina per poi tornare alla pagina precedente andare a cercare il punto in cui era a leggere ecc.ecc. , ma sarà direttamente portato a leggere dal punto cui era rimasto grazie appunto al pop-up modale.

Altro articolo che sono sicuro ti interesserà sul pop-up modale è Pop-up informativo della privacy

Fonte:
Bootstrap JS Modal

Condividi questo articolo