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>
  <head>
    <link rel="stylesheet" class="section-webforms"> <!-- Base styling -->
    <link rel="stylesheet" class="section-flatly"> <!-- Theme styling -->
  …
  </head>
  <body>
    <div class="container">
      <form class="webforms" id="webform">
        …
        <h1>…</h1>
        <div class="webforms_description">…</div>
        <div class="webforms__fields-container">
          … <!-- All fields go here -->
        </div>
        <div class="webforms__submit-box">
          <button type="submit" class="btn btn-primary">Submit</button
        </div>
      </form>
    </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.webforms__field container with its first div containing the label and (optional) help text and its second div containing the actual input field(s).

This is an example of the HTML for a text field:

html


...
<div class="webforms__field">
  <div>
    <label for="title" class="webforms__label">Title</label>
    <p class="help-block">Some help text goes here.</p>
  </div>
  <div class="text-field form-group">
    <input type="text" name="fields[title]" class="form-control">
  </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. Choose whichever themes looks closest to the design you are after. 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, based on the "Clean" theme, 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;
}

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

button[type="submit"] {
  background:#f00;
  color:#fff;
}

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 in general only supports the newest versions of all browsers, but specifically for webforms we also support Internet Explorer all the way back to version 8.

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.