Tutorials

Styling webforms

By exposing an app as a webform, you allow anyone with the link to the webform, or anyone who enters a webpage where you have embedded the webform, to enter data into your app without being logged into Podio.

When you embed your webform into another website, you will often want its style to match the look of the surrounding website. This tutorial explains how to use custom CSS with webforms.

What is CSS?

CSS is short for Cascading Style Sheets and is a language used to specifiy how HTML in web pages should be presented.

If you don't know anything about HTML and CSS you will probably need to get help styling your webform. In case you want to learn yourself, W3 has a good tutorial for getting started with CSS.

We encourage you to use the developer tools of your browser to inspect the markup and default styling of your webform, and to experiment with changing the look if the webform.

The markup of a webform

Webforms are either rendered inside an iframe or as a full web page on Podio. The latter is refered as the public webform url. The markup is identical in both cases, with the exception of an added container on the public url:

html
<!DOCTYPE html>
<html class="clean">
  <head>...</head>
  <body class="page-width">
    <div id="wrapper">
      <div id="content" > <!-- Content div only rendered on public url -->
        <form ...>
          <h5>...</h5> <!-- Only if a headline has been entered -->
          <div class="form-description">...</div> <!-- Only if a description has been entered -->
          <div class="form">
            ... <!-- Web form fields goes here -->
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

The fields you have selected to show in the web form are rendered inside the div.form tag. The exact HTML varies for each field, but they all follow a general principle of an outer div.field container with a span.label proceeding the actual input field(s).

This is an example of the HTML for the fields in a simple webform with a text field the name and a category field for the gender:

html
...
<div class="form">

  <!-- Text field (required) -->
  <div class="field" data-description="...">
    <span class="label"><label for="...">Name</label><em>*</em></span>
    <input class="text required" id="..." name="..." type="text" />
  </div>

  <!-- Category field (not required) -->
  <div class="field" data-description="...">
    <span class="label"><label for="...">Gender</label></span>
    <select class="state" id="..." name="...">
      <option value=""></option>
      <option value="m">Male</option>
      <option value="f">Female</option>
    </select>
  </div>

</div>
...

Basic styling

All webforms have a theme. The stylesheet for that theme is still loaded, even with custom CSS setup for the webform. The default theme is called "Clean", and this is the theme we recommend to use when custom styling webforms. It is easy to overwrite with the specific changes you need, as the custom CSS is loaded after after the CSS for the theme.

Here is an example of a webform where the colors and fonts has been changed to match - well, not this website - but a very colorful website where they like big bold fonts:

This form is powered by PODIO - project management apps that work like you.

The custom CSS for this webform looks like this:

css
body {
  background-color:#ff0;
}

.form span.label {
  color:#f00;
  font-family: Verdana;
  font-size:16px;
}

.buttons .submit {
  background:#f00;
  color:#fff;
}

Reference of styleable elements

Element HTML CSS selector Comment
Content container <div id="content">...</div> #content { ... } Public url only
Headline <h5>...</h5> h5 { ... } Optional
Description <div class="form-description">...</div> .form-description { ... } Optional
Field label <span class="label">...</span> .form .field span.label { ... } Optional
Std. text field <input type="text" class="text" ... /> .form .field input.text { ... } Text, number and contact fields
Contact field header <h5 class="contact-header">...</h5> .form .field h5.contact-header { ... } Contact field has indented sub fields
Large text field <textarea ...>...</textarea> .form .field textarea { ... }
Category field <select class="state" ... /> .form .field select.state { ... } Single choice
Question field <ul class="question-wrapper"><li><label><input type="radio" ... /> ... .form .field ul.question-wrapper li (label input) { ... } Single choice
Category/question fields <ul class="question-wrapper"><li><label><input type="checkbox" ... /> ... .form .field ul.question-wrapper li (label input) { ... } Multiple choice
Date/time field <div class="date-wrapper><input class="date-input" ...><span ...><input class="time-input" ... /> ... .form .field .date-wrapper input.(date-input/time-input) { ... }
Image/video fields, files <input type="file" class="file" ... /> .form .field input.file { ... }
Add another file <a class="add-file-field" href="#">Add another file</a> .form .field a.add-file-field { ... } For files and image/video fields
Money field <select class="money" ... /><input class="text money" type="text" ... /> .form .field (select/input).money { ... }
Duration field <div class="duration-wrapper"><div class="duration-group"><input class="digits text" type="text" ... /> ... .form .field .duration-wrapper .duration-group (input.digits) { ... } 3 duration groups for each field
App reference field <select class="app" ... /> .form .field select.app { ... }
CAPTCHA <div id="dynamic_recaptcha">...</div> #dynamic_recaptcha { ... } See Google's documentation
Submit button <div class="buttons"><input class="submit" type="submit" ... /></div> .buttons .submit { ... }
Success message <div class="messages success"><h2>...</h2></div> .messages (h2) { ... } Some HTML allowed inside message

A few fields and elements has been omitted from the list due their high complexity and/or expansive markup. Use the developer tools of your preferred browser to inspect the exact markup and classes of all elements. Documentation on customizing the captcha is available from Google, but notice that we use the "clean" theme, not the "custom" theme (webforms using the dark theme use the "blackglass" recaptcha theme).

Troubleshooting

We do not offer support on customized styling of your webforms. It is your own responsiblity that your CSS works in the browsers you want to support. Podio only supports the newest versions of all browsers, with the exception of Internet Explorer which we support one version back (currently IE8+).

We remove any potentially harmful expressions from the CSS you submit. Should you experience that unharmful parts of your CSS is removed, then please post in the developer forum with the details.