FormBuilder template and stylesheet

  Previous article Next article  

FormBuilder template and stylesheet

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.2
  Last updated: 18-04-2016
  Comments: 6

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.

Download the example template here (13.53KB)

A2 Webhosting CMS Made Simple

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...

Stylesheet Content
[[strip]]
[[* +++++ 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.


A2 Webhosting CMS Made Simple

  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.


A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  6 Comments

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

FormBuilder template and stylesheet

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.2
  Last updated: 18-04-2016
  Comments: 6

A2 Webhosting CMS Made Simple