Anpassen Ihres Formulars mit CSS-Codes

7. Dezember 2023

Neben dem integrierten Formular-Designer können Sie Ihre Formulare auch mit CSS im Formular-Generator anpassen. Dieser Anleitung enthält einige Beispiele für CSS Codes, die Sie in Ihren Formularen ausprobieren oder verwenden können. Wie Sie CSS auf Ihr Formular anwenden können, erfahren Sie unter Wie man benutzerdefinierte CSS-Codes einfügt.

Youtube Embed Poster: v2apY6221Ro

Hinzufügen eines Hintergrundbildes auf der Seite

Mit dem folgenden CSS Code können Sie ein benutzerdefiniertes Hintergrundbild für Ihr Formular hinzufügen.

Anpassen Ihres Formulars mit CSS-Codes Image-1
.supernova {
background-image: url('{image_url}');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}
body {
background: none;
}

Replace {image_url} with your background image’s URL.

Hinweis

Verwenden Sie eine sichere HTTPS-Adresse für die Bild-URL, um die Sperrung gemischter Inhalte zu vermeiden.

Den Seitenhintergrund transparent machen

Bei eingebetteten Formularen können Sie den folgenden Code verwenden, wenn Sie möchten, dass Ihr Formular den Hintergrund Ihrer Webseite verwendet.

Anpassen Ihres Formulars mit CSS-Codes Image-2
.supernova, body {
background: none;
}

Den Formularhintergrund transparent machen

Der folgende Code entfernt den Hintergrund und den Schatten des Formulars und macht es flach und transparent.

Anpassen Ihres Formulars mit CSS-Codes Image-3
.form-all {
background: none !important;
box-shadow: none;
}

Entfernen des Abstandes über dem Formular

Nützlich für eingebettete Formulare: Der folgende Code entfernt den zusätzlichen Platz über Ihrem Formular.

Anpassen Ihres Formulars mit CSS-Codes Image-4
body, .form-all {
margin-top: 0;
}

Ändern der Hintergrundfarbe der Überschrift

Verwenden Sie den folgenden Code, um die Hintergrundfarbe aller Überschriften-Elemente in Ihrem Formular zu ändern.

Anpassen Ihres Formulars mit CSS-Codes Image-5
.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}

Pro Tipp

Für farbbezogene Eigenschaften können Sie diesen Farbwähler verwenden, um den Hexadezimalwert Ihrer Farbe zu erzeugen (z. B. #a1b2c3).

Ändern der Farbe der Unterüberschrift

Der folgende Code ändert die Textfarbe aller Unterüberschriften Ihrer Überschriften-Elemente.

Anpassen Ihres Formulars mit CSS-Codes Image-6
.form-subHeader {
color: #00b000 !important;
}

Ändern der Farbe aller Unteretiketten

Verwenden Sie den folgenden CSS-Code, um die Farbe aller Unteretiketten in Ihrem Formular zu ändern.

Anpassen Ihres Formulars mit CSS-Codes Image-7
.form-sub-label {
color: #ffb21d;
}

Ändern der Farbe des Hervorhebungseffekts

Sie können den folgenden Code verwenden, um den Hintergrund von Eingabefeldern hervorzuheben.

Anpassen Ihres Formulars mit CSS-Codes Image-8
.form-line-active {
background: #ccffcc;
}

Ändern der Farbe des erforderlichen Sterns im Formular

Standardmäßig rot, ändert der folgende Code das Kennzeichen „erforderlich“ der Felder.

Anpassen Ihres Formulars mit CSS-Codes Image-9
.form-required {
color: cyan !important;
}

Ausrichten des Formulars nach links

Bei eingebetteten Formularen können Sie den folgenden Code verwenden, um Ihr Formular nach links zu verschieben.

Anpassen Ihres Formulars mit CSS-Codes Image-10
.form-all {
margin: 0;
}

Wenn Sie Hilfe bei der Anpassung Ihres Formulars benötigen, wenden Sie sich bitte an den Jotform Support.

Support kontaktieren:

Unser Kundensupport-Team ist rund um die Uhr erreichbar und die durchschnittliche Antwortzeit beträgt zwischen ein und zwei Stunden.
Sie können unser Team erreichen über:

Support Forum: https://www.jotform.com/answers/

Kontakt zum Jotform Support: https://www.jotform.com/contact/

Kommentar abschicken:

Jotform Avatar
Diese Seite ist durch reCAPTCHA geschützt und es gelten die Google Datenschutzbestimmungen und Nutzungsbedingungen.

Kommentare:

  • UZH Alumni - Profile picture