Revision für “UPFRONT Teil 5: Plugins hinzufügen und Powerform Formulare stylen” erstellt am 14. September 2026, 15:41:24
| Titel | UPFRONT Teil 5: Plugins hinzufügen und Powerform Formulare stylen |
|---|---|
| Inhalt | <h2>Das Hinzufügen von Plugins zu einer Website, die UpFront verwendet, unterscheidet sich nicht vom Hinzufügen von Plugins zu einer Webseite mit einem beliebigen anderen Theme.</h2>
Der einzige Unterschied besteht darin, dass es mit UpFront noch einfacher ist, die Inhalte von Front-End-Plugins per individuellem CSS zu gestalten – und das sogar mit Live-Vorschau. Cool, oder?
Im heutigen Beitrag richten wir ein E-Mail-Anmeldeformular mit PowerForms ein. Außerdem zeige ich dir, wie du unser Plugin „Terminmanager“ in UpFront einrichtest und gestaltest.
Dies ist der fünfte Teil unserer Serie zur Einführung in UpFront. Wir passen ein bestehendes UpFront-Theme an – in diesem Fall „Spirit“ – und verwandeln es in eine völlig neue Webseite, komplett mit eigenem Branding, Bildern, individuellen Schriftarten und responsivem Layout.
[video width="736" height="180" mp4="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/gravity-forms-resize.mp4"][/video]
<strong>Im Verlauf dieser Serie zeigen wir Dir anhand zahlreicher Beispiele, wie Du Upfront nutzt:</strong>
<a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-part-1-die-basics-themefarben-und-schriftarten/">Teil 1: Die Grundlagen, Themenfarben und Typografie</a>
<a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-2-strukturierung-deiner-webseite-mit-bereichen/">Teil 2: Strukturieren Deiner Webseite mit Regionen</a>
<a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-3-layout-deiner-webseite-mit-elementen/">Teil 3: Gestalte Deine Webseite mit Elementen</a>
<a href="https://psource.eimen.net/wiki/upfront-teil-4-elemente-mit-individuellem-code-anpassen/">Teil 4: Elemente und benutzerdefinierten Code optimieren</a>
<strong><a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-5-plugins-hinzufuegen-und-powerform-formulare-stylen/">Teil 5: Plugins hinzufügen und Powerform-Formulare gestalten</a></strong>
<a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-6-erstellung-von-responsiven-webseiten/">Teil 6: Responsive Webseiten erstellen</a>
<a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-7-arbeiten-mit-seiten-und-beitraegen/">Teil 7: Arbeiten mit Seiten und Beiträgen</a>
Wir nehmen das „Spirit“-Theme, überarbeiten dessen Bereiche und Inhalte grundlegend und wandeln es in ein Produkt-Theme um – inklusive eigenem Branding, Farben, Schaltflächen, Bildern, Typografie, Newsletter-Anmeldeformular und weiteren Elementen.
Im bisherigen Verlauf dieser Serie haben wir die Theme-Farben angepasst, benutzerdefinierte Schriftarten eingebunden, Bereiche entfernt, das Header-Bild aktualisiert und einen Videobereich in voller Breite hinzugefügt. Hier ist ein Überblick über den bisherigen Fortschritt:
<img class="alignnone size-full wp-image-588" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/post-05-progress.jpg" alt="" width="1364" height="355">
* Links unser Fortschritt. Rechts das, worauf wir hinarbeiten.
<h2>Einrichten eines Anmeldeformulars mit PowerForm</h2>
Mein neues Design sieht am unteren Ende der Startseite ein E-Mail-Anmeldeformular vor, das ich mit PowerForm – unseren PSOURCE-Formular-Plugin für ClassicPress – umsetzen möchte.
Der Aufbau ist denkbar einfach: Da das Formular lediglich dazu dient, E-Mail-Adressen zu erfassen, genügen ein einzeiliges Eingabefeld, ein Platzhaltertext und ein Button.
Ein neues Formular mit Gravity Forms zu erstellen, ist ganz einfach:
<img class="alignnone size-full wp-image-543" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/new-gf-form.png" alt="" width="510" height="375">
* Styling von PowerForm
Gehe zu „Formulare“ > „Neues Formular“, um ein neues Formular zu erstellen.
Es öffnet sich ein Fenster, in dem Du aufgefordert wirst, einen Namen und eine Beschreibung für das Formular einzugeben.
Gib diese Informationen ein. Deine Nutzer sehen nicht, was Du hier einträgst – diese Angaben erscheinen nur im Backend Deiner Webseite und sind somit nur für Dich sichtbar.
Wähle auf der Seite des Formular-Editors im Dropdown-Menü „Erweiterte Felder“ (Advanced Fields) die Option „E-Mail“ aus.
<img class="alignnone size-full wp-image-514" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/email-settings.png" alt="" width="510" height="315">
Lasse im Reiter „Allgemein“ (General) Deines Formulars die Felder für „Feldbezeichnung“ (Field Label) und „Beschreibung“ (Description) leer. Gib im Reiter „Erscheinungsbild“ (Appearance) einen Platzhaltertext ein. Ich verwende hier: „Gib Deine E-Mail-Adresse ein, um exklusive Neuigkeiten zu erhalten.“
Klicke auf „Formular aktualisieren“ (Update Form) – damit ist die Einrichtung des Formulars abgeschlossen.
Als Nächstes wechseln wir zu Upfront, um das Formular im Frontend zu gestalten.
Ziehe ein Widget-Element an die Stelle Deiner Webseite, an der das Anmeldeformular für den Newsletter erscheinen soll. Wähle in den Element-Einstellungen im Dropdown-Menü „Formular“ (Form) aus, wähle anschließend Dein Formular im Dropdown-Menü „Formular auswählen“ (Select a Form) und aktivieren Sie AJAX. Das noch ungestaltete Formular wird nun angezeigt. Es sieht allerdings noch nicht besonders gut aus.
Wir werden das Formular nun mit individuellem CSS gestalten. Eine der wirklich beeindruckenden Funktionen von Upfront ist die Live-Vorschau. Das bedeutet: Wenn wir CSS für das Formular hinzufügen, sehen wir die Änderungen sofort, ohne speichern oder die Seite neu laden zu müssen. Eine tolle Sache!
Klicke in den Element-Einstellungen für das Formular auf „CSS & Anchor Settings“ und anschließend auf „Neuen Stil hinzufügen“.
<img class="alignnone size-full wp-image-573" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/upfront-code-editor.png" alt="" width="735" height="314">
Am unteren Bildschirmrand erscheint ein Code-Editor, in den Du Dein CSS eingeben kannst.
<strong>Kopiere den folgenden Code und füge ihn ein, um das Formular zu gestalten:</strong>
<pre>.powerform_widget * {
margin:0;
padding:0;
}
.powerform_fields li {
list-style:none;
}
.powerform_body {
width:75%;
}
.powerform_footer.top_label {
width:25%;
}
.powerform_body, .powerform_footer.top_label {
margin:0;
display:inline-block;
margin:0 -2px;
}
.powerform_footer input[type=submit] {
background-color: #ufc3;
color: #ffffff;
padding:11px 30px;
font: 14px Open Sans;
border-radius: 0 3px 3px 0;
margin-right:0;
width:100%;
}
.powerform_wrapper input[type=text] {
padding:10px;
font: 14px Open Sans;
border-radius: 3px 0 0 3px;
border:1px solid #ufc7;
width:100%;
}
.powerform_wrapper ::-webkit-input-placeholder,
.powerform_wrapper :-moz-placeholder,
.powerform_wrapper :-ms-input-placeholder {
color: #ufc7;
}
.powerform_confirmation_message {
border:1px solid #ufc7;
padding:15px;
background:#fff;
color:#ufc3;
}</pre>
Wir ändern die Farbe und Schriftart des Buttons (`powerform_footer input[type=submit]`) und fügen abgerundete Ecken hinzu.
Zudem gestalten wir den Platzhaltertext, versehen das Textfeld mit einem Rahmen und richten Textfeld und Button so aus, dass sie bündig abschließen.
[video width="510" height="366" mp4="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/gravity-forms.mp4"][/video]
So sieht das gestaltete Anmeldeformular mit dem benutzerdefinierten CSS aus.
Dank des grünen Buttons und des individuell gestalteten Platzhaltertexts fügt es sich nun harmonisch in das Design der restlichen Webseite ein.
Zudem ist erwähnenswert, dass sich die Breite des Textbereichs automatisch anpasst, wenn die Größe des Elements geändert wird, Du kannst ihn also beliebig breit gestalten.
Wichtig ist auch, die Bestätigungsmeldung zu gestalten, die erscheint, nachdem ein Nutzer seine E-Mail-Adresse eingegeben hat. Hier ist das entsprechende CSS:
<pre>.powerform_confirmation_message {
border:1px solid #ufc7;
padding:15px;
background:#fff;
color:#ufc3;
}</pre>
Vielleicht möchtest du auch andere Fehlermeldungen gestalten – zum Beispiel Benachrichtigungen für den Fall, dass ein Nutzer eine ungültige E-Mail-Adresse eingibt (etwa eine ohne „@“-Zeichen).
Das Anmeldeformular sieht toll aus, oder?
Natürlich handelt es sich hierbei um eine recht einfache Integration mit UpFront.
<h2>Einrichten von Terminmanager in UpFront</h2>
Da meine Website recht einfach gehalten ist und kaum Plugins benötigt, die Inhalte im Frontend anzeigen, werde ich im weiteren Verlauf dieses Beitrags einen kleinen Schwenk machen und Ihnen zeigen, wie Sie eines unserer Plugins – Termimanager – einrichten und optisch anpassen.
Termimanager ist ein leistungsstarkes Buchungs-Plugin, das sich zudem kinderleicht einrichten lässt. Die optische Anpassung (das Styling) erfordert – wie bei jedem Plugin – etwas zusätzlichen Aufwand.
Einrichtung von Termimanager
Ich werde ein einfaches Buchungsformular für einen Friseursalon erstellen, der Haarschnitte, Colorationen und Föhnen anbietet und über zwei Mitarbeiter verfügt.
Zunächst installiere und aktiviere Termimanager. Am einfachsten geht das über unser Plugin „PSOURCE MANAGER“, falls Du dieses noch nicht installiert hast.
Im Backend Deiner Webseite erscheint daraufhin ein neuer Menüpunkt auf oberster Ebene; nach der ersten Installation helfen Dir Tooltips bei der Einrichtung.
In den Einstellungen belasse ich das Zeitraster bei 60 Minuten.
<img class="alignnone size-full wp-image-511" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/custom-colors1.png" alt="" width="510" height="200">
* Individuelle Farben für den Terminkalender im Frontend.
Außerdem erstelle ich ein eigenes Farbschema, das auf die Farben meines Themes abgestimmt ist.
Als Nächstes muss ich Dienstleistungen und Friseure hinzufügen.
Das Anlegen der Dienstleistungen ist einfach: Gib jeweils einen Namen, die Dauer und den Preis an. Du kannst für jede Dienstleistung auch eine Beschreibungsseite festlegen. Wenn Du diese Option nutzen möchtest, musst Du für jede Dienstleistung eine eigene Seite erstellen.
<img class="alignnone size-full wp-image-498" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/appointments-services.png" alt="" width="735" height="330">
Bevor Du neue Mitarbeiter hinzufügen kannst, müssen diese zunächst als neue Benutzer im Backend Deiner Webseite angelegt werden. Sobald dies erledigt ist, wähle die Mitarbeiter einfach aus dem Dropdown-Menü aus, weise ihnen die entsprechenden Dienstleistungen zu und wähle eine Seite für die Biografie aus. Wie bei den Dienstleistungen musst Du auch hier für jede Person eine eigene Seite erstellen (sofern noch nicht geschehen).
<img class="alignnone size-full wp-image-497" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/appointments-service-providers.png" alt="" width="735" height="340">
Die einzige weitere Einstellung, um die ich mich kümmern muss, sind die Arbeitszeiten. In diesem Beispielszenario ist mein Salon wochentags von 9:00 bis 17:00 Uhr geöffnet und beschäftigt zwei Mitarbeiterinnen: Emma und Jane. Emma arbeitet nur von 9:00 bis 12:00 Uhr. Im Reiter „Arbeitszeiten“ kann ich ihre Arbeitszeiten festlegen.
<h2>Styling Termimanager</h2>
Nachdem Termimanager nun vollständig eingerichtet und einsatzbereit ist, müssen wir das Frontend gestalten. Dazu gehören der Kalender, die Liste der Dienstleistungen, die Liste der Dienstleister sowie die Buchungsbestätigung.
Da Termimanager nun eingerichtet ist, kümmern wir uns um das Design des Frontend-Kalenders, der Dienstleistungs- und Dienstleisterlisten sowie der Buchungsbestätigung.
Um das Erscheinungsbild an das neue Design meiner Webseite anzupassen, müssen wir die Schriftart auf „Open Sans“ umstellen und den Kalender sowie die Schaltflächen farblich auf unser neues Theme abstimmen.
<strong>Ziehe dazu ein neues Widget-Element auf Deine Webseite und wähle in den Einstellungen „Text“ aus. Füge im Haupttextbereich den folgenden Shortcode ein:</strong>
<table>
<tbody>
<tr>
<td>[app_services autorefresh="1"]</td>
<td>[app_service_providers autorefresh="1"]</td>
</tr>
<tr>
<td colspan="2">[app_monthly_schedule]</td>
</tr>
<tr>
<td colspan="2">[app_pagination month="1"]</td>
</tr>
<tr>
<td colspan="2">[app_login]</td>
</tr>
<tr>
<td colspan="2">[app_confirmation]</td>
</tr>
<tr>
<td colspan="2">[app_paypal]</td>
</tr>
</tbody>
</table>
Ich habe die Shortcodes zur besseren Übersichtlichkeit in einer Tabelle zusammengestellt.
Klicke anschließend im unteren Bereich des Einstellungsfensters auf „CSS Styles & Anchor Settings“ und dann auf „add new style“.
<strong>Füge in den Code-Editor, der unten auf dem Bildschirm erscheint, den folgenden CSS-Code ein:</strong>
<pre>.appointments-plus * {
font-family:Open Sans, Helvetica Neue, Arial, sans-serif;
font-weight: 300;
font-style: normal;
}
.appointments-confirmation-wrapper fieldset {
margin-top:20px;
border: 2px;
}
.appointments-confirmation-wrapper fieldset legend h3 {
font-size: 20px;
font-weight: bold;
font-family: Open Sans;
text-transform:none;
}
.appointments-confirmation-buttons > input {
margin-left: 50px;
}
.appointments-confirmation-button, .appointments-confirmation-cancel-button, .appointments-pagination {
margin-top: 20px;
background-color: #ufc3;
color: #ffffff;
padding:11px 30px;
font: 14px Open Sans;
border-radius: 3px;
}
.appointments-pagination {
float:left;
margin-top:20px;
background:none;
padding:0;
}
.appointments-pagination a {
background:none;
border:0;
box-shadow:none;
text-shadow:none;
font-style:normal;
color:#ufc3;
}
.app_monthly_schedule_wrapper tfoot {
display:none;
}
.app_services_dropdown_title, .app_workers_dropdown_title {
font-size:16px;
font-weight:normal;
}
.appointments-wrapper h3 {
display:none;
}</pre>
Nachdem der benutzerdefinierte CSS-Code hinterlegt ist, sieht mein Terminkalender im Frontend nun folgendermaßen aus:
<img class="alignnone size-full wp-image-496" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/appointments-plus-front-end.png" alt="" width="735" height="920">
<h2>Zusammenfassung</h2>
In diesem Beitrag haben wir gelernt, wie man in Upfront Plugins hinzufügt und gestaltet. Konkret haben wir mithilfe von PowerForm ein einfaches E-Mail-Anmeldeformular in unsere Webseite integriert. Außerdem haben wir – einfach nur zum Spaß – einen Buchungskalender mit „Terminmanager“ hinzugefügt.
Das Styling von Plugins wie PowerForm und Terminmanager ist bei jedem Theme zeitaufwendig; mit UpFront ist das Hinzufügen von individuellem Code jedoch nicht nur einfach, sondern dank der Live-Vorschau auch eine tolle Sache. Man muss nicht mehr ständig zwischen Theme-Editor und Webseite hin- und herwechseln und Änderungen zwischendurch speichern. Stattdessen sieht man die Auswirkungen der Änderungen sofort, während man sie vornimmt.
Lies den nächsten Beitrag dieser Reihe: <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-6-erstellung-von-responsiven-webseiten/"><strong>Teil 6: Responsive Webseiten erstellen</strong></a> |
| Auszug |
