Anpassen Ihres Formulars mit CSS-Codes

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.

Hinzufügen eines Hintergrundbildes auf der Seite

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

.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.

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.

.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.

.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.

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.

.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}

Ändern der Farbe der Unterüberschrift

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

.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.

.form-sub-label {
color: #ffb21d;
}

Ändern der Farbe des Hervorhebungseffekts

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

.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.

.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.

.form-all {
margin: 0;
}

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