Wie Sie mit Jotform Zahlungsinformationen erhalten, ohne Gebühren zu erheben

Das unten abgebildete Formular veranschaulicht unser Ziel. Klicken Sie auf das Bild, um es zu verwenden.

Wie Sie sehen, muss ein Nutzer, der seinen Namen in das Feld Ihr Name eingibt und denselben Namen im Feld Name des Verkäufers verwenden möchte, lediglich Sie sind der Verkäufer ankreuzen. Möchte er später einen anderen Namen in das zweite Feld eintragen (z. B. Batman), genügt es, das Kontrollkästchen erneut zu aktivieren, um das Häkchen zu entfernen. Dasselbe gilt für die Felder Ihre E-Mail und E-Mail des Verkäufers sowie Privatadresse und Adresse des Verkäufers. Wenn Sie das Formular ausfüllen und absenden (klicken Sie auf das Bild oben), sehen Sie, dass die beim Anklicken der Kontrollkästchen eingefügten Einträge auch in der automatischen Antwort erscheinen.

Die Seite, in die das Formular eingebettet ist, enthält direkt über dem schließenden body-Tag einen JavaScript-Block. Dieser verleiht dem Formular zusammen mit onClick-Eventhandlern in den Eingabe-Tags der Kontrollkästchen die Kopieren-und Einfügen-Funktionalität.

So integrieren Sie diese Funktionalität in Ihr eigenes Formular Formulare

Angenommen, Sie haben ein Formular mit zwei Adressfeldern (Privatadresse und Geschäftsadresse) und möchten Nutzern die Möglichkeit geben, die erste Adresse in die zweite zu kopieren. So gehen Sie vor:

1. Laden Sie das Formular in den Formular Generator und fügen Sie direkt vor dem Feld Geschäftsadresse ein Kontrollkästchen ein.

2. Klicken Sie auf Optionen, entfernen Sie die Optionen 2 und 3, benennen Sie Option 1 in Gleiche Adresse wie oben um und klicken Sie auf „OK“.

3. Ändern Sie die Beschriftung des Kontrollkästchens von Zum Bearbeiten klicken in Gleiche Adresse wie oben.

4. Verwenden Sie Firebug oder ein anderes Webentwicklertool, um schnell die ID der Beschriftung des Kontrollkästchens herauszufinden (alternativ können Sie einfach in der Quelle suchen), und verwenden Sie eingefügtes CSS, um es mit einer Deklaration von entweder display:none; oder visual:hidden; auszublenden, je nach Ihren Anforderungen. Wenn die ID des Labels also label_6 laute und Sie es einfach ausblenden möchten, ohne angrenzende Elemente neu zu positionieren, fügen Sie die folgende Regel ein: #label_6 {
  visibility:hidden;
} 5.  Speichern Sie das Formular und gehen Sie zu Setup & Klicken Sie auf die Registerkarte „Einbetten”, klicken Sie auf Formular einbetten, klicken Sie auf die Schaltfläche Quelle und kopieren Sie den vom Assistenten bereitgestellten Code. (Derzeit ist es nicht möglich, die Funktion Kopieren und Einfügen mit der Adresse eines Formulars zu verwenden.)

6. Fügen Sie den Quelltext des Formulars in die Webseite ein, auf der das Formular erscheinen soll.

7. Suchen Sie in der Quelle nach der Zeichenfolge value=Same Address as Above /> und ändern Sie sie in value=Same Address as Above onclick=copy_address(); />

8. Fügen Sie diesen JavaScript-Block direkt vor dem schließenden body-Tag ein und ersetzen Sie in diesem JavaScript-Block jede Instanz von “12885302469” durch die ID Ihres Formulars (die Ziffernfolge am Ende der URL, die in der Formularvorschau angezeigt wird, wie hervorgehoben). in diesem Beispiel)

9. Suchen Sie in der Quelle nach der Privatadresse und achten Sie auf die wiederkehrende Ziffer oder Zahl in derselben Zeile, darüber und darunter (siehe Screenshot).

10. Ersetzen Sie im JavaScript-Block jede angegebene 5. in diesem Screenshot mit der in Schritt 9 notierten Ziffer oder Zahl. (Wenn die Ziffer zufällig 5 ist, muss dieser Teil des Skripts natürlich nicht bearbeitet werden.)

11. Suchen Sie in der Quelle nach Geschäftsadresse und notieren Sie sich die wiederkehrende Ziffer oder Zahl, die in derselben Zeile erscheint, die darüber und die darunter (siehe Screenshot).

12. Ersetzen Sie im JavaScript-Block jede 8 in diesem Screenshot durch die in Schritt 11 notierte Ziffer oder Zahl. (Wenn die Ziffer zufällig eine 8 ist, muss dieser Teil des Skripts natürlich nicht bearbeitet werden.)

Wie funktioniert es?

Wenn Sie den Quelltext der Webseite aufrufen, in die das oben abgebildete Beispielformular (nachfolgend Hollywood-Formular genannt) eingebettet ist, sehen Sie den JavaScript-Block direkt vor dem abschließenden Body-Tag. Dieser ermöglicht zusammen mit den onClick-Ereignishandlern in den Eingabe-Tags der Kontrollkästchen die Funktion Kopieren & des Formulars. Einfügen-Funktionalität. Lassen Sie uns den Inhalt des JavaScript-Blocks (Link öffnet sich in einem separaten Tab – Zeilennummern sind zur einfachen Bezugnahme enthalten) teilweise aufschlüsseln: Die Zeilen 1 – 10, 12 – 19 und 21 – 38 sind drei separate, aber ähnliche Funktionen mit den Namen copy_name(), copy_email() und copy_address(), die jeweils eine IF-ELSE-Anweisung enthalten.

Die erste Funktion: copy_name()

Betreff: Zeilen 1 – 10

Hierdurch werden Vor- und Nachnamen aus dem Feld „Ihr Name“ in das Feld „Name des Verkäufers“ kopiert, wenn das Kontrollkästchen „Sie sind der Verkäufer“ aktiviert ist. Wird das Kontrollkästchen deaktiviert, werden die Einträge aus dem Feld „Name des Verkäufers“ gelöscht. Die IDs der Eingaben finden Sie im Quelltext des Formulars und sind unten aufgeführt. (Die entsprechenden Eingaben sind in Klammern angegeben.) input_11_0 (Kontrollkästchen „Sie sind der Verkäufer“) first_6 (Textfeld „Vorname“ im Feld „Name des Verkäufers“) last_6 (Textfeld „Nachname“ im Feld „Name des Verkäufers“) first_3 (Textfeld „Vorname“ im Feld „Ihr Name“) last_3 (Textfeld „Nachname“ im Feld „Ihr Name“) Feld) Zeile 3 untersucht den Status (Wert) des Kontrollkästchens „Sie sind der Verkäufer“ (input_11_0) im Formular (form_12885302469), das wiederum im Dokument vorhanden ist. Wenn das Kontrollkästchen aktiviert ist, wird die Bedingung (in Klammern) als WAHR ausgewertet und der Code zwischen den ersten Klammern nach der Bedingung (Zeilen 4 – 5: der WAHR-Zweig der IF-ELSE-Anweisung) ausgeführt. Andernfalls (ELSE), wenn das Kontrollkästchen vom Benutzer deaktiviert wird, wird der FALSCH-Zweig (Zeilen 7 – 8