Come creare un modulo multistep con Elementor

Hai bisogno di creare un modulo multistep e non sai come fare? Scopri la nuova funzione introdotta da Elementor al widget modulo.

Questa nuova funzionalità è stata richiesta a gran voce dagli utenti e finalmente ora è realtà.

Alla fine di questo articolo potrai creare tutti i tipi di moduli multistep che desideri, inoltre ti darò un ulteriore “trucco” per rendere il tuo modulo pienamente funzionante.

Se pronto?

Partiamo!

Prima di iniziare ti consiglio  di leggere  l’articolo “Come impostare il modulo di contatto” ti ho mostrato le funzionalità del widget Modulo di Elementor.

Questo widget è disponibile con la versione Pro di Elementor

Modulo Multistep

La creazione di un modulo multistep è uguale a quella di un normale modulo, la prima cosa da fare è inserire il widget modulo nella pagina.

Il layout di default è il classico modulo di contatto, infatti troviamo i campi:

  • Nome
  • Email
  • Messaggio
modulo contatto - Come creare un modulo multistep con Elementor

Tutti questi campi possono essere modificati, eliminato o aggiunti a seconda del modulo che vuoi creare.

Per mostrarti la funzione multistep immagina di creare un modulo di contatto in 2 step.

Primo step

Lascia un solo campo del modulo di default nello specifico quello nome e poi vai menu del campo e cambia il tipo di campo da Testo a Tel

Questo perché stiamo ipotizzando che l’utente ti lasci per prima cosa il numero di telefono ma potresti, in alternativa, scegliere qualunque campo come per esempio il campo Email.

Per evitare che l’utente passi al secondo step senza lasciarti il numero di telefono imposta questo campo come richiesto.

Campo tel - Come creare un modulo multistep con Elementor

Secondo Step

Clicca sul tasto “Aggiungi Elemento” aggiungi un nuovo campo, di default il campo aggiunto è un campo di testo.

Per questo motivo cambia il tipo di campo da testo a Step

Campo step - Come creare un modulo multistep con Elementor

Inserisci un etichetta che ti servirà se deciderai di mostrare il nome dello step agli utenti.

Come hai notato il campo step ha attivi nel suo menu 2 campi facoltativi 

  • Previous button
  • Next button

Questi 2 campi ti consentono di cambiare il testo nei pulsanti “precedente e successivo” sovrascrivendo il contenuto di campi del menu pulsanti

Inoltre come avrai notato nel modulo sono presenti dei numeri all’interno di due cerchi, servono ad indicare all’utente gli step.

step 1 - Come creare un modulo multistep con Elementor

Di questo ne parleremo tra pochissimo per adesso andiamo avanti con la costruzione del secondo step.

Adesso devi aggiungere gli campi di cui hai bisogno

Per esempio il nome, il cognome, l’Email etc

Il campo che non deve mai mancare in un form è il campo per l’accettazione della privacy

Per crearlo devi utilizzare il tipo Accettazione.

Attivare l’opzione richiesto e inserire all’interno del campo Testo Accettazione il testo che hai preparato per esempio:

Acconsento alla <a href=”https://www.miosito.it/privacy/”><u>Privacy Policy </u></a> 

Il tuo Modulo è quasi completo.

Diamo uno sguardo a quello che hai creato

STEP 1

Step 1 - Come creare un modulo multistep con Elementor

STEP 2

Step 2. - Come creare un modulo multistep con Elementor

A questo punto non ti resta che personalizzare il form

Personalizzazione

Cliccando sul menu Pulsanti puoi

  • modificare la dimensione 
  • Aumentare o diminuire la larghezza nella colonna
  • Impostare l’allineamento
  • Cambiare il testo ai pulsanti successivo e precedente

Le opzioni dopo l’invio l’abbiamo già viste nell’articolo “Come impostare il modulo di contatto

Le Impostazioni “Steps Setting” invece sono nuove anche se alquanto semplici

In questo menu non devi fare altro che impostare quale grafica mostrare per indicare all’utente in quale punto dei vari step si trova.

Impostazioni grafiche step - Come creare un modulo multistep con Elementor

Come vedi dall’immagine puoi inserire

  • Testo
  • Icone
  • Numero
  • Progress bar 
  • Test e numero
  • Icone e numero

Quali di queste impostazioni utilizzare dipende solamente dal tipo di grafica che hai creato per la pagina.

Abbiamo creato un modulo multistep, naturalmente puoi cambiare la i colori, le dimensioni del testo etc…

Un’altra cosa che puoi fare è aggiungere tutti gli step di cui hai bisogno per creare il tuo modulo.

Validare numero di telefono

Prima di chiudere questo articolo voglio mostrarti come far validare ad Elementor il numero di telefono.

A cosa mi riferisco?

Devi sapere che se adesso andassi ad inserire un solo numero nel campo numero di telefono nel modulo che hai creato potrei passare al secondo step

Questo perché Elementor non è capace di validare il numero di telefono

Con la modifica che ti sto per mostrare gli utenti dovranno per forza inserire un numero di telefono o almeno dei numeri in questo formato.

Per fare questo hai bisogno di aggiungere una modifica al file functions.php del tuo tema Child

Non hai il tema Child o non sai cosa sia?

Ti parlerò del tema Child e dei suoi benefici nel prossimo articolo.

Quello che devi sapere è che il tema Child non è un tema vero e proprio ma tutti i temi o almeno i temi migliori hanno un tema child.

Tornano al nostro articolo come ti dicevo devi solo aggiungere questo codice al file functions.

add_action( 'elementor_pro/forms/validation/tel', function( $field, $record, $ajax_handler ) {
//remove native validation
/**
* @var \ElementorPro\Modules\Forms\Module $forms_module
*/
$forms_module = \ElementorPro\Plugin::instance()->modules_manager->get_modules( 'forms' );
remove_action( 'elementor_pro/forms/validation/tel', [ $forms_module->field_types['tel'], 'validation' ] );
// run your own validation, ex:
if ( empty( $field['value'] ) ) {
return;
}
// Match this format XXX-XXX-XXXX, 123-456-7890

if ( preg_match( ‘/[0-9]{3}(-?)[0-9]{3}(-?)[0-9]{4}/’, $field[‘value’] ) !== 1 ) {

$ajax_handler->add_error( $field['id'], 'Please make sure the phone number is in XXX-XXX-XXXX format, eg: 123-456-7890' );
}
}, 9, 3 );
add_action( 'elementor_pro/forms/render_field/tel', function( $item, $item_index, $form ) {
//remove native render
/**
* @var \ElementorPro\Modules\Forms\Module $forms_module
*/
$forms_module = \ElementorPro\Plugin::instance()->modules_manager->get_modules( 'forms' );
remove_action( 'elementor_pro/forms/render_field/tel', [$forms_module->field_types['tel'] , 'field_render' ], 10, 3 );
// add your custom render ex:
$form->add_render_attribute( 'input' . $item_index, 'class', 'elementor-field-textual' );
$form->add_render_attribute( 'input' . $item_index, 'pattern', '[0-9]{3}(-?)[0-9]{3}(-?)[0-9]{4}' );
$form->add_render_attribute( 'input' . $item_index, 'title', __( 'Number should be in this format xxx-xxx-xxxx.', 'plugin-name' ) );
echo '<input size="1" ' . $form->get_render_attribute_string( 'input' . $item_index ) . '>';
}, 9, 3 );

Conclusioni

In questo articolo ti ho mostrato la nuova funzione step del modulo di contatto di Elementor, abbiamo anche visto come creare un modulo multistep e infine ti ho mostrato come aggiungere la validazione del numero al campo numero di telefono di Elementor.

Ecco il video dell’articolo

Ho un favore da chiederti, se questo articolo ti è piaciuto, condividilo.

Potrebbe anche piacerti

Elementor la guida completa

Ultimi articoli

Categorie
Passa a Elementor Pro
Per il tuo hosting
Per creare la tua Privacy Policy
Copyright 2020 © Wp Semplice - Privacy Policy

Gli articoli ti sono stati utili?

Iscriviti alla newsletter per restare sempre aggiornato! 

Grazie ti contatteremo a breve