Beispiele zur Lösung von Anforderungen mit den Frontend Webassets
Hinweis: Diese Feature sind Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten.
Einen Spambot Honeypot einrichten
Themen
- Ein Formular-Feld (Typ ‘E-Mail’) verstecken und es nicht anzeigen.
- Prüfen, ob ein Spambot im versteckten Formular-Feld einen Wert gesetzt hat.
- Auf das Abschicken des Formulars reagieren.
- Einen benutzerdefinierten Event-Handler für das Abschicken des Formulars setzen.
- Das Abschicken des Formulars verhindern.
- Eine Meldung an den Benutzer zeigen.
Beschreibung
Visforms unterstützt mehrere effective Möglichkeiten, das Formular gegen Spambots abzusichern. Wenn zusätzliche Maßnahmen ergriffen werden sollen, dann gibt es mehrere einfache Methoden. Hier wird gezeigt, wie mit wenig Aufwand ein Spambot Honeypot eingerichtet werden kann.
Ein Honeypot kann eingerichtet werden, in dem ein weiteres Feld vom Typ ‘E-Mail’ hinzugefügt wird, das:
- für den Benutzer nicht sichtbar ist,
- aber Spambots das unsichtbare Feld schön ausfüllen.
Vor dem Absenden des Formulars wird überprüft, ob das Feld leer ist. Ist das unsichtbare Feld vom Typ ‘E-Mail’ gefüllt, wird das Absenden des Formulars verhindert. Anstelle des Absendens des Formulars wird ein modaler Dialog mit einer durchaus irreführenden Nachricht gezeigt.
Grundsätzlich funktioniert es auch mit einem Feld vom Typ ‘Versteckt’. Ein Feld vom Typ ‘Versteckt’ ist im Formular automatisch nicht sichtbar. In diesem Fall wäre die eine JavaScript Zeile unnötig, die das Feld versteckt:
jQuery('div.field' + fieldID).css('display', 'none');
Ein unsichtbares Feld vom Typ ‘E-Mail’ ist allerdings für Spammer besser geeignet.
Anpassung an Ihr Formular
Folgende Anpassungen sind am JavaScript-Code sowie Ihrem Formular notwendig:
- Fügen Sie im Formular ein zusätzliches Feld vom Typ ‘E-Mail’ ein, dass sich nicht benötigen.
- Fügen Sie den JavaScript-Code in der Formular-Konfiguration, Reiter ‘Frontend Webassets’, Reiter ‘Formular’ in das Feld ‘JavaScript’ ein.
- Ändern Sie im JavaScript-Code den Wert der Variablen ‘formID’ auf die ID Ihres Formulars.
- Ändern Sie im JavaScript-Code den Wert der Variablen ‘fieldID’ auf die ID Ihres Feldes.
Der Test-Code
Der JavaScript-Code enthält am Ende einen Test-Code. Der Test-Code spielt ‘Spammer’ und füllt nach 4 Sekunden Wartezeit das unsichtbare E-Mail Feld mit einer E-Mail-Adresse.
Hinweis: Auf der produktiven Seite ist dieser Test-Code auszukommentieren oder ganz zu entfernen.
Der JavaScript-Code
// suppress form submit in case of spambot filled hidden field
jQuery(document).ready(function() {
console.log('FEWA script loaded');
const formID = '44';
const fieldID = '464';
jQuery('div.field' + fieldID).css('display', 'none');
window['visform' + formID + 'SubmitAction'] = function (form) {
if('' !== jQuery('#field' + fieldID).val()) {
alert("Please log in first!");
return false;
}
return true;
};
// only for testing purposes: emulate spambot attack
window.setTimeout(function () {
jQuery('#field' + fieldID).val('spambot@text.de');
}, 4000);
});
Mit Datums-Feldern und Zeit-Feldern eine Zeitspanne erfassen
Themen
Die folgenden Themen sind im Beispiel enthalten:
- Ermitteln der gewählten Werte von Datums-Feldern.
- Ermitteln des individuell konfigurierten Datums-Formates der Datums-Felder.
- Ermitteln der Werte von Text-Feldern des Formulars.
- Auf Änderungen durch den Benutzer reagieren.
- Prüfen auf Vollständigkeit der Benutzer-Angaben
- Programmieren und Rechnen mit Datums-Werten.
- Programmieren und Rechnen mit Zeit-Werten.
- Parsen eines Datums im Text-Format in ein JavaScript ‘Date’ Objekt.
- Ausgabe in ein Text-Feld des Formulars.
Beschreibung
Im Formular gibt es jeweils ein Datums-Feld und ein Text-Feld zur Eingabe der Einschlaf-Zeit und Aufwach-Zeit. Wenn das letzte Feld gefüllt ist, beginnt die Berechnung der Schlafens-Zeit. In einem weiteren Feld wird die zeitliche Differenz in Stunden angezeigt.
Hinweis: Die Berechnung beachtet die möglichen unterschiedlich Feld-Einstellungen für das Datums-Format. In der Feld-Konfiguration können für Datums-Felder verschiedene Datums-Formate gesetzt sein.
Der JavaScript-Code
jQuery(document).ready(function() {
console.log('FEWA script loaded');
const startDateID = '556'; // Visforms start date field ID of field list
const startTimeID = '557'; // Visforms start time (text) field ID of field list
const endDateID = '558'; // Visforms end date field ID of field list
const endTimeID = '559'; // Visforms end time (text) field ID of field list
const sleepingTimeID = '560'; // Visforms start time (text) field ID of field list
function calculateHours() {
// Get values from input fields
const startDateValue = jQuery(`#field${startDateID}`).val();
const startTimeValue = jQuery(`#field${startTimeID}`).val();
const endDateValue = jQuery(`#field${endDateID}`).val();
const endTimeValue = jQuery(`#field${endTimeID}`).val();
const startDateFormat = jQuery(`#field${startDateID}_btn`).attr('data-date-format');
const endDateFormat = jQuery(`#field${endDateID}_btn`).attr('data-date-format');
if(startDateValue === '' || startTimeValue === '' || endDateValue === '' || endTimeValue === '' ) {
return;
}
// Create date objects
const startDate = addTimeToDate(stringToDate(startDateValue, startDateFormat), startTimeValue);
const endDate = addTimeToDate(stringToDate(endDateValue, endDateFormat), endTimeValue);
// Calculate time difference in milliseconds
const timeDifference = endDate - startDate;
// Convert milliseconds to hours
let hoursDifference = timeDifference / (1000 * 60 * 60);
// Round to 2 digits
hoursDifference = Math.round((hoursDifference + Number.EPSILON) * 100) / 100
// Display the result
jQuery(`#field${sleepingTimeID}`).val(hoursDifference);
}
// Call the function when any of the relevant fields change
jQuery(`#field${startDateID}, #field${startTimeID}, #field${endDateID}, #field${endTimeID}`).on('change', calculateHours);
// You can also call the function initially if needed
// calculateHours();
});
function stringToDate(date, format) {
// parsing a string into a date
const delimiter = format.charAt(2);
const formatLowerCase = format.toLowerCase();
const formatItems = formatLowerCase.split(delimiter);
const dateItems = date.split(delimiter);
const monthIndex = formatItems.indexOf("%m");
const dayIndex = formatItems.indexOf("%d");
const yearIndex = formatItems.indexOf("%y");
const month = parseInt(dateItems[monthIndex]) - 1;
return new Date(dateItems[yearIndex], month, dateItems[dayIndex]);
}
function addTimeToDate(date, time) {
// replace all spaces
time = time.replace(/\s/g, '');
// split hours and minutes
const parts = time.split(':');
if(parts[0] === '') {
// empty time string
return date;
}
else if(parts.length == 1) {
// only hour present
date.setHours(parseInt(parts[0]));
return date;
}
else {
// hour and minutes present
date.setHours(parseInt(parts[0]), parseInt(parts[1]));
return date;
}
}