Styling des Bestätigungsbildschirms für Abstimmungsergebnisse

Übersicht

Möchten Sie den Bildschirm mit den Abstimmungsergebnissen gestalten, der auf der Bestätigungsseite angezeigt wird? Wenn Sie das Addon Umfragen und Abstimmungen verwenden, können Sie diese Ergebnisse ganz einfach in Ihrer Bestätigungsnachricht anzeigen lassen. Mit ein wenig CSS können Sie das Styling dieser Ergebnisse leicht ändern. In diesem Tutorial führen wir Sie Schritt für Schritt durch die Änderung des Stils für die Abstimmungsergebnisse.

Standardmäßig ist bereits ein Styling für die Abstimmungsergebnisse vorhanden.

Einrichtung

Für diese Dokumentation gehen wir davon aus, dass Sie Ihr Formular bereits erstellt haben, indem Sie den Schritten in diesem Tutorial gefolgt sind.

Aktivieren der Abstimmungsergebnisse

Öffnen Sie zunächst den Formular-Generator und gehen Sie zum Tab Einstellungen » Umfragen und Abstimmungen.

Klicken Sie dort auf das Kontrollkästchen Abstimmungsergebnisse aktivieren.

Hinzufügen des CSS-Codes

Um die Abstimmungsergebnisse zu gestalten, müssen Sie dieses CSS auf Ihre Website kopieren und einfügen. Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, sehen Sie sich bitte dieses Tutorial an.

#wpforms-confirmation-194 .wpforms-poll-answer-bar {
    background-color: #c45e1b;
    background: repeating-linear-gradient(45deg, #c45e1b, #c45e1b 10px, #f08a5d 10px, #f08a5d 20px);
    border-right: 1px solid #c45e1b;
}
 
#wpforms-confirmation-194 {
    background: transparent;
    border: none;
}

Denken Sie daran, die -194 zu aktualisieren, um die Formular-ID Ihres spezifischen Formulars anzugeben. Wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen, lesen Sie bitte dieses Tutorial.

Wenn Sie Hilfe bei der Auswahl Ihrer Farbverläufe im obigen CSS benötigen, besuchen Sie bitte die CSS Gradient-Website für den Online-Generator (kostenlos).

Und das ist alles! Sie haben jetzt erfolgreich CSS verwendet, um das Styling der Abstimmungsergebnisse auf dem Bestätigungsbildschirm zu ändern. Möchten Sie lernen, wie Sie die Platzhalter in Ihren Formularfeldern gestalten? Sehen Sie sich dieses Tutorial zu Styling von Platzhaltertext für Formularfelder an.