Tipps zur Verwendung von HTML und CSS in Ihren Formularen

In diesem Dokument zeigen wir'zeigen Ihnen, wie Sie den HTML-Code-Block verwenden und teilen Ihnen einige grundlegende HTML- und CSS-Tricks mit, die Sie zur Anpassung Ihrer Formulare verwenden können.

Bitte beachten Sie, dass dies eine fortgeschrittene Funktion ist und Kenntnisse in CSS und HTML erfordert. Wenn Sie mit HTML oder CSS nicht vertraut sind, empfehlen wir Ihnen, mit einem Mitglied Ihres Teams zusammenzuarbeiten, das mit HTML oder CSS vertraut ist. Es gibt auch einige großartige Ressourcen, in denen Sie HTML und CSS lernen können wie dieser hier.

HTML

Der HTML-Block ermöglicht es Ihnen, Text mit eingebetteten Links in Ihr Inline-Formular einzufügen. Sie können dies verwenden, wenn Sie Kontakte zu einer Video- oder Datenschutzbestimmungen auf Ihrer Website verlinken möchten. Sie können auch den Text sowie seine Ausrichtung in diesem speziellen Block formatieren.

Bitte beachten Sie, dass der HTML-Block nur auf Inline-Formularen verwendet werden kann. Float-Box, Float-Bar und modale Formulare haben keine Möglichkeit, einen HTML-Block hinzuzufügen.

Hinzufügen des HTML-Code-Blocks zu Ihrem Formular

Um zu beginnen, ziehen Sie einfach den "HTML Code" block per Drag & Drop an eine beliebige Stelle Ihres Formulars. Dieser Block befindet sich unter den Feldern > Standard:

HTML_code_block.png

Um Ihr benutzerdefiniertes HTML hinzuzufügen, klicken Sie auf diesen HTML-Code-Block in Ihrem Formular. Sobald Sie dies getan haben, können Sie Ihren Code in das Feld auf der rechten Seite Ihres Bildschirms eingeben:

add_html_code.png

Jetzt sind Sie'bereit, Ihr eigenes HTML zu Ihrem Formular hinzuzufügen.

Grundlegender HTML-Code

Sie können Folgendes verwenden, um dem Text in Ihrem HTML-Code-Block ein Styling hinzuzufügen.

Text zentrieren
Verwendete Tags: <center> </center>

In diesem Beispiel haben wir den gewünschten Text in der Mitte zwischen den beiden Tags platziert. So haben wir es eingerichtet: 

<center>Senden Sie uns Ihren Namen und Ihre E-Mail-Adresse, um unseren Newsletter zu abonnieren.</center>

zentrum_text_html.png

Zeilenumbruch hinzufügen
Verwendete Tags: <p> </p>

In diesem Beispiel haben wir einen Link-Unterbruch zwischen zwei Sätzen in unserem HTML-Block hinzugefügt. So haben wir es eingerichtet:

Senden Sie uns Ihren Namen und Ihre E-Mail-Adresse, um unseren Newsletter zu abonnieren. <p>Vergessen Sie nicht, uns in Ihre Kontaktliste aufzunehmen!</p>

Zeilen_Unterbrechung_code.png
Fett gedruckter Text
Verwendete Tags <b> </b>

In diesem Beispiel wollten wir einen Satz in unserem HTML-Block fett formatieren. So haben wir es eingerichtet: 

Senden Sie uns Ihren Namen und Ihre E-Mail-Adresse, um sich für unseren Newsletter anzumelden. <b>Vergessen Sie nicht, uns in Ihre Kontaktliste aufzunehmen!</b>

Fett_html.png

Text unterstreichen
Verwendete Tags <u> </u>

In diesem Beispiel wollten wir einen Satz in unserem HTML-Block unterstreichen. So haben wir es eingerichtet:

Senden Sie uns Ihren Namen und Ihre E-Mail-Adresse, um unseren Newsletter zu abonnieren. <u>Vergessen Sie nicht, uns in Ihre Kontaktliste aufzunehmen!</u>

Unterstreichen_html.png

Link hinzufügen
Verwendete Tags <a href> </a href>

In diesem Beispiel wollten wir einen Link zu unseren Datenschutzbestimmungen hinzufügen, auf den Abonnenten klicken können. So haben wir es eingerichtet:

Senden Sie uns Ihren Namen und Ihre E-Mail-Adresse, um sich für unseren Newsletter anzumelden. <a href="https://www.activecampaign.com/privacy-policy/">Lesen Sie hier unsere Datenschutzbestimmungen.</a>

Link_html.png
Zeile einfügen
Beispiel-Code verwendet: 
<div style="height:10px;border-bottom:1px solid #CCCCCC">
 
</div>

In diesem Beispiel haben wir einen separaten HTML-Code-Block verwendet, um eine Zeile zum Einfügen zwischen zwei Formularelementen zu erstellen.

