UpFront 5: Hinzufügen von Plugins und Formatieren von Kontaktformularen

Das Hinzufügen von Plugins zu einer Webseite mit UpFront unterscheidet sich nicht vom Hinzufügen von Plugins zu einer Webseite mit einem anderen Theme.

Der einzige Unterschied besteht darin, dass es mit UpFront noch einfacher ist, Front-End-Plugin-Inhalte mit benutzerdefiniertem CSS zu gestalten, und Du kannst dies sogar mit Live-Vorschau tun. Cool, oder?

Im heutigen Beitrag werden wir ein E-Mail-Anmeldeformular mit Gravity Forms einrichten. Ich zeige Dir auch, wie Du unser PS Terminmanager Plugin im Voraus einrichten und gestalten kannst.

Dies ist der fünfte Beitrag in unserer Serie, in dem wir die Verwendung von UpFront vorstellen. Wir passen ein bestehendes UpFront-Theme – in diesem Fall Spirit – an und verwandeln es in eine völlig andere Webseite, komplett mit eigenem Branding, Bildern, benutzerdefinierten Schriftarten und responsivem Layout.

Im Laufe dieser Serie werden wir Dir anhand vieler Beispiele zeigen, wie Du UpFront verwenden kannst:

• Teil 1: Die Grundlagen, Themenfarben und Typografie
• Teil 2: Strukturieren Deiner Webseite mit Regionen
• Teil 3: Gestalten der Webseite mit Elementen
• Teil 4: Optimieren von Elementen und benutzerdefiniertem Code
• Teil 5: Hinzufügen von Plugins und Formatieren von Gravity-Formularen
• Teil 6: Erstellen von responsiven Webseiten
• Teil 7: Arbeiten mit Seiten und Beiträgen

Wir nehmen das Spirit-Thema und überarbeiten seine Regionen und Inhalte komplett und verwandeln es in ein Produktthema, komplett mit eigenem Branding, Farben, Schaltflächen, Bildern, Typografie, Newsletter-Anmeldeformular und anderen Elementen.

Bisher haben wir in dieser Serie Designfarben aktualisiert, benutzerdefinierte Schriftarten hinzugefügt, Bereiche gelöscht, das Headerbild aktualisiert und einen Videobereich in voller Breite hinzugefügt. Hier ist ein Blick auf unsere bisherigen Fortschritte:

Links unser Fortschritt. Auf der rechten Seite, worauf wir hinarbeiten.

Einrichten eines Anmeldeformulars mit Gravity Forms

Mein neues Design verfügt über ein E-Mail-Anmeldeformular am unteren Rand der Homepage, das ich mit Gravity Forms, dem beliebtesten Premium-WordPress-Formular-Plugin, einrichten möchte.

Es ist ziemlich einfach. Alles, was es braucht, ist ein einzeiliger Textbereich, Platzhaltertext und eine Schaltfläche, da seine Aufgabe darin besteht, E-Mail-Adressen zu sammeln.

Das Erstellen eines neuen Formulars mit Gravity Forms ist einfach:

Gestalten von Gravityformularen

Wechsel zu Formulare > Neues Formular, um ein neues Formular zu erstellen.

Ein Modal wird angezeigt, in dem Du aufgefordert wirst, Dein Formular zu benennen und eine Beschreibung zu geben.

Fahre fort und fülle diese Details aus. Deine Benutzer werden nicht sehen, was Du hier schreibst – diese Details werden nur im Backend Deiner Webseite angezeigt, so dass es nur für Deine Augen ist.

Gehe auf der Seite Formulareditor zum Dropdown-Menü „Erweiterte Felder“ und wähle „E-Mail“.

Gestalten von Gravityformularen

Lasse auf der Registerkarte „Allgemein“ für Dein Formular die Abschnitte „Feldbeschriftung“ und „Beschreibung“ leer. Gib auf der Registerkarte „Darstellung“ einen Platzhaltertext ein. Ich gebe „Gib Deine E-Mail-Adresse für exklusive Neuigkeiten ein“ ein.

Klicke auf „Formular aktualisieren“ und Du bist mit der Einrichtung des Formulars fertig.

Als nächstes müssen wir zu UpFront wechseln, um das Formular am Frontend zu stylen.

Ziehe ein Widget-Element auf Deine Webseite, auf der Du das Newsletter-Anmeldeformular anzeigen möchtest. Wähle in den Elementeinstellungen „Formular“ aus der Dropdown-Liste aus, wähle dann Dein Formular aus dem Dropdown-Menü „Formular auswählen“ aus und aktiviere AJAX. Das nicht formatierte Formular wird angezeigt. Es sieht nicht sehr schön aus… noch.

