Heading fields for webforms

Follow

Michelle Sanahon

• October 06, 2014 01:12

Hi there,

When creating webforms, it would be great if there was an option for a 'heading field' which doesn't require input from the user, but is basically just used to separate different areas of the webform.
We find that this would be especially handy when creating survey-type webforms.

Thanks :)

2

• 

  Mette Frøkjær Hansen

  • October 06, 2014 10:09

  Thank you for your input Michelle.

  I've shared it with the team here so we can review it for future improvements to the webform in Podio.

  /Mette
  -Podio

  1

  Comment actions Permalink
• 

  Adrien BLAISE

  • October 09, 2014 08:06

  Meanwhile, as a workaround, you can add an category field set to Single-choice and List with no values (categories), that'll get you an empty field that you can use to break a form into sections.

  2

  Comment actions Permalink
• 

  Hannah Durrant

  • October 15, 2015 14:26

  This would be really helpful for us too!

  1

  Comment actions Permalink
• 

  Irislee Koch

  • August 31, 2016 13:50

  +1.  In the meantime, thanks for the helpful workaround

  0

  Comment actions Permalink
• 

  Erik Gustafsson

  • November 21, 2016 15:17

  Hi, 

  We've created an extension called Advanced Web Forms, where we try to implement useful things that are missing in the otherwise excellent native feature.

  We have recently implemented Section Headers, so if you want to check out that and other webform related stuff, you can read more at: http://advancedwebform.com/

  Cheers,
  Erik at Elvenite

  0

  Comment actions Permalink
• 

  Geoffrey Rodgers

  • February 26, 2017 02:23

  To add to Adrien's suggestion - because his is still the best option at this point - I wanted to include some CSS that will really help make the "section header" stand out.

  First, I'll repeat the steps in getting the field on the form that we'll style:

  Add a "Category" field to your template. 

  Select "Single choice" and "List" from the field's configuration options, and do not enter a category option.

  Note: when you save your template, the field will be given a name that does not change. In my example, I called the field "Personal Information" and the name Podio gave the field was "personal-information". Keep this in mind, because it comes into play shortly.

  Next, on your webform designer, click on the option to enter Custom CSS under the "Theme" section. Paste the following CSS:

  label[class="webforms__label"][for="personal-information"] {
    border-bottom-color: black;
    border-bottom-style: solid;
    font-size: 16px;
    margin-top: 60px;
  }

  Save everything and take a look at the webform preview. You should see a header like the following:

  

  If you have multiple section headers, you just add a comma-delimited list for each of the field names given by Podio, e.g.:

  label[class="webforms__label"][for="personal-information"], [for="another-section"], [for="final-section"] {
    border-bottom-color: black;
    border-bottom-style: solid;
    font-size: 16px;
    margin-top: 60px;
  }

   

  I hope this helps someone!

  4

  Comment actions Permalink
• 

  Dino Flora

  • March 14, 2019 20:48

  The CSS works great thank you....

  0

  Comment actions Permalink

Please sign in to leave a comment.