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.
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.
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...
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.
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.
Where can I edit the text "This is a Show Case Form" It appears on the top of the form?
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:
But I can't figure out how to transform the template and CSS with formbuilder. Anyone wanna try?
Is kind of fixed in next module release, read:
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