FormBuilder template and stylesheet
Previous article Next articleThe 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.
Download the example template here (13.53KB)
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...
[[* +++++ Multiple Used Values +++++ *]]
[[$label_width = '150']]
[[$field_width = '300']]
[[$field_border = 'border: #ccc solid 2px;']]
[[$field_border_hover = 'border: #666 solid 2px;']]
[[capture assign='rounded_corners']]border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;[[/capture]]
[[* +++++ Stylesheet +++++ *]]
.formbuilder div { margin: 0 0 5px 0 }
.formbuilder div div {
margin: 0 0 0 [[$label_width]]px;
padding: 0 0 5px 0;
}
.formbuilder input[type="email"],
.formbuilder input[type="file"],
.formbuilder input[type="option"],
.formbuilder input[type="text"],
.formbuilder textarea,
.formbuilder select {
width: 100%;
max-width: [[$field_width]]px;
margin: 0 5px 0 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
[[$field_border]]
[[$rounded_corners]]
}
.formbuilder select { width: [[$field_width+4]]px }
.formbuilder input[type="email"]:hover,
.formbuilder input[type="file"]:hover,
.formbuilder input[type="option"]:hover,
.formbuilder input[type="text"]:hover,
.formbuilder textarea:hover,
.formbuilder select:hover {
[[$field_border_hover]]
cursor: default;
}
.formbuilder input[type="submit"] {
width: 100%;
max-width: [[$field_width+4]]px;
margin: 10px 0 0 0;
[[$field_border]]
[[$rounded_corners]]
cursor: pointer;
}
.formbuilder input[type="submit"]:hover { [[$field_border_hover]] }
.formbuilder label {
/*width: 100%;*/
width: [[$label_width]]px;
margin-bottom: 5px;
float: left;
}
.formbuilder input[type="checkbox"] + label,
.formbuilder input[type="radio"] + label {
width: 60px;
float: left;
}
.formbuilder input[type="checkbox"] + label.label {
width: 190px;
float: right;
}
.formbuilder_text_error {
color: #f00;
font-weight: bold;
}
.captchapict {
width: [[$field_width]]px;
[[$field_border]]
[[$rounded_corners]]
}
.formbuilder_field_error input[type="email"],
.formbuilder_field_error input[type="file"],
.formbuilder_field_error input[type="option"],
.formbuilder_field_error input[type="text"],
.formbuilder_field_error select,
.formbuilder_field_error textarea,
.formbuilder_field_error .captchapict { border: #f00 solid 2px }
/**
* Below some more available CSS codes...
* Note: when you need them, the sequence of all lines is important!
.formbuilder input { }
.formbuilder input[type="button"] { }
.formbuilder input[type="radio"] { }
.formbuilder input[type="checkbox"] { }
.formbuilder legend { }
.formbuilder optgroup { }
.formbuilder fieldset { }
.formbuilder form { }
*
**/
[[/strip]]
Related blog post: Styling forms
You can use the demo form and stylesheet to create a new form at your website. Or use it to learn the basics of creating and styling Formbuilder forms.
Working example
Note: I like to get feedback, but I can't (and won't) help you create your own form here. Use Google or the community boards of the CMSMS forum instead.
Comment Form
ReviewManager
ReviewManager
6 Comments
Where can I edit the text "This is a Show Case Form" It appears on the top of the form?
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
@Augustas
Is kind of fixed in next module release, read:
http://dev.cmsmadesimple.org/bug/view/10255
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?
I updated the demo form and stylesheet for better use in phones, etc.
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.
any help much appreciated thanks
FormBuilder template and stylesheet
Article optimized for CMSMS 2.x
Author: RolfLast tested in: CMSMS 2.2.19
Last updated: 23-06-2018
Comments: 6
http://cms.ms/ucmt
