Achtung!

Dieser Artikel enthält CSS-Code und richtet sich an Entwickler. Wir stellen diesen Code als Service zur Verfügung, bieten jedoch keinen Support für Codeanpassungen oder die Entwicklung durch Dritte.

Für zusätzliche Hilfe sehen Sie sich bitte das Tutorial von WPBeginner zum Hinzufügen von benutzerdefiniertem CSS an.

Schließen

Ändern des Schlüsseltextes bei Konversationsformularen

Aktualisiert:
Markdown anzeigen

Verwenden Sie das Add-on Conversational Forms und möchten den Schlüsseltext ändern, der auf Auswahlfeldern angezeigt wird? Standardmäßig fügt das Add-on Schlüssel A, Schlüssel B, Schlüssel C usw. für Multiple-Choice-Eingabefelder hinzu, wenn das Formular im Konversationsmodus angezeigt wird. Sie können diesen Text jedoch mit benutzerdefiniertem CSS ändern.

Standardmäßig zeigen die Kontrollkästchen- und Mehrfachauswahlfelder Schlüssel und dann einen Buchstaben für jede Option in Ihrem Konversationsformular an

In diesem Tutorial zeigen wir Ihnen den CSS-Schnipsel, mit dem der Schlüsseltext in etwas anderes geändert wird.

Erstellen Ihres Formulars

Zuerst erstellen wir ein neues Konversationsformular und fügen unsere Felder hinzu. Dies beinhaltet mindestens ein Kontrollkästchen-Feld und ein Auswahlfeld (Radiobuttons).

Erstellen Sie das Formular und fügen Sie Ihre Felder hinzu, einschließlich mindestens eines Kontrollkästchenfelds und eines Mehrfachauswahlfelds

Fragen Sie sich, was der Unterschied zwischen Kontrollkästchen und Auswahlfeldern ist?

Kontrollkästchen ermöglichen es dem Benutzer, Elemente aus einer festen Anzahl von Alternativen auszuwählen. Im Gegensatz dazu erlauben Radiobuttons (Auswahlfeld) dem Benutzer, nur ein Element aus einer Liste von mehreren vordefinierten Alternativen auszuwählen. Wenn Sie möchten, können Sie die Anzahl der Optionen begrenzen, die Benutzer im Kontrollkästchenfeld auswählen.

Hinzufügen von CSS zum Ändern des Schlüsseltexts

Für dieses Tutorial möchten wir das Wort „Schlüssel“ nicht in unserem Formular anzeigen. Wir möchten diesen Text in „Element“ ändern.

Wir werden unser CSS in eine sogenannte Media Query einfügen. Dies ist nur eine Möglichkeit, dem CSS mitzuteilen, dass es nicht angewendet werden soll, es sei denn, die min-width des Geräts entspricht dem, was wir in unserem CSS angegeben haben. Um mehr über Media Queries zu erfahren, lesen Sie die Mozilla Developer-Anleitung zu Media Queries und deren Verwendung.

Jetzt ist es an der Zeit, das CSS zu Ihrer Website hinzuzufügen, damit wir diesen Text ändern können. Kopieren und fügen Sie einfach das unten stehende CSS auf Ihre Website ein. Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.

#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item) label:before {
    counter-increment: wpforms-radio;
    content: counter(wpforms-radio, upper-alpha);
    left: 10px;
}
 
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before, 
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before {
      content: counter(wpforms-radio, upper-alpha);
    content: "Item " counter(wpforms-radio, upper-alpha);
  }

Das CSS ändert das Wort Schlüssel in Element bei allen Kontrollkästchen- und Auswahlfeld-Formularfeldern, einschließlich aller Zahlungsfelder wie Kontrollkästchenelemente und Multiple Items-Felder. Ersetzen Sie einfach das Wort Element durch das, was Sie anzeigen möchten, auf Ihren Formularen.

Hinweis: Wenn Sie dieses CSS verwenden, ist dieser Text nicht übersetzbar, da er über CSS hinzugefügt wird. Wenn Sie eine mehrsprachige Website haben, wird dieses Tutorial nicht empfohlen.

Nachdem Sie das CSS hinzugefügt haben, können Sie die Änderung des Schlüsseltextes sehen

Häufig gestellte Fragen

Dies sind Antworten auf einige der häufigsten Fragen, die wir zur Anpassung der Vorschau des Add-ons Conversational Forms erhalten.

Wie kann ich den Text vollständig entfernen?

Um den Text vollständig zu entfernen, fügen Sie dieses CSS zu Ihrer Website hinzu. Hilfe beim Hinzufügen von CSS zu Ihrer Website finden Sie in diesem Tutorial.

#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before {
  content:none;
}
 
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label {
  padding: 9px 9px 9px 9px;
}

Das war's! Sie haben den Schlüsseltext in Conversational Forms erfolgreich geändert.

Möchten Sie als Nächstes Ihre eigene dedizierte Stylesheet für Conversational Forms einbinden? Sehen Sie sich unser Tutorial an, wie Sie ein Stylesheet für Conversational Forms enqueuen.

Getaggt:
Immer noch festgefahren? Wie können wir helfen?
Zuletzt aktualisiert am 09. Dez. 2024