Einfügen_Zeile_html.png

Beispiel_der_Zeile.png

Erstellen einer Aufzählung
Verwendete Tags <li> </li>

In diesem Beispiel wollten wir auflisten, was die Abonnenten erwarten können, wenn sie sich für unseren Newsletter anmelden. So haben wir es eingerichtet:

Erfahren Sie mehr über Folgendes: <li>Home energy check up</li><li><li>Solarberatung</li><li>Dämmung</li>

bulleted_list_html.png

Farbe zu Ihrem Text hinzufügen
Beispiel-Code verwendet:
<span style="farbe: #267ec2"; <p>Senden Sie uns Ihren Namen und Ihre E-Mail-Adresse, um sich für unseren Newsletter anzumelden</p> </span>

In diesem Beispiel wollten wir dem Text in unserem HTML-Code-Block Farbe hinzufügen. Der verwendete Code ist oben zu finden.

zutreffende_Farbe_html.png

CSS

Sie können das Feld Benutzerdefiniertes CSS und den Inspektor verwenden, um visuelle Elemente Ihres Formulars zu ändern, z. B. die Breite der Schaltfläche "Senden" anpassen, Schriftart und -größe anpassen, Text in einem Element zentrieren, die Farbe Ihres Textes ändern und vieles mehr. Diese Option befindet sich unter der Registerkarte Stil. Alle Formulartypen enthalten die benutzerdefinierte CSS-Box und den Inspektor.

benutzerdefinierte_css_box.png

Um das Feld Benutzerdefiniertes CSS und den Inspektor zu verwenden, klicken Sie auf die Schaltfläche "Style" tab oben rechts in Ihrem Formular-Editor. Klicken Sie dann auf die Inspektor-Schaltfläche und markieren Sie das Element, dem Sie eine benutzerdefinierte Gestaltung hinzufügen möchten, indem Sie darauf klicken.

Anpassen der Breite eines Formularelements

Sie können entweder einen Prozentsatz oder Pixel verwenden, um die Breite eines Elements zu bestimmen. In diesem Beispiel werden wir'die Breite der Schaltfläche "Submit"Submit" anpassen:

  1. Gehen Sie zu "Style" dann klicken Sie auf "Inspector."

    inspector_button.png

  2. Klicken Sie auf die Schaltfläche "Submit" durch auf diese Schaltfläche.

    anklicken_einreichen_um_einzustellen.png
  3. In der CSS-Box Eingabe:width: numberpx; Und ersetzen Sie "number"number" durch Ihre eigene Nummer. In diesem Beispiel haben wir 250px verwendet:

    Beispiel_Breite.png

Der Submit-Button ist jetzt 250 Pixel breit:
wide_submit_button.png

Schriftart und -größe anpassen

Sie können das CSS-Feld verwenden, um die Schriftart für jedes Element in Ihrem Formular zu ändern. In diesem Beispiel werden wir'den Submit-Button modifizieren, indem wir die Schriftart in Georgia ändern und die Schriftgröße auf 25 Pixel anpassen:

  1. Gehen Sie zu "Style" dann klicken Sie auf "Inspector."

    inspector_button.png

  2. Wählen Sie das Element durch Anklicken aus. In diesem Beispiel wählen wir'erneut die Schaltfläche "Submit". click_submit_button_to_adjust.png
  3. In der CSS-Box, Eingabe:Schriftgröße: 25px;Schriftart-Familie: Georgien !wichtig:

    css_für_Schriftart_und_Größe.png

Die Schriftgröße und -art des Submit-Buttons's ist jetzt angepasst:
new_submit_button.png

Text mit CSS zentrieren

  1. Gehen Sie zu "Style" dann klicken Sie "Inspector."

    inspector_button.png

  2. Wählen Sie das Element, das den Text enthält, den Sie zentrieren möchten, indem Sie Anklicken

    center_text_using_css.png
  3. In der CSS-Box, enter:text-align: zentrieren

    center_text_using_css_1.png

Ihr Text ist jetzt zentriert:
text_zentriert.png

Farbe hinzufügen mit CSS

  1. Gehen Sie zu "Style" dann klicken Sie auf "Inspector."

    inspector_button.png

  2. Klicken Sie auf das Element, das den Text enthält, dessen Farbe Sie ändern möchten, indem anklicken.

    Klicken_Element_auf_Farbe_hinzufügen.png
  3. Geben Sie in das CSS-Feld,type: color:#hexcodeforcolor; und ersetzen Sie "number" durch Ihre eigene Nummer. In diesem Beispiel haben wir #f441b8

    hex_farbe.png

Ihr Text ist nun farbig hinterlegt:

blau_text.png

Wenn Sie mehr über CSS erfahren möchten, gibt es einige großartige Ressourcen wie dieses.

Haben Sie Fragen? Anfrage einreichen