Anpassen Ihres Formulars mit CSS-Codes

Neben dem integrierten Formulardesigner können Sie Ihre Formulare auch mit CSS im Formular-Generator anpassen. Dieser Leitfaden enthält einige Beispiele für CSS-Codes, die Sie ausprobieren oder auf Ihre Formulare anwenden können. Um CSS auf Ihr Formular anzuwenden, lesen Sie Einfügen von benutzerdefinierten CSS-Codes.

Watch on youtube

Inject Custom CSS Codes to your Form

Hinzufügen eines Hintergrundbildes zur Seite

Der folgende CSS-Code ermöglicht es Ihnen, ein benutzerdefiniertes Hintergrundbild für Ihr Formular hinzuzufügen.

.supernova {
	background-image: url('{image_url}');
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: cover;
}
body {
	background: none;
}

Ersetzen Sie {image_url} durch die URL Ihres Hintergrundbildes.

Den Seitenhintergrund transparent machen

Useful for embedded forms, you can use the following code if you need your form to use your web page’s background.

.supernova, body {
	background: none;
}

Den Formularhintergrund transparent machen

Der folgende Code entfernt den Hintergrund und Schatten Ihres Formulars, sodass es flach und transparent erscheint.

.form-all {
	background: none !important;
	box-shadow: none;
}

Entfernen des Abstands über dem Formular

Der folgende Code entfernt den zusätzlichen Abstand über Ihrem Formular, was besonders nützlich für eingebettete Formulare sein kann.

body, .form-all {
	margin-top: 0;
}

Ändern der Hintergrundfarbe der Überschrift

Verwenden Sie den folgenden Code, um die Hintergrundfarbe der Überschriftselemente Ihres Formulars 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 Überschriftselemente.

.form-subHeader {
	color: #00b000 !important;
}

Ändern der Farbe aller Untertitel

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

Mit dem folgenden Code können Sie die Hintergrundfarbe der Hervorhebung bei Eingabefeldern ändern.

.form-line-active {
	background: #ccffcc;
}

Ändern der Farbe des Pflichtfeld-Sternchens

Der folgende Code ändert den Indikator für erforderliche Felder, der standardmäßig rot ist.

.form-required {
	color: cyan !important;
}

Das Formular linksbündig ausrichten

Nützlich für eingebettete Formulare: Mit dem folgenden Code können Sie Ihr Formular nach links verschieben.

.form-all {
	margin: 0;
}

Wenn Sie Hilfe bei der Anpassung Ihres Formulars benötigen, können Sie sich gerne an den Jotform-Support wenden.