UPFRONT Teil 5: Plugins hinzufügen und Powerform Formulare stylen

<div># UPFRONT PART 5: ADDING PLUGINS AND STYLING GRAVITY FORMS</div> <div>## Adding plugins to a site using Upfront isn’t any different to adding plugins to a site using any other theme.</div> <div>The only difference is that with Upfront it’s even easier to style front-end plugin content with custom CSS and you can even do it with live preview. Cool, huh?</div> <div>In today’s post, we’re going to set up an email subscribe form using Gravity Forms. I’ll also show you how to set up and style our Appointments + plugin in Upfront.</div> <div>This is the fifth post in our series introducing how to use Upfront. We’re adapting an existing Upfront theme – in this case Spirit – and turning it into a completely different site, complete with its own branding, images, custom fonts and responsive layout.</div> <div></div> <div></div> <div> <div>Im Verlauf dieser Serie zeigen wir Dir anhand zahlreicher Beispiele, wie Du Upfront nutzt:</div> <div><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></div> <div><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></div> <div><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></div> <div><a href="https://psource.eimen.net/wiki/upfront-teil-4-elemente-mit-individuellem-code-anpassen/">Teil 4: Elemente und benutzerdefinierten Code optimieren</a></div> <div><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></div> <div><a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-6-erstellung-von-responsiven-webseiten/">Teil 6: Responsive Webseiten erstellen</a></div> <div><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></div> </div> <div></div> <div>We’re taking the Spirit theme and completely reworking its regions and content, and turning it into a product theme, complete with its own branding, colors, buttons, images, typography, newsletter subscribe form and other elements.</div> <div>So far in this series, we’ve updated theme colors, added custom fonts, deleted regions, updated the header image and added a full width video region. Here’s a look at our progress so far:</div> <div></div> <div>* On the left, our progress. On the right, what we’re working towards building.</div> <div>## Setting Up a Subscribe Form with Gravity Forms</div> <div>My new design features an email subscribe form at the bottom of the homepage, which I want to set up with [Gravity Forms](https://www.gravityforms.com/), the most popular premium WordPress forms plugin.</div> <div>It’s pretty basic. All it needs is a one-line text area, placeholder text and a button since its job is to collect email addresses.</div> <div>Creating a new form with Gravity Forms is easy:</div> <div></div> <div>* Styling Gravity Forms</div> <div>Go to Forms &gt; New Form to create a new form.</div> <div>A modal will pop up asking you to name your form and give it a description.</div> <div>Go ahead and fill out these details. Your users won’t see what you write here – these details only display in the backend of your site so it’s for your eyes only.</div> <div>On the Form Editor page, go to the “Advanced Fields” dropdown and select “Email.”</div> <div></div> <div>*Styling Gravity Forms</div> <div>In the “General” tab for your form, leave the “Field Label” and “Description” sections empty. In the “Appearance” tab, enter some placeholder text. I’m going to enter “Enter your email for exclusive news.”</div> <div>Click “Update Form” and you’re done setting up the form.</div> <div>Next, we need to switch to Upfront to style the form on the front-end.</div> <div>Drag a Widget element onto your site where you would like to display the newsletter subscribe form. In the element settings, select “Form” from the dropdown, then select your form from the “Select a Form” dropdown, and enable AJAX. The un-styled form will display. It doesn’t look very nice… yet.</div> <div>We’re going to style the form with custom CSS. One of Upfront’s truly impressive features is live preview. This means when we add CSS to the form we can see the changes happen straight away without having to save and refresh. Very cool!</div> <div>Click on “CSS &amp; Anchor Settings” in the element settings for the form, and then click “add new style.”</div> <div></div> <div>A code editor will appear at the bottom of the screen where you can enter your CSS.</div> <div>Copy and paste the following code to style the form:</div> <div>&lt;pre&gt;</div> <div>.gform_widget * {</div> <div>margin:0;</div> <div>padding:0;</div> <div>}</div> <div>.gform_fields li {</div> <div>list-style:none;</div> <div>}</div> <div>.gform_body {</div> <div>width:75%;</div> <div>}</div> <div>.gform_footer.top_label {</div> <div>width:25%;</div> <div>}</div> <div>.gform_body, .gform_footer.top_label {</div> <div>margin:0;</div> <div>display:inline-block;</div> <div>margin:0 -2px;</div> <div>}</div> <div>.gform_footer input[type=submit] {</div> <div>background-color: #ufc3;</div> <div>color: #ffffff;</div> <div>padding:11px 30px;</div> <div>font: 14px Open Sans;</div> <div>border-radius: 0 3px 3px 0;</div> <div>margin-right:0;</div> <div>width:100%;</div> <div>}</div> <div>.gform_wrapper input[type=text] {</div> <div>padding:10px;</div> <div>font: 14px Open Sans;</div> <div>border-radius: 3px 0 0 3px;</div> <div>border:1px solid #ufc7;</div> <div>width:100%;</div> <div>}</div> <div>.gform_wrapper ::-webkit-input-placeholder,</div> <div>.gform_wrapper :-moz-placeholder,</div> <div>.gform_wrapper :-ms-input-placeholder {</div> <div>color: #ufc7;</div> <div>}</div> <div>.gform_confirmation_message {</div> <div>border:1px solid #ufc7;</div> <div>padding:15px;</div> <div>background:#fff;</div> <div>color:#ufc3;</div> <div>}</div> <div>&lt;/pre&gt;</div> <div>What’s we’re doing is changing the color and font of the button (`gform_footer input[type=submit]`) and adding rounded corners.</div> <div>We’re also styling the placeholder text, giving the text area a border and aligning the text area and button so they sit flush.</div> <div></div> <div>* Styling Gravity Forms</div> <div>Here’s what the styled subscribe form looks like with the custom CSS.</div> <div>With its green button and styled placeholder text, it now matches the design of the rest of the site.</div> <div>It’s also worth noting that when the element is resized, so too is the width of the text area so you can make it as wide as you like.</div> <div>It’s important that we also style the confirmation message that displays after a user submits an email address. Here’s the CSS to do that:</div> <div>&lt;pre&gt;</div> <div>.gform_confirmation_message {</div> <div>border:1px solid #ufc7;</div> <div>padding:15px;</div> <div>background:#fff;</div> <div>color:#ufc3;</div> <div>}</div> <div>&lt;/pre&gt;</div> <div>You may also want to style any other error messages, such as notifications when a user tries to enter an incorrect email address, i.e. one doesn’t contain an “@“ symbol.</div> <div>The subscribe form looks great, right?</div> <div>Of course, this is a fairly basic integration with Upfront. You may also want to add the Gravity Forms MailChimp add-on so that email addresses you collect are saved to your MailChimp account.</div> <div>## Setting Up Appointments+ in Upfront</div> <div>Since my site is fairly basic and doesn’t require many plugins that display content on the front-end. I’m going to deviate for the rest of this post and show you how to set up and style one of our plugins – [Appointments +](https://cp-psource.github.io/terminmanager-pro/).</div> <div></div> <div>Appointments + is a powerful bookings plugin and best of all it’s easy to set up. Styling, like with any plugin, does take a bit of extra effort.</div> <div>Setting Up Appointments+</div> <div>I’m going to set up a basic bookings form for a hair salon that offers cuts, color, and blow dry, and has two staff members.</div> <div>First up, install and activate Appointments+. The easiest way to do this is to use our WPMU DEV Dashboards plugin if you don’t already have it installed.</div> <div>A top-level menu item will appear in the backend of your install and after initially installing the plugin tooltips will appear to help you set it up.</div> <div>In the Settings, I’m going to leave the time base as 60 minutes.</div> <div></div> <div>* Custom colors for the front-end appointments calendar.</div> <div>I’m also going to create my own custom color set using my theme colors.</div> <div>Next, I need to add services and hair stylists.</div> <div>Filling out the services is easy – just give each a name, a duration and a price. You can also specify a description page for each service. You’ll need to create a new page for each service if you want use this option.</div> <div></div> <div>Before adding new employees, you need to add each staff member as a new user to the backend of your site. Once you’ve done that, simply select each employee from the dropdown box, assign their services and choose a bio page. Like services, you’ll need to create a new page for each person if you haven’t done so already).</div> <div></div> <div>The only other setting I need to worry about it Working Hours. In this example scenario, my salon is open from 9am-5pm weekdays and has two staff members, Emma and Jane. Emma only works from 9am-12pm. In the Working Hours tab, I can set her working hours.</div> <div>## Styling Appointments +</div> <div>Now that we’ve got Appointments + all set up and ready to go, we need to style the front-end. This include the calendar, services list, service providers list, and booking confirmation message.</div> <div>Now that Appointments+ is all set up, let’s go about styling the front-end calendar, services list, service providers list, and booking confirmation message.</div> <div>In order to match my site’s new design, we need to update the fonts to use Open Sans, and style the calendar and buttons to match our new theme colors.</div> <div>To do this, drag a new Widget element onto your site and in the settings select “Text.” In the main text area, paste in the following shortcode:</div> <div>I’ve put the shortcodes into a table for easy formatting.</div> <div>Next, click on “CSS Styles &amp; Anchor Settings” at the bottom of the element settings window and then click “add new style.”</div> <div>In the code editor that appears at the bottom of the screen, paste in the following CSS:</div> <div>With the custom CSS in place, here’s what my appointments calendar looks like on the front-end:</div> <div></div> <div>## Conclusion</div> <div>In this post we’ve learned how to add and style plugins in Upfront. Specifically, we added a simple email subscribe form using Gravity Forms to our site. We also add a bookings calendar – just for fun – using Appointments +.</div> <div>Styling plugins, such as Gravity Forms and Appointments +, takes time with any theme, but with Upfront adding custom code is not only easy but also cool to see with live preview. No longer do you have to go back and forth, saving changes you’ve made in the theme editor. Now you can see changes as you make them.</div> <div>As I mentioned in this article, Upfront hasn’t quite reached version 1.0 but our developer team is currently working as quickly as humanly possible to resolve compatibility with popular plugins.</div> <div>Read the next post in this series: **Part 6:** [Creating Responsive Websites](https://cp-psource.github.io/upfront/tutorial-responsive.html)</div> <div></div>