Wir werden das Formular mit benutzerdefiniertem CSS formatieren. Eine der wirklich beeindruckenden Funktionen von UpFront ist die Live-Vorschau. Das heißt, wenn wir CSS zum Formular hinzufügen, können wir die Änderungen sofort sehen, ohne speichern und aktualisieren zu müssen. Sehr cool!

Klicke in den Elementeinstellungen für das Formular auf „CSS & Ankereinstellungen“ und dann auf „Neuen Stil hinzufügen“.

Am unteren Bildschirmrand erscheint ein Code-Editor, in dem Du Dein CSS eingeben kannst.

Kopiere den folgenden Code, und füge ihn ein, um das Formular zu formatieren:

Wir ändern die Farbe und Schriftart der Schaltfläche (gform_footer input[type=submit]) und fügen abgerundete Ecken hinzu.

Außerdem formatieren wir den Platzhaltertext, geben dem Textbereich einen Rahmen und richten den Textbereich und die Schaltfläche so aus, dass sie bündig sitzen.

Gestalten von Gravityformularen

So sieht das formatierte Anmeldeformular mit dem benutzerdefinierten CSS aus.

Mit seiner grünen Schaltfläche und dem formatierten Platzhaltertext passt es jetzt zum Design des restlichen Websites.

Es ist auch erwähnenswert, dass, wenn das Element in der Größe geändert wird, auch die Breite des Textbereichs ist, so dass Du es so breit machen kannst, wie Du möchtest.

Es ist wichtig, dass wir auch die Bestätigungsmeldung formatieren, die angezeigt wird, nachdem ein Benutzer eine E-Mail-Adresse gesendet hat. Hier ist das CSS, um das zu tun:

Du kannst auch andere Fehlermeldungen formatieren, z. B. Benachrichtigungen, wenn ein Benutzer versucht, eine falsche E-Mail-Adresse einzugeben, d.h. eine E-Mail-Adresse enthält kein „@“-Symbol.

Das Anmeldeformular sieht toll aus, oder?

Natürlich ist dies eine ziemlich einfache Integration mit UpFront. Du kannst auch das Gravity Forms MailChimp-Add-on hinzufügen, damit die von Dir gesammelten E-Mail-Adressen in Deinem MailChimp-Konto gespeichert werden.

PS Terminmanager im UpFront einrichten

Da meine Webseite ziemlich einfach ist und nicht viele Plugins benötigt, die Inhalte auf dem Frontend anzeigen, werde für den Rest dieses Beitrags abweichen und Dir zeigen, wie Du eines unserer Plugins einrichten und gestalten können – PS Terminmanager.

PS Terminmanager ist ein leistungsstarkes Buchungs-Plugin und das Beste von allem ist es einfach einzurichten. Das Styling erfordert, wie bei jedem Plugin, einen zusätzlichen Aufwand.

PS Terminmanager einrichten

Ich werde ein grundlegendes Buchungsformular für einen Friseursalon einrichten, der Schnitte, Farbe und Föhn anbietet und zwei Mitarbeiter hat.

Installieren und aktiviere zunächst PS Terminmanager.

Ein Menüpunkt auf oberster Ebene wird im Backend Deiner Installation angezeigt und nach der ersten Installation werden Plugin-Tooltips angezeigt, um Dir bei der Einrichtung zu helfen.

In den Einstellungen belasse ich die Zeitbasis auf 60 Minuten.

Benutzerdefinierte Farben für den Front-End-Terminkalender.
Ich werde auch mein eigenes benutzerdefiniertes Farbset mit meinen Designfarben erstellen.

Als nächstes muss ich Dienstleistungen und Friseure hinzufügen.

Das Ausfüllen der Dienste ist einfach – gib einfach einen Namen, eine Dauer und einen Preis an. Du kannst auch eine Beschreibungsseite für jeden Dienst angeben. Du musst für jeden Dienst eine neue Seite erstellen, wenn Du diese Option verwenden möchtest.

Bevor Du neue Mitarbeiter hinzufügst, müssen Sie jeden Mitarbeiter als neuen Benutzer zum Back-End Ihrer Website hinzufügen. Sobald Sie das getan haben, wählen Sie einfach jeden Mitarbeiter aus der Dropdown-Box aus, weisen Sie seine Dienste zu und wählen Sie eine Bio-Seite aus. Wie bei Diensten müssen Sie für jede Person eine neue Seite erstellen, falls Sie dies noch nicht getan haben).

