E-mail validatie uitvoeren in Elementor Pro formulieren

E-mail validatie uitvoeren in Elementor Pro formulieren

In dit bericht:

email adres validatie fout - elementor pro formulieren - Websiteoday.nl

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.

email check elementor pro - Websitetoday - Webdesign en Online Marketing Driebergen-RijsenburgContact formulier Elementor - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

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.

formulier naam - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

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

PHP snippet toevoegen via Woody snippet - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

#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 snippet toevoegen via Woody snippet email bevestigen - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

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.

PHP code plakken in thema bestand - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

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:

email adres validatie fout elementor pro formulieren - Websitetoday - Webdesign en Online Marketing Driebergen-Rijsenburg

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!

 

FAQ

Heeft Elementor Pro een standaard e-mail adres validatie?

Nee. Elementor pro bevat niet de functie om te controleren of het e-mail adres juist wordt ingevoerd. Elementor controleert wel automatisch of het adres een @ en een . bevat, wat de echtheid van het e-mail adres moet bepalen.

Hoe kan ik PHP code toevoegen aan mijn website?

Je kan een custom PHP code toevoegen via het functions.php bestand van je child theme of door gebruik te maken van een PHP snippet plugin. Bijvoorbeeld Woody PHP snippets. Let wel op, het risico op complicaties met een foute PHP code is groot. Doe dit alleen als je verstand hebt van coderen.
Rick Memelink

Rick Memelink

Rick is eigenaar van Websitetoday.nl. Hij ontwikkelt WordPress websites met Elementor en heeft een achtergrond als sportleraar. De afgelopen jaren heeft hij veel cursussen en trainingen gevolgd in online marketing, webdesign en ondernemen. De vreemde combinatie van sport, lesgeven en webdesign maakt dat Rick een bijzondere 'kijk' heeft ontwikkeld op het realiseren van een nieuwe websites voor jou!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Zullen we kennismaken?

We zouden het geweldig vinden om met jou samen te werken!
Foryourmoment.nl mockup afbeelding met tablet, mobiel en pc - Websitetoday.nl
Maandag 08:00 - 20:00
Dinsdag 08:00 - 20:00
Woensdag 08:00 - 20:00
Donderdag 08:00 - 20:00
Vrijdag 08:00 - 20:00
Zaterdag Gesloten
Zondag Gesloten

Hé jammer, we zijn op dit moment gesloten. Als je een mailtje stuurt ontvang je z.s.m. een reply van ons!