How to Enqueue a Stylesheet for Conversational Forms

Markdown anzeigen

Möchten Sie Ihr eigenes Stylesheet für das Add-on Conversational Forms in die Warteschlange stellen? Sie können Ihr eigenes CSS mit einer dieser Methoden aus diesem Tutorial hinzufügen, aber wussten Sie, dass Sie auch einen Filter verwenden können, um ein dediziertes Stylesheet für Ihre Konversationsformulare in die Warteschlange zu stellen? Diese Methode kann die Organisation erheblich erleichtern, und in diesem Tutorial zeigen wir Ihnen, wie Sie ein dediziertes Stylesheet für diese Formulare in die Warteschlange stellen.

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.

Sobald Sie Ihre Felder hinzugefügt haben, stellen Sie sicher, dass Sie die konversationellen Formulare im Einstellungs-Tab aktivieren.

Anpassen des Konversationsformulars

Sobald Sie Ihr Konversationsformular erstellt haben, fügen wir für dieses Tutorial Text 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 Text, 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 lesen, Dies beinhaltet, ist aber nicht beschränkt auf Folgendes: <ul> <li>Thema 1</li> <li>Thema 2</li> <li>Thema 3</li> <li>Kostenloses Plugin 1</li> <li>Kostenloses Plugin 2</li> <li>Kostenloses Plugin 3</li> </ul>

Stylesheet für Konversationsformulare in die Warteschlange stellen

Bevor wir unser eigenes Stylesheet für Konversationsformulare in die Warteschlange stellen können, müssen wir zuerst diesen Codeausschnitt hinzufügen, der dies ermöglicht.

Wenn Sie Hilfe beim Hinzufügen von Code zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.

/**
 * Enqueue your own stylesheet for conversational forms
 * 
 * @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

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

Sobald Sie die CSS-Regeln erstellt haben, ist es nun an der Zeit, sie per FTP oder mit einem FTP-Plugin in das Theme-Verzeichnis hochzuladen. Für den Upload per FTP können Sie diesem Tutorial folgen.

Für unser Tutorial haben wir ein WordPress-Plugin verwendet, das in diesem Tutorial erwähnt wird, um Zugriff auf unseren Server zu erhalten.

Erstellen Sie Ihre CSS-Datei mit Ihren eindeutigen CSS-Regeln und laden Sie sie in Ihr Theme-Verzeichnis hoch

Anzeigen des Konversationsformulars

Wenn Besucher die Seite nun aufrufen, sehen sie die neuen Stile, die einfach durch das Einreihen unseres einzigartigen Stylesheets hinzugefügt wurden.

Binden Sie Ihr eigenes, eindeutiges Stylesheet für konversationelle Formulare ein, um Ihr CSS organisiert und leicht auffindbar zu halten.

Und das ist alles, was Sie benötigen, um ein bestimmtes Stylesheet für das Add-on Conversational Forms in die Warteschlange zu stellen. Möchten Sie das Logo verknüpfen, das auf Ihren Konversationsformularen erscheint? Werfen Sie einen Blick in unsere Dokumentation zu So verknüpfen Sie Ihr Konversationsformular-Logo.

Referenzaktion

wpforms_conversational_forms_enqueue_styles

FAQ

F: Kann ich dies auch für das Form Pages Add-on verwenden?

A: Um ein eindeutiges Enqueue für das Form Pages Add-on zu haben, verwenden Sie stattdessen diesen Code-Schnipsel. Sie können mehr über diese Aktion erfahren, indem Sie diese Dokumentation lesen.

/**
 * Enqueue your own stylesheet for the Form Pages addon
 * 
 * @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 );

So binden Sie eine Stylesheet für Konversationsformulare ein

KI-Zusammenfassung