Hinzufügen von Mitarbeitern zu PS Terminmanager

Die einzige andere Einstellung, um die ich mich kümmern muss, ist die Arbeitszeit. In diesem Beispielszenario ist mein Salon werktags von 9 bis 5 Uhr geöffnet und hat zwei Mitarbeiter, Emma und Jane. Emma arbeitet nur von 9.12 bis <>.<> Uhr. Auf der Registerkarte Arbeitszeiten kann ich ihre Arbeitszeiten einstellen.

Nachdem ich meine Dienste gespeichert habe, muss ich PS Terminmanager einrichten, um am Frontend meiner Webseite zu arbeiten. Bevor ich dies tue, muss ich ein Snippet zu meiner function.php hinzufügen damit PS Terminmanager mit UpFront arbeiten kann.

Wir sind uns bewusst, dass UpFront derzeit nicht gut mit Plugins spielt, die virtuelle Seiten erstellen, und wir arbeiten daran, dies auf dem Weg zur Veröffentlichung einer 1.0-Version zu beheben. In der Zwischenzeit wird das obige Snippet sicherstellen, dass PS Terminmanager auf Deiner Webseite ohne Fehler funktioniert!

PS Terminmanager

Jetzt, da wir PS Terminmanager eingerichtet und bereit haben, müssen wir das Frontend stylen. Dazu gehören der Kalender, die Serviceliste, die Liste der Dienstleister und die Buchungsbestätigungsnachricht.

Nachdem PS Terminmanager eingerichtet ist, gestalten wir den Front-End-Kalender, die Serviceliste, die Liste der Dienstanbieter und die Buchungsbestätigungsnachricht.

Um dem neuen Design meiner Webseite zu entsprechen, müssen wir die Schriftarten aktualisieren, um Open Sans zu verwenden, und den Kalender und die Schaltflächen an unsere neuen Designfarben anpassen.

Ziehe dazu ein neues Widget-Element auf Deine Seite und wähle in den Einstellungen „Text“. Füge im Haupttextbereich den folgenden Shortcode ein:

Ich habe die Shortcodes zur einfachen Formatierung in eine Tabelle eingefügt.

Klicke anschließend unten im Fenster mit den Elementeinstellungen auf „CSS-Stile & Ankereinstellungen“ und dann auf „Neuen Stil hinzufügen“.

Füge im Code-Editor, der am unteren Bildschirmrand angezeigt wird, das folgende CSS ein:

Wenn das benutzerdefinierte CSS vorhanden ist, sieht mein Terminkalender im Frontend so aus:

PS Terminmanager Frontend-Styling

Zusammenfassung:

In diesem Beitrag haben wir gelernt, wie man Plugins in UpFront hinzufügt und gestaltet. Insbesondere haben wir unserer Webseite ein einfaches E-Mail-Anmeldeformular mit Gravity Forms hinzugefügt. Wir fügen auch einen Buchungskalender hinzu – nur zum Spaß – mit PS Terminmanager.

Das Styling von Plugins wie Gravity Forms und PS Terminmanager nimmt bei jedem Theme Zeit in Anspruch, aber mit UpFront ist das Hinzufügen von benutzerdefiniertem Code nicht nur einfach, sondern auch mit Live-Vorschau cool zu sehen. Du musst nicht mehr hin und her gehen und Änderungen speichern, die Du im Theme-Editor vorgenommen hast. Jetzt kannst Du Änderungen sehen, während Du sie vornimmst.

Wie ich in diesem Artikel erwähnt habe, ist UpFront noch nicht ganz ausgereift, aber wir arbeiten so schnell wie möglich daran, die Kompatibilität mit beliebten Plugins zu beheben.

Lese den nächsten Beitrag in dieser Serie: Teil 6: Erstellen von responsiven Webseiten

Wenn Du Fragen zu dem hast, was wir in diesem Beitrag behandelt haben, kannst Du gerne im Forum unten nachfragen.

[forum id=“5″]

So verwendest Du die UpFront-Serie in der optimalen Reihenfolge:

• Teil 1: Die Grundlagen, Themenfarben und Typografie
• Teil 2: Strukturieren Deiner Webseite mit Regionen
• Teil 3: Gestalten der Webseite mit Elementen
• Teil 4: Optimieren von Elementen und benutzerdefiniertem Code
• Teil 5: Hinzufügen von Plugins und Formatieren von Gravity-Formularen
• Teil 6: Erstellen von responsiven Webseiten
• Teil 7: Arbeiten mit Seiten und Beiträgen