Decorating for the holidays? Like millions of other folk all around the world, you’ve probably put a wreath on your front door, lights on your porch, or some kind of other fun stuff outside. Decorations like these catch the eye, put your home on display, and give the whole neighborhood a festive air. They draw attention and set a very specific attitude for viewers. With that thought in mind, transition with me to thinking about your WordPress signup form…
Your WordPress signup form is literally the front door of your email marketing strategy. Making a fun, eye-catching WordPress signup form is a pretty fundamental first step towards building a successful email marketing strategy. We’ve given you tips and shown you examples of really unique and fun example forms from around the web before. We’ve shown you how to spice up your forms with text and images too. Based in large part from user requests, today we’ll look at how to align fields so that you can get the same snazzy single-row field alignment that many of the more stylish forms from around the web use. Check it out!
Tools of the Trade
Ninja Forms 3.0 gives you a way to adjust field containers from inside the form builder without code, so you can achieve a side-by-side row of fields without Layout and Styles. For some cases, like lining up checkbox fields, that may work just fine for you.
Due to behind the scenes styling elements however, some fields may not line up just the way you want them to with other fields. See the Submit button to Email field alignment in that article link for example. Adding a custom class into the base builder sans Layout and Styles leave the fields slightly out of alignment. Depending on your theme, that alignment may be better or worse than pictured.
That’s where Layout and Styles (or a bit of custom CSS) comes into play. I’ll show you how to achieve perfect alignment with or without Layout and Styles, but L&S makes the task SO much easier. Also, we can support Layout and Styles while we can’t support custom CSS. Let’s take a look!
Crafting a Single Row WordPress Signup Form
As I mentioned above, we can do this in one of two ways: with Layout and Styles or without. Using Layout and Styles brings a couple big advantages to the table:
- We can support Layout and Styles, so if it ain’t working, yell at us (nicely please 🙂 ) in support. We unfortunately just don’t have the resources to support custom CSS however.
- Layout and Styles makes it easy. We’re literally going to drag and drop a field, then add 4 characters into a field. Without, you’re going to need to identify ids and classes to target, write your CSS rule, and then access your child theme’s stylesheet.css. L&S saves you a lot of legwork!
Method 1: With Layout and Styles
As an example, I’ve made a form with an HTML field, an email field, and a submit button. I’ve added some text and images to the HTML to jazz it up, and adjusted the email and Submit fields to align side by side. Here’s the finished product without any further styling in Twenty Sixteen:
So let’s look at how we did this. We want the Email field on the same row with the Submit field, and the Email field to take up 2/3 of our row with the Submit field occupying 1/3. All we have to do is literally drag and drop the fields:
Easy as pie! Only one problem: when we preview the form the Submit button is in line with the top margin- the top of the label text- of the Email field. That’s also an easy fix with Layout and Styles. Expand the field settings of the Submit field and then expand the Styles options that L&S adds. After a small amount of experimentation, I found that exactly 37 pixels added to the padding of the wrapper puts the Submit button fully in line with the body of the Email field:
That’s got it! Now let’s look at doing this without Layout and Styles.
Method 2: Without Layout and Styles
For this method a basic understanding of CSS will definitely be helpful. First, we want to put our fields into a single row. That’s easy enough: open the field settings window for the Email field and expand the Display options. Assign the field container the custom class name “two-thirds first” (without the quotations). Then do the same for the Submit field, but give it the custom class name “one-third”.
We’ve now achieved a single row, but we run into the same problem here as we did initially using L&S. The Submit button is out of alignment. Where we could adjust this in the field settings window with L&S, without it we’re going to have to head to our child theme’s stylesheet.css to make some changes. First though, we need to identify what HTML element we’re going to be targeting with our CSS rule.
We don’t want to do this to every submit button on our website, so we have to find a way to target just what we want to change. Preview the form and use inspect element on the submit button (right click-inspect element on firefox, right click-inspect on chrome, etc).
The grey highlighted area is the styling of our submit button. You can see there that it has the id(#) nf-field-443, so we can use that as our CSS selector to target this specific submit button. We want to move it down, so we’ll use margin-top as our declaration for that selector. I already know that I want to move it 37 pixels, but to discover that exact value initially you’d just have to experiment. So, this is what our rule will look like:
All that’s left to do now is to add that rule to our child theme‘s stylesheet. In Twenty Sixteen that’s style.css, and I’ll just scroll down to the bottom and add it after the end of the rest of my stuff:
You now have a perfectly aligned row in your WordPress signup form. Cheers! How to play with Ninja Forms using CSS has been a frequently requested topic by our readers, so look for more like this to come. In the meantime, have fun decorating your forms for Christmas and best of luck spreading your holiday cheer. Do you have similar aesthetic tweaks to Ninja Forms you’d like to see a tutorial for? Let me know in the comments!