How to improve your Webform by using CSS

Podio offers the feature of getting generated webforms in an app of your own.

For example:

Imagine that you have a “Contact us” web page. Users will fill your webpage forms in, and then you will get items in your Podio app with those data.

 

Let’s create an app that will get all the user webforms

markdown25.1

 

What do you want to include in your webpage form? Choose your Podio fields from “Modify Template” menu.

markdown25.2

 

You need to adjust the size of the webform cells, by clicking the following menus

 

markdown25.3 markdown25.4

 

Your app is almost ready, you don’t need to fill it with items. User filled webforms will be your items in a while.

You can enter the Webform menu, by doing the following:

markdown25.5

As you can see, a default webform is created. But it is very common, which is why most people want to change it. You can change the default webform by using the menu Configuration, and by using CSS. They are both on the right.

 

markdown25.5 markdown25.6 markdown25.7 markdown25.8 markdown25.9 markdown25.10 markdown25.11 markdown25.12

2 This is how to add CSS in your Webform

 

 

About CSS

CSS gives a style in existing HTML code, that is the only purpose of CSS. Webforms are of course written in HTML.

 

Here is a basic pattern you can use for the CSS code.

body {

background-color:  YOUR_COLOR;

 

color: YOUR_COLOR ;

font-size: YOUR_NUMBER px;

    font-family: YOUR_FONT_TYPE ;

}

label.webforms__label {

color: YOUR_COLOR ;

font-size: YOUR_NUMBER px;

    font-family: YOUR_FONT_TYPE ;

}

input[type=text] {

color: YOUR_COLOR ;

font-size: YOUR_NUMBER px;

font-family: YOUR_FONT_TYPE ;

 

width: YOUR_PERCENTAGE %;

padding: YOUR_NUMBER px  20px;

margin: YOUR_NUMBER px 0;

border: YOUR_NUMBER px solid YOUR_COLOR ;

border-radius: YOUR_NUMBER px;
}

button[type=”submit”] {

color: YOUR_COLOR ;

font-size: YOUR_NUMBERpx;

     font-family: YOUR_FONT_TYPE ;
}

 

Let’s see which piece of code is doing what:

A) This piece of code changes the color of your form background.

body {

background-color: YOUR_COLOR ;

}

 

B)   This piece of code adjusts the color of the “Title” and “Description”, if any.

It also adjusts the size and the font of your “Description” letters. But not your “Title” letters! Title letter size and font are only changed by your Theme in the Webform menu!

 

body {

color: YOUR_COLOR ;

font-size: YOUR_NUMBER px;

           font-family: YOUR_FONT_TYPE ;

}

 

C) This piece of code adjusts the color, the size and the font of all of your Podio fields that are included in the webform, those are the name above each webform form.

label.webforms__label {

color: YOUR_COLOR ;

font-size: YOUR_NUMBER px;

            font-family: YOUR_FONT_TYPE ;

}

D)   This piece of code adjusts the color, size and font of the letters that will be written inside the form. Yes, you can even decide in which font the user will write in your forms!

input[type=text] {

color: YOUR_COLOR ;

font-size: YOUR_NUMBER px;

font-family: YOUR_FONT_TYPE ;

}

E) This is  the most useful part.

Width refers to how long will be the form. As you can see, it is written in percentage, that means 100% gives us the default Podio form length. If you put 50%, the form becomes half in length.

 Padding refers to the height of the form. You need to put a value on px. Please do not change the second value which is 20px, it refers to the height of letters that will be written in the form, so if you put a very big value the user could not see what he writes in the form.

 Margin refers to the distance among forms, so if you make it big, you can see that the forms get distance from one another. Please do not change the second number, which is zero.

Border refers to the thickness of each form outline. Making it big results in thicker form outline. Please do not remove the word “solid”. You can put your own color to the form outline.

Border-radius adjusts the roundness of the angles of the form. Making it big results in a form with totally round angles.

More information about what to include in this piece of code (the CSS form code): http://www.w3schools.com/css/css_form.asp

input[type=text] {

width: YOUR_PERCENTAGE %;

padding: YOUR_NUMBER px  20px;

margin: YOUR_NUMBER px 0;

border: YOUR_NUMBER px solid YOUR_COLOR ;

border-radius: YOUR_NUMBER px;
}

 

D)  This piece of code refers to the color, size and font of the letters of the Submit button.

Submit button color cannot be chosen by your CSS, but you can choose a different Theme from your Configuration. For example, instead of “Flatly” you may put “Superhero”, you can see that the button color has switched to orange.

   button[type=”submit”] {

color: YOUR_COLOR ;

font-size: YOUR_NUMBERpx;

             font-family: YOUR_FONT_TYPE ;
}

 

HOW TO REPLACE THE VARIABLES:

All you need to do is replace the variables. You can also remove a line that has a variable, in case you don’t want to change, and just keep the Theme features:

1) YOUR_COLOR: red, green, yellow, lightred, etc…, more info: http://www.w3schools.com/cssref/css_colornames.asp 

Do you want to pick a color from a palette? http://www.w3schools.com/tags/ref_colorpicker.asp

All you need to do is copy paste the code for your color, written in #abc012 format, for example:  #b32400

Colors can be put in more ways, for more info: http://www.w3schools.com/cssref/css_colors_legal.asp

 

2) Font size can be mainly changed by adding the following line of code:

font-size: YOUR_NUMBERpx;

So, you can choose a value for YOUR_NUMBER: 10, 20, … etc. There are more ways to change font size, they are described here:

http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=large

 

3) Font type can be picked by replacing YOUR_FONT_TYPE variable with some code, for example:

font-family: “Lucida Console”, Monaco, monospace;

For more info, here are the font types that are recognized from all browsers, that is why they are considered as “web safe”: http://www.w3schools.com/cssref/css_websafe_fonts.asp

Very useful picture:

css1.1

 

EXAMPLES AND OUTPUT
Below you can see some CSS code for Podio. You can put it in Webform menu / Configuration / Theme / Add custom CSS, to test it.

Let’s see what it does

body {
color: yellow;
font-size: large;
font-family: “Lucida Console”, Monaco, monospace;
background-color: green;
}
label.webforms__label {
color: red;
font-size: large;
font-family: “Lucida Console”, Monaco, monospace;
}
input[type=text] {
color: blue;
font-size: large;
font-family: “Lucida Console”, Monaco, monospace;
width: 60%;
padding: 10px 200px;
margin: 80px 0;
border: 10px solid blue;
border-radius: 4px;
}
button[type=”submit”] {
color: yellow;
font-size: 10px;
font-family: “Lucida Console”, Monaco, monospace;
}

 

…and this is the output:

css1.2

 

Another example:

body {
background-color: lightblue;
color: red;
font-size: 10px;
font-family: “Lucida Console”, Monaco, monospace;
}
label.webforms__label {
color: red;
font-size: large;
font-family: “Lucida Console”, Monaco, monospace;
}
button[type=”submit”] {
color: white;
font-size: 100px;
font-family: “Lucida Console”, Monaco, monospace;
}

 

…and this is the output:

css1.3

 

A USEFUL TIP

If you want to apply CSS code for your forms (we have described that in part (C) ), then you need to have a “Single line” Podio field from Modify Template of your app. If you have chosen a “Doulbe line”, there would be problems, mainly there won’t be any CSS connected to your double fields.

 

DO YOU WANT TO CHANGE HELP TEXT?

It is feasible, as long as the changes are also applied in the desciption field of the form, if any.

Just add the following lines to your CSS code.

body{
font-weight: 900;
}

If you want to also change the size of your help text, then the code becomes:

body{
font-weight: 900;
font-size: 20px;
}
By writing 20px, it is same size as the Text. Do you want smaller or bigger, just change 20 by decreasing or increasing

Before:

HelpTextCSS-NoBold

 

After:

HelpTextCSS-Bold

 

DO YOU WANT TO MAKE FORM TITLES BOLD?

Then you need to add the following code:

label.webforms__label {

font-weight: 900;
}

If you already have a “label.webforms_label” block, then you just add “font-weight: 900” in the brackets, along with your other commands.

2 Responses to How to improve your Webform by using CSS

  1. reece carter December 10, 2016 at 11:26 pm #

    I appreciate your calc field tutorials.

    Have you guys found calc outputs to be available on mobile / iOs?

    • Lilia Amundsen December 19, 2016 at 8:04 pm #

      Hi Reece! Calc fields are available on the mobile platform as far as I know, but only in viewing, as it is not possible to modify templates on mobile – meaning you cannot edit the code but you can see the output. Hope this clears things up!

Leave a Reply