Form Styling with CSS Tutorial

At the moment, Blitzen offers you some accessible design options to customize your form. These include the ability to change colors, textbox inputs, as well as header images and submit buttons. These options and more can be found in the Design tab of your form.

But today we’re going to show you just how much more you can do with Cascading Style Sheets (CSS). Style sheets are documents of code which allow you to change the way your form looks. More specifically, CSS allows you to target elements of a form and give them styling rules.

If you are new to this do not be frightened. There are many many resources which can help you get acquainted with basic CSS, and basic CSS is all you need for Blitzen forms. 

The following post will review how to write styling rules in proper syntax, demonstrate how to find the elements of Blitzen forms you wish to target, help you set up your own style sheet, and tell you what elements of Blitzen forms can be manipulated.

What you will need to get started:

• A Blitzen form (any one of your forms)
• A Text editor (our favourite one is Sublime Text. It’s free to download here)

Let’s begin by dissecting an existing stylesheet. 

Sample Style Sheet 

(Download here and open in your text editor or copy and paste directly into your text editor)

body {
	background-image:url("https://blitzen.com/blog/wp-content/uploads/Burlap-Lace-Background.png");
	background-size: cover;
}
h1 {
	font-size:45px;
	text-align:left;
}
hr {
	display:none;
}
.form-button {
	width:100%;
	border:2px solid #ebd6d6;
	border-radius: 3px;
	background:none !important;
}
.form-button:hover {
	box-shadow: inset 0 0 0 3px rgba(255,255,255,.4);
}
.submit-container {
    margin-top: 10px;
}
.form-footer{
	display:none;
}
#form-submit-canvas {
    padding: 70px 100px 25px;
}

When this style sheet is  uploaded to an existing Blitzen form such as the one one the left, it will turn into the one on the right. Pretty cool right? (You also have to change some colors in the Design Tab)

While the default looks pretty nice as is, it might not fit the look you are going for. This is where the style sheet comes in. So let's get started and dig into those rules.

Writing Rules with Proper Syntax

Theory

A style sheet is a set of rules. A rule is a selector followed by a declaration block.

• The selector is the HTML (form) element you want to style.
• Each declaration includes a property and a value, separated by a colon.
• The declaration block contains one or more declarations separated by semicolons.
• A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. 

As you can see, each rule has three separate parts: selector, property, and value.

To make it more relatable, pretend your form is a house and we are looking to do some heavy duty renovations. An element we want to target is a window. The window then becomes the selector. A property of the window could be size, or shape, or color, and their permutations could be the values. The CSS will look like so:

window {color:yellow; shape:circle;}

The above code will change all of the windows in the house to be yellow and round. If only it was that easy :)

Proper Formating

You will notice that in the sample style sheet the rules are broken up into several lines, this is actually the exact same rule but in the proper CSS format. 

The only difference is that each declaration has it's own line and the closing brace is also on a new line.

In this example, we want each block of text with the tag H1 (Heading 1) to be 45 pixels (px) large. (A pixel is a basic unit of color on a screen and is used as a standard form of measurement in CSS). 

When you want to add more than one declaration (rule) to a selector just start it on the next line like you see on the left.

With the addition of this declaration, each text with the H1 tag will be 45 pixels large as well as left-aligned. 

Now that you have the syntax down, let's  dig into the possibilities.

Selectors, and Properties, and Values (oh my)

There are three basic types of selectors:

Selectors

It should be noted that all of the selectors included in your sample style sheet already exist on the form. You can also create your own classes and apply them to fields but we will discuss this later. For now let's work with existing elements.

Properties and Values

Each selector or group of selectors will have a unique set of properties. For example, while a house will have windows, doors, and floors, it will not have headlights or wheels. So you will not be able to use headlights or wheels as properties for a house. The same goes for values, each set of properties has their accompanying values. The following table should give you a comprehensive overview for basic properties and their values. We strongly encourage you get acquainted with each of the links in the right column.

For an exhaustive list of existing CSS properties and their meanings please  see this list. 
For a broader discussion of selectors, properties, and values   see this tutorial.

While some properties and values may appear quite cryptic, most of them are self evident. 

You will notice in our sample style sheet we use:

I am willing to bet, even without looking in the parentheses, you know what most of these were supposed to do.

Okay, you're really moving a long now!  Let's move on to building your own CSS.

Setting Up your Own Style Sheet

First, open up your text editor and start a new file.

If you are using Sublime Text, click on the bottom right hand corner, a menu will appear with language templates. Choose CSS.

Next you have to find the names of the HTML elements you wish to style. 

To know how to find them on your own, read the next section, to see a list of commonly used elements skip to the following section.

Find the Elements

Open up your form in a browser and right click on the item you want to style.

Click 'Inspect / Inspect Element' in the menu which appears.

The inspector will pop up. You will notice that as you move your mouse over the code, different things will highlight on the page. Move your mouse around until it has highlighted the exact item you wish styled. It is possible you will have to expand some 'div' elements to zero in on the item.

What you are looking for is the "class". Usually somewhere in the code you will see a class = "something" like in this image:

Whatever is in between those quotation marks is the name of your element. If you do not see one, look to the bottom of the screen to what element is highlighted in blue.

In the image above we have singled out the submit button which has the class form-button. This is our selector; we can now put it on our style sheet. Remember, any selector which is a class has to have a period '.' before it.

Now our style sheet now looks something like this:

.form-submit {
}

There's no declaration because we haven't included any rules, let's put one in now. As a test, let's make the submit button full-width. Write in width:100% so it looks like this

.form-submit {
	width:100%;
}

Don't forget the semi-colon after your declaration! 

Great work. Now repeat the process for every other element you wish to style. 

You now have everything you need to build your own style sheet. 

Here is a handy list of form elements to make it a little easier:

List of Blitzen Form Elements

If you want to create a new class and apply it to a field like in  this article. Simply give it a unique name in your style sheet (and don't forget to precede it with a period.

Once you have your CSS, save it and upload it!

Upload your CSS

See this article for instructions. 

CSS work requires a lot of tweaking. One thing you should know is that your CSS changes will not appear in the design preview, so you will need to View Form to see your piece de resistance.

If you want to change the CSS do so in your text editor, save it, and upload it again.

If ever you are in doubt, there are many resources online to answer questions. Google is your friend :)

That's everything for today! Happy CSS-ing