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
- Messaggio
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.
Sommario
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.
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
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.
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 2
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.
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
