Anmeldeformular auf Webseite einbinden

Geändert am Wed, 27 Jul 2022 um 09:55 AM

INHALTSVERZEICHNIS


Nachdem du ein Anmeldeformular erstellt hast, kannst du dieses, wie hier nachfolgend beschrieben, auf deiner eigenen Webseite einbinden. Sobald das Formular auf deiner Webseite eingebunden ist, kannst du sofort damit beginnen, neue Kontakte zu generieren.


Wenn du noch kein Anmeldeformular in Campaign.Plus angelegt hast, dann kannst du hier nachlesen, wie das geht.


Campaign.Plus bietet dir aktuell zwei Optionen dein Formular im Web einzubinden. Öffne zunächst das Formular, welches du auf deiner Webseite einbinden möchtest unter "Empfänger" -> "Webformulare". Rechts neben den Formular-Eintellungen findest du den Einbettungs-Code.



1 HTML-Formular für maximale Flexibilität


Rechts bei den Formular-Einstellungen ist der Tab "Simpel (Validierend, HTML5) vorausgewählt. In Diesem Tab-Inhaltsfenster findest du einen HTML-Code-Schnipsel.



Diesen HTML-Code-Schnipsel kannst du nun herauskopieren. Platziere es dort, wo du das Formular auf deiner Webseite haben möchtest. Oder schicke dieses an deinen Webmaster, damit er/sie es für dich hinterlegt. Du kannst das Formular frei gestalten und bearbeiten. Lediglich die "Form-Action", sowie die Name-Attribute der Input-Felder dürfen nicht verändert werden.


1.2 Formularfelder


Solltest du in deinem Anmeldeformular mehr als nur die E-Mail-Adresse abfragen wollen, so kannst du auch weitere Standardfelder oder benutzerdefinierte Felder hinzunehmen.


Dabei solltest du den "Type"-Attribute der Inputfelder dem Daten-Typ deiner hinzugefügten Felder anpassen. Zum aktuellen Zeitpunkt generiert Campaign.Plus unabhängig von den Daten-Typen alle Input-Felder mit dem Type-Attribute "text". Nachfolgend findest du Beispiele, wie du die Input-Felder umschreiben kannst, damit diese die Eingabe von Daten erleichtern oder erst ermöglichen.


1.2.1 Datum


Generiertes Feld:

<label for="Datum">Datum</label><input type="text" name="Datum">


Vorschlag für Änderung

<label for="Datum">Datum</label><input type="date" name="Datum">


1.2.2 Zahl


Generiertes Feld

<label for="Zahl">Zahl</label><input type="text" name="Zahl">


Vorschlag für Änderung

<label for="Zahl">Zahl</label><input type="number" name="Zahl">


1.2.3 Aufzählung (Radio-Buttons oder Selects)


Generiertes Feld

<label for="Aufzählung">Aufzählung</label><input type="text" name="Aufzählung">


Vorschlag für Änderung: Darstellung als Radio-Buttons

<label for="Aufzaehlung_1">Aufzählung 1</label>
<input type="radio" name="Aufzählung" id="Aufzaehlung_1" value="Eigenschaft 1">

<label for="Aufzaehlung_2">Aufzählung 2</label>
<input type="radio" name="Aufzählung" id="Aufzaehlung_2" value="Eigenschaft 2">

Vorschlag für Änderung: Darstellung als Select

<label>Auswahl</label>
<select name="Aufzählung" id="Aufzaehlung_1">
<option value="">-- Bitte wählen --</option>
<option value="Eigenschaft 1">Eigenschaft 1</option>
<option value="Eigenschaft 2">Eigenschaft 2</option>
</select>


Tipp: Setze als "Value" in den Input-Feldern die jeweiligen Eigenschaften, die du bei dem benutzerdefinierten Feld vom Typ "Aufzählung" hinterlegt hast. Wenn du nicht mehr weißt, welche das waren, kannst du dir diese unter "Empfänger" -> "Benutzerdefinierte Felder" anzeigen lassen.


1.2.4 Multiaufzählung (Checkboxen)


Generiertes Feld

<label for="Multiaufzählung">Multiaufzählung</label><input type="text" name="Multiaufzählung">

Vorschlag für Änderung

<label for="Multiaufzaehlung[Eigenschaft_1]">Multiaufzählung Eigenschaft 1</label>
<input type="checkbox" name="Multiaufzählung[Eigenschaft 1]" id="Multiaufzaehlung[Eigenschaft_1]">

<label for="Multiaufzaehlung[Eigenschaft_2]">Multiaufzählung Eigenschaft 2</label>
<input type="checkbox" name="Multiaufzählung[Eigenschaft 2]" id="Multiaufzaehlung[Eigenschaft_2]">

<label for="Multiaufzaehlung[Eigenschaft_2]">Multiaufzählung Eigenschaft 2</label>
<input type="checkbox" name="Multiaufzählung[Eigenschaft 2]" id="Multiaufzaehlung[Eigenschaft_2]">


2 POPUP (Javascript)


Alternativ zum HTML-Formular bieten wir dir noch das Pop-Up Fenster an. Dieses kannst du ähnlich wie das HTML-Formular überall auf deiner Webseite einbinden. Klicke dazu rechts in den Formular-Einstellungen auf den Reiter "POPUP (Validierend, JS)".



Das Pop-Up-Formular kann sehr einfach, ohne großes Vorwissen eingebunden werden. Kopiere dazu das Code-Schnipsel und füge es in deiner Webseite ein. Im Frontend deiner Webseite siehst du nun einen Button mit der Aufschrift "Jetzt anmelden". Beim Klick auf diesen Button öffnet sich ein Pop-Up-Fenster, dass das eigentlichen Formular enthält. Der Button kann von dir frei gestaltet werden. Das Pop-Up-Fenster so wie das Formular können jedoch nicht von dir verändert werden. Wenn du neben der E-Mail-Adresse noch weitere Daten abfragen möchtest, so werden bei diesem Formular-Typ derzeit nur Felder vom Typ "Text" unterstützt. 


2.1 Texte anpassen


Das Pop-Up-Formular bietet dir die Möglichkeit, Titel, Button-Bezeichnungen, sowie Fehler- und Erfolgsmeldungen selbst zu definieren. Ändere dafür die entsprechenden Passagen im Code ab:








Hast du noch Fragen? Dann schreib uns!