In diesem Arikel lernst du wie du eine fortgeschrittene Validierung von Telefonnumern in deinen Formularen vornehmen kannst. Standarmäßig ist diese Validierung nicht in Formularen verfügbar, da die Funktionen aus einem externen Plugin stamme.

Diese Vorteile bringt dir die Validierung der Telefonnummer:

Über die IP-Adresse wird der Standort des Besuchers abgefragt und es wird automatisch die richtige Ländervorwahl ausgewählt
Wird eine Telefonnummer in einem falschen Format übermittelt kann das Formular nicht abgesendet werden (zB: Zu Kurz, Zu Lang, Ungültiges Format)
Dropdown zur Auswahl des Landes
Beim übermitteln und absenden des Formulares wird die Telefonnummer automatisch richtig formatiert und ins CRM übertragen

WICHTIG: Der folgende Code funktioniert nur, wenn sich nur ein Formular mit dem Telefonnummernfeld auf der aktuellen Seite befindet.

So funktioniert´s:

Schritt 1:

Erstelle das Formular ganz normal und füge das Feld mit der Telefonnumer hinzu. Beachte hierbei, dass du das Feld als Pflichtfeld definiert hast.

Schritt 2:

Klicke auf die Vorschau und zeige das Formular in einem neuen Tab an. Klicke Mit der rechten Maustaste auf das Feld der Telefonnummer und klicke auf "Untersuchen" auf MacOS oder auf "Element untersuchen" auf Windows.

Es öffnet sich die Konsole des Browsers und du solltest bereits auf dem richtigen Element sein. Wenn du mit der Maus über das Element im Code fährst, sollte das Element wie im folgenden Bild angezeigt werden. Wir brauchen aus dieser Ansicht nur den Namen des Feldes der sich von Formular zu Formular unterscheiden kann. Den Namen findest du wie im Bild im Code des Elements. In unserem Beispiel wäre es name="field2" wobei field2 der Name ist den wir brauchen. Kopiere in deine Notizen oder in ein leeres Dokument.

Schritt 3:

Kopiere den folgenden Code und füge ihn in auf der Seite des Formulares unter Website-Einstellungen, Eigener Code im Seiten Body Markup ein. Achtung: Solltest du das Formular in einem Popup haben, dann musst du den Code nicht im Seiten Body Markup einfügen sondern im Custom Body Markup.

<!-- Telefonnummervalidierung START -->
<script>
$("[name='field2']").attr('id','phone'); // HIER field2 mit dem Namen aus Schritt 2 ersetzen
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<link rel="stylesheet" href="https://content.app-sources.com/s/6047793375270469/uploads/CSS/intlTelInput.min-6277531.css">
<script>var errorMap=["Ungültige Nummer","Ungültige Vorwahl","Zu kurz","Zu lang","Ungültige Nummer"],input=document.querySelector("#phone"),errorMsg=input.closest(".form-field"),iti=window.intlTelInput(input,{initialCountry:"auto",hiddenInput:"phone",preferredCountries:["de","at","ch"],geoIpLookup:function(e){$.get("https://ipinfo.io",(function(){}),"jsonp").always((function(t){var r=t&&t.country?t.country:"de";e(r)}))},utilsScript:"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"}),reset=function(){errorMsg.classList.remove("field-invalid"),$(".field-error").html("Pflichtfeld");let e=document.querySelector("#phone").parentElement.previousElementSibling;e.classList.contains("field-error")&&(e.innerHTML="Ungültige Nummer")},checkNumber=function(e){if(reset(),input.value.trim()){if(iti.isValidNumber())return document.querySelector("#phone").parentElement.previousElementSibling.removeAttribute("style"),!0;{errorMsg.classList.add("field-invalid");e=iti.getValidationError();console.log(e),console.log(errorMap[e]);let t=document.querySelector("#phone").parentElement.previousElementSibling;return e.preventDefault(),t.innerHTML=errorMap[e],t.setAttribute("style","display: block"),!1}}};$("[data-role='submit']").click((function(e){var t=$("#phone").val().replaceAll(" ","");if(checkNumber(e)){if(""!=t){var r=$("#phone"),i=$(".iti__selected-flag").first().attr("title").split(/[, ]+/).pop(),l=Number(r.val().replace(i,"").replaceAll(" ",""));console.log(i,l),r.val()&&r.val(i+l),localStorage.setItem("phone","+"+Number(r.val()))}}else""!=t&&e.stopPropagation()}));</script>
<style>.iti {width: 100% !important;} .iti__country-list {position: relative !important;white-space: inherit !important;box-shadow: none !important;border: 1px solid #e1e1e1 !important;}.field-error {background: #e25141;color: #fff;font-size: 12px;padding: 10px;box-sizing: border-box;width: 100%;margin-bottom: 5px;}</style>
<!-- Telefonnummervalidierung END -->

Schritt 4:

Ersetze nun im Code in der kommentierten Zeile den Namen des Elements mit deinem abgespeicherten Namen aus Schritt 2.

Das wars! Speichere deinen Code und teste ihn ordentlich indem du dich selbst mit verschiedenen und falschen Nummern in das Formular einträgst.

Bei Fragen helfen wir dir gerne im LIVE-Chat weiter!

Happy Coding :)