We use cookies to ensure that we give you the best experience on our website. We also use cookies to ensure we show you advertising that is relevant to you.If you continue without changing your browser settings, we will assume that you are happy to receive all cookies on this website.

FormBuilder template and stylesheet

The default form template and stylesheet provided by the excellent FormBuilder module for CMS Made Simple™ is straightforward, the very basics are there. In this post I try to give a more extended styled form template. I hope it will give you a headstart styling the forms at your CMSMS website. You can see a working example at this demo page.

How to use

The form template

First you have to download the XML-file containing the form template and save it at your computer.

Open the FormBuilder admin page in your CMSMS backend and go to XML Form Import - Upload form from XML file. Browse your computer and select the downloaded XML file. If you want you can change the Form name/alias and hit Submit.

The stylesheet

Create a new stylesheet in the CMSMS Admin and attach it to the HTML template used for the form page. I used Smarty tags for multiple used values, you only need to change them at one spot...

Share this page on:

Show related articles:

Comment Form

6 Comments

Where can I edit the text "This is a Show Case Form" It appears on the top of the form?

03-11-2015

Richard

Hi everyone,

Would you happen to know how to create inline form labels? It would save us so much space on smartphones and tablets to just put the labels inside the formfields like this:

http://zurb.com/playground/inline-form-labels

But I can't figure out how to transform the template and CSS with formbuilder. Anyone wanna try?

Cheers!

Richard

19-10-2014

Rolf

@Augustas Is kind of fixed in next module release, read: http://dev.cmsmadesimple.org/bug/view/10255

05-10-2014

Augustas

When I submit incomplete form with the File selected for upload, the form reloads highlighting fields with errors. Meanwhile the "File Upload" also displays the name of the file I have just uploaded.

However, when I submit the same form once again -- the file submitted during the first try is gone - it is not saved into the local folder. If there were form errors once again - the "File Uploads" fields does not display the filename anymore.

The same happens on the CMSMS form I have setup for my client.

Do you know by any chance know how to fix that?

07-02-2014

Rolf

I updated the demo form and stylesheet for better use in phones, etc.

23-01-2014

Si

Hi, thanks for the tutorial. How do you get the markup rendered for the elements to omit the 'required' attribute? I'm having issues with the HTML5 'constraint validation' that is native to the browser wanting to get involved.