### [So erstellen Sie ein Stylesheet für Konversationsformulare](https://wpforms.com/developers/how-to-enqueue-a-stylesheet-for-conversational-forms/)
**Veröffentlicht:** 4. Dezember 2020
**Autor:** Redaktionsteam
**Auszug:** Dieses Tutorial zeigt Ihnen, wie Sie ein Stylesheet für jedes Formular mit aktivierten Konversationsformularen einbinden.
**Inhalt:**
Möchten Sie Ihr eigenes Stylesheet für das Addon **Konversationsformulare** einbinden? Sie können Ihr eigenes CSS mit einer dieser Methoden aus [diesem Tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu") hinzufügen, aber wussten Sie, dass Sie auch einen Filter verwenden können, um ein dediziertes Stylesheet für Ihre Konversationsformulare einzubinden? Diese Methode kann die Organisation erheblich erleichtern, und in diesem Tutorial zeigen wir Ihnen, wie Sie ein dediziertes Stylesheet für diese Formulare einbinden.
## Erstellen Ihres Konversationsformulars
Zuerst müssen Sie ein Konversationsformular erstellen und Ihre Felder hinzufügen. Wenn Sie dabei Hilfe benötigen, [lesen Sie bitte diese Dokumentation](https://wpforms.com/docs/how-to-install-and-use-the-conversational-forms-addon/ "So installieren und verwenden Sie das Addon für Konversationsformulare").
## Anpassen des Konversationsformulars
Nachdem Sie Ihr Konversationsformular erstellt haben, fügen wir für dieses Tutorial einige Texte zum Feld **Nachricht** auf der Registerkarte **Konversationsformular** hinzu. Dies ist eine Nachricht, die Ihre Besucher sehen, sobald das Formular geladen wird.
Sie können hinzufügen, was Sie benötigen, aber wir fügen einige Texte, einen Link und eine unsortierte Liste mit Folgendem hinzu.
`Sie sind dabei, ein Bestellformular für das Themenpaket 3 abzuschließen. Um die Allgemeinen Geschäftsbedingungen zu prüfen, klicken Sie bitte hier. Dies beinhaltet, ist aber nicht beschränkt auf: Thema 1 Thema 2 Thema 3 Kostenloses Plugin 1 Kostenloses Plugin 2 Kostenloses Plugin 3`
## Einbinden eines Stylesheets für Konversationsformulare
Bevor wir unser eigenes Stylesheet für Konversationsformulare einbinden können, müssen wir zuerst diesen Code-Schnipsel hinzufügen, der dies ermöglicht.
Wenn Sie Hilfe beim Hinzufügen von Code zu Ihrer Website benötigen, [lesen Sie bitte dieses Tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "So fügen Sie benutzerdefinierten PHP- oder JavaScript-Code für WPForms hinzu").
```
/**
* Binden Sie Ihr eigenes Stylesheet für Konversationsformulare ein
*
* @link https://wpforms.com/developers/how-to-enqueue-a-stylesheet-for-conversational-forms/
*/
function wpfdev_convoform_custom_css() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/name-of-your-css-file.css' );
}
add_action( 'wpforms_conversational_forms_enqueue_styles', 'wpfdev_convoform_custom_css', 10 );
```
## Erstellen und Hochladen des Stylesheets in Ihr Theme-Verzeichnis
Nachdem der Code hinzugefügt wurde, müssen Sie nun Ihre CSS-Datei erstellen.
Hier sind einige grundlegende CSS-Stile, die wir für dieses Tutorial verwendet haben
```
.wpforms-title {
color: #e27730!important;
font-size: 36px !important;
}
.wpforms-description {
line-height: 1.6em;
text-align: left;
white-space: normal !important;
max-width: 90%;
font-size: 18px !important;
margin: 0 auto;
}
.wpforms-description a {
color: #e27730;
text-decoration: none;
}
.wpforms-description a:hover {
color: #c45e1b;
}
.wpforms-description ul li {
list-style: circle !important;
list-style-position: inside !important;
font-size: 16px;
}
button.wpforms-conversational-btn-start.wpforms-conversational-btn {
background-color: #e27730 !important;
color: rgba(255,255,255,1) !important;
}
button.wpforms-conversational-btn-start.wpforms-conversational-btn:hover {
background-color: #c45e1b !important;
}
.wpforms-conversational-form-btn-desc {
display: none !important;
}
```
Dies sind nur einige Standard-CSS-Regeln für Links und unsortierte Listen. Wir haben auch den Titel des Konversationsformulars gestylt und den Text entfernt, den Sie normalerweise neben der Schaltfläche **Start** sehen.
Nachdem Sie die CSS-Regeln erstellt haben, ist es nun an der Zeit, sie per FTP oder mit einem FTP-ähnlichen Plugin in das Theme-Verzeichnis hochzuladen. Für den Upload per FTP können Sie [diesem Tutorial folgen](https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/ "So verwenden Sie FTP, um Dateien auf WordPress hochzuladen für Anfänger").
Für unser Tutorial haben wir ein [in diesem Tutorial erwähntes WordPress-Plugin](https://wordpress.org/plugins/wp-file-manager/ "Dateimanager") verwendet, um Zugriff auf unseren Server zu erhalten.
## Anzeigen des Konversationsformulars
Wenn Besucher die Seite nun aufrufen, sehen sie die neuen Stile, die durch das Einbinden unseres eindeutigen Stylesheets hinzugefügt wurden.
Und das ist alles, was Sie benötigen, um ein spezifisches Stylesheet für das Addon **Konversationsformulare** einzubinden. Möchten Sie das Logo verlinken, das auf Ihren Konversationsformularen angezeigt wird? Schauen Sie sich unsere Dokumentation zu [So verlinken Sie Ihr Logo für Konversationsformulare](https://wpforms.com/developers/how-to-link-your-conversational-form-logo/ "So verlinken Sie Ihr Logo für Konversationsformulare") an.
## Referenzaktion
[wpforms\_conversational\_forms\_enqueue\_styles](https://wpforms.com/developers/wpforms_conversational_forms_enqueue_styles/ "Verwendung der Aktion wpforms_conversational_forms_enqueue_styles")
## FAQ
#### F: Kann ich dies auch für das Addon **Formularseiten** verwenden?
**A:** Um eine eindeutige Einbindung für das Addon **Formularseiten** zu erhalten, verwenden Sie stattdessen diesen Code-Schnipsel. Sie können mehr über diese Aktion erfahren, indem Sie [diese Dokumentation](https://wpforms.com/developers/wpforms_form_pages_enqueue_styles/ "Verwendung des Filters wpforms_form_pages_enqueue_styles") überprüfen.
```
/**
* Binden Sie Ihr eigenes Stylesheet für das Addon Formularseiten ein
*
* @link https://wpforms.com/developers/wpforms_form_pages_enqueue_styles/
*/
function wpfdev_formpages_custom_css() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/name-of-your-css-file.css' );
}
add_action( 'wpforms_form_pages_enqueue_styles', 'wpfdev_formpages_custom_css', 10 );
```
**Kategorien:** Addons
**Tags:** PHP
---