One of the unique things about the ClickFunnels template language is that, for the most part, each element has a built-in style that it inherits from elements above it in the hierarchy. As a result, you often don’t have to specify a width for a column or a row in the CSS. The following example illustrates this point.

Making A Vertical Form Full-Width

When you create a form in ClickFunnels, you’ll notice that the first thing the platform does is create a few rows. Each row is used to represent a different entity in the information gathered by the form. Let’s look at how we can make the first row in our form (the one with the label “First Name”) fill the entire horizontal space available:

1. From the Admin area, click on the row with the label “First Name”.

2. From the pop-up menu, select the “Full Width” option.

3. Hit the Update Row button.

As you can see from the screenshot above, the first row now takes up the entire horizontal space of the form.

The same principle applies to the other rows in our form. By default, they too will extend to take up the entire width of the form. However, this can be modified using the same technique.

Filling A Horizontal Form Space

The following example illustrates how we can modify the First Name row in the form above so that it only takes up half the form space:

1. From the Admin area, click on the row with the label “First Name”.

2. From the pop-up menu, select the “Full Width” option.

3. Hit the Update Row button.

As you can see from the screenshot above, the first row now only takes up half the horizontal space of the form.

By default, the other rows have the “Full Width” style applied, so only one of them can fit in the form space created by the previous operation. To make all the rows fill up the entire form space, we’ll have to remove the “Full Width” style from the other rows and add it to the First Name row.

Making Rows Stacked

Another unique thing about the ClickFunnels template language is that you can make groups of rows and columns in a stacked format if you want. This means that the information in a group of rows can be displayed vertically, one over the other.

For example, let’s assume that we have three names (Smith, Brown, and Williams) and that each one is a row in our form above. If we chose to display the rows in a stacked format, we’d have the following result:

1. From the Admin area, click on the row with the label “Smith”.

2. From the pop-up menu, select the “Stacked” option.

3. Hit the Update Row button.

As you can see from the screenshot above, the rows are now displayed vertically, one over the other.

This feature makes it easy to create fully stacked form layouts where you can have as many rows as needed, meaning that you can fit a whole section of forms on a webpage and still have room for more.

Fully Customizing Forms

The preceding example only dealt with making the rows in our form bigger or smaller to fit the available form space. However, you can do a lot more with forms than that. You can actually change the entire form layout using the same technique and the template language. Doing this will, of course, require a bit of programming knowledge, but it’s still quite easy to do.

Let’s say that we have a form with a title, an input field for the person’s first name, a label for their last name, a textarea for them to write a short bio, and a submit button.

As mentioned earlier, each row in our form represents an entity. In this case, our entities are “Person”, “First Name”, “Last Name”, “Bio”, and “Submit”. To start, we’ll need to add some CSS to our form to make it look neat and clean. First, we’ll add some padding inside a container around the form:

1. Type

2. Select the “body” element.

3. Click on the “Style” tab.

4. In the “External Stylesheet” area, click on the “+” icon next to “No Style Sheets”, then type “style” and press enter.

5. Click on the “Add Style” button to add the style you just created.

You’ll now have a style sheet that looks like this:

{% social icons %}

The next step is to modify the form itself so that it looks just the way we want it to. Let’s start with the title.

1. Type

2. Select the “form” element.

3. Hit the “Edit” tab.

4. In the “Title” area, enter “Example Form” and hit enter.

5. Click on the “Layout” tab.

6. In the “Layout” area, select the “vertical” option.

7. Click on the “Update” button.

You’ll now have a vertical form that looks like this:

{% social icons %}

As you can see from the screenshot above, the title is now displayed at the top of the form, followed by the input field for the first name and the label for the last name.

To modify the label for the last name, go back to the “Form” area and select the “fieldset” element around the “First Name” and “Last Name” fields.

1. Type

2. Select the “label” element.

3. Hit the “Edit” tab.

4. In the “Label” area, enter “Last Name” and press enter.

5. Click on the “Update” button.

The preceding steps will make our form look like this:

{% social icons %}

If you’re not familiar with HTML, you may wonder how you can change the appearance of your form without having to go through all of these steps. Well, you can’t. The good thing about forms is that they are, for the most part, relatively easy to customize using CSS. For example, let’s say that we want to make our form bigger so that it can contain more information:

1. Go to http://codepen.io and click on the “New Pen” button to create a new HTML document.

2. In the empty HTML document that just appeared, hit the “Create” button to create a new “form” element.

3. From the pop-up menu, select the “Full Width” option for the “form” element.

4. Type

5. Select the “fieldset” element around the “First Name” and “Last Name” fields.

6. Hit the “Edit” tab.

7. In the “Fieldset” area, enter “Full Name” and click on the “Update” button to update the style sheet with the new fieldset and input fields.

As you can see from the screenshot above, the form has been updated to match our design. However, the form still doesn’t look right because we haven’t changed the CSS that is applied to it. To do that, we’ll have to go back to the source code of the page and make the necessary modifications manually:

1. In the CSS file that you downloaded from http://codepen.io, locate the row that has the following CSS rules: