Het wil wel eens voorkomen dat je een bevestigingsveld wilt gebruiken voor e-mail adres dat men achterlaat. De functie om twee e-mail velden met elkaar te vergelijken of deze gelijk zijn aan elkaar zit niet standaard in de functie van Elementor Pro.
E-mail validatie veld toevoegen aan formulier
We gaan gebruik maken van een standaard formulier in Elementor Pro. In plaats van één e-mail veld gebruiken we er twee (dupliceer het eerste e-mail veld) en geef de tweede de naam: emailcheck.
De ID’s zijn heel belangrijk!
Controleer de ID’s van beide invulvelden. In dit voorbeeld noemen we het eerste e-mail veld: email en het tweede e-mail veld dat zal dienen het eerste e-mail veld te valideren: emailcheck.
Ook moet je jouw formulier van een naam (Form Name) voorzien. Wij geven hem de naam: contactpagina.
Invoegen PHP code op je website
Het plaatsen van een custom PHP code kan eenvoudig op twee verschillende manieren. Ik zal altijd aanraden gebruik te maken van een Child Theme om vervolgens de PHP code in de functions.php bestand van het Child theme te plaatsen. Mocht je geen gebruik maken van een Child theme dan is het gebruik maken van een PHP snippet plugin een goed alternatief. Als je via jouw dashboard -> plugins -> nieuwe plugin zoekt naar “PHP snippet” dan krijg je verschillende opties. Ik maak graag gebruik van Woody code snippets – Insert Header Footer Code, AdSense Ads maar je voel je vrij een ander te installeren. Het principe blijft gelijk.
PHP code toevoegen via een plugin
Als je de Woody Code snippets plugin geïnstalleerd en geactiveerd hebt ga je naar Snippets -> toevoegen
#1 Vervolgens opent zich een nieuw scherm. In dat scherm geef je de snippet een titel (bijvoorbeeld Email validatie check code).
#2 Plaats de PHP code in het bewerkersveld
#3 Selecteer: Werkt overal
#4 Publiceren zoals je ook een pagina of blog publiceert.
PHP code toevoegen aan het thema bestand functions.php
Een tweede manier om de PHP code te plaatsen is deze toe te voegen aan het functions.php bestand van jouw thema. Het liefst die van jouw child theme. Mocht je geen child theme gebruiken en het functions bestand van je hoofdthema gebruiken, realiseer je dan dat je de code na elk thema update opnieuw moet toevoegen. .
Ga naar Weergave -> Theme editor -> selecteer het thema -> functions.php -> Plaats vervolgens onderaan de php code in de editor jouw extra code.
De PHP code voor een e-mail validatie in de Elementor Pro formulier
Nu we weten hoe we de code moeten invoegen op onze website, moet je natuurlijk wel weten welke code we gebruiken om het e-mail validatie proces werkend te krijgen.
Plaats de volgende PHP code op je website:
// Vanaf hier begint de code om email te valideren.
add_action( 'elementor_pro/forms/validation', function ( $record, $ajax_handler ) {
$form_name = $record->get_form_settings( 'form_name' );
// Verander CONTACTPAGINA in de naam van jouw formulier
if ( 'contactpagina' !== $form_name ) {
return;
}
// Verander EMAIL naar de ID naam van jouw email veld in Elementor form > Field ID
$first_email_field = $record->get_field( [
'id' => 'email'
] );
// Verander EMAILCHECK naar de ID naam van jouw email veld in Elementor form > Field ID
$second_email_field = $record->get_field( [
'id' => 'emailcheck'
] );
// Zorg in de onderstaande code dat de ID's van beide EMAIL velden aangepast zijn naar je eigen waardes EMAIL en EMAILCHECK dus veranderen > Field ID
if ( $first_email_field['email']['value'] !== $second_email_field['emailcheck']['value'] ) {
$ajax_handler->add_error( $second_email_field['emailcheck']['id'], 'Het email adres is niet gelijk aan elkaar.' );
}
}, 10, 2 );
Belangrijk voor bovenstaande code is dat je bepaalde elmenten wijzigt naar je eigen instellingen. Bijvoorbeeld form_name onze contactpagina naar de naam van jouw formulier. En de velden email en emailcheck zal je moeten wijzigen naar je eigen email velden ID’s.
Als je alles goed hebt ingesteld dan is dit het resultaat:
Heb je ook al een bevestigingsmail ingesteld? Lees hier hoe je dat doet! en mocht je jouw bewerkingen willen bekijken of terugzetten? Lees dan wijzigingen in Elementor bekijken en/of terugzetten!
