Beispiele

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.

Leeres Formular: Ein Spambot Honeypot ist eingerichten. Spammer am Werk: Ein Spambot Honeypot ist eingerichten.

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.

Leeres Formular: Mit Datums-Feldern und Zeit-Feldern eine Zeitspanne erfassen. Gefülltes Formular: Mit Datums-Feldern und Zeit-Feldern eine Zeitspanne erfassen.

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;
	}
}