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.
![Anpassen Ihres Formulars mit CSS-Codes Image-1](https://www.jotform.com/blog/wp-content/uploads/2023/06/1.jpg)
.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](https://www.jotform.com/blog/wp-content/uploads/2023/06/image1-7.png)
.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](https://www.jotform.com/blog/wp-content/uploads/2023/06/3-14.png)
.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](https://www.jotform.com/blog/wp-content/uploads/2023/06/4-13.png)
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](https://www.jotform.com/blog/wp-content/uploads/2023/06/5-7.png)
.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](https://www.jotform.com/blog/wp-content/uploads/2023/06/6-6.png)
.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](https://www.jotform.com/blog/wp-content/uploads/2023/06/7-5.png)
.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](https://www.jotform.com/blog/wp-content/uploads/2023/06/8-4.png)
.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](https://www.jotform.com/blog/wp-content/uploads/2023/06/9-3.png)
.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](https://www.jotform.com/blog/wp-content/uploads/2023/06/10-2.png)
.form-all {
margin: 0;
}
Wenn Sie Hilfe bei der Anpassung Ihres Formulars benötigen, wenden Sie sich bitte an den Jotform Support.
Kommentar abschicken: