Description 

 Form creator is used to create and add custom forms to the website.

 Procedure 

• Click on folders  -> right click on an article -> click on edit article
• Navigates to the article content page.
• Select “create form” from the drop down list, click on “Add” button
• Displays the “Form creator options” screen where you can set the properties for the form.

Form creator options:- Header

1. “Heading text field” – (any text you input in “heading text” will appear at top of the form before the fields are displayed.)
2. “General text field   - (any text you input in “General text” will appear below the heading text form before the fields are displayed.)

 Submit button

1. Submit button type – (Standard button :-will look like a typical windows style button           Image button:- will look like an image  that you select to use.)
2. Submit button text – (when the user choose “standard button” the text will appear on the submit button)
3. Submit button image – (Set the image that will be used for the button if you have chosen to use the image button.)
4. Submit button Align – (Aligns the submit button as per the selection left, middle, right)

 Submission Response

1. Set a message to display to the user after clicking submit button

 

Style of field labels

    1.   Select the text colour from the colour palette

2. Select the type of the font
3. Select the font size
4. Select the checkbox if the font should be in bold.
5. Input the left margin width of the web page

Thanks Rajesh, Viewing a form in IE is ok (just) but the layout breaks in Firefox. All the fields run accross the screen rather than down. I assume that I have to produce my own CSS for the forms. Can you please tell me the best way of doing this so that all forms look the same across the site? Do you guys have a style sheet already done for this, if not what do I need to target in the CSS to accomplish this?

BTW, setting the left margin width does not seem to do anything in IE or Firefox.

Hi Hilary

Thanks for your reply, I am currently looking into this issue for you and i will get back to you with an answer at the earliest. Thanks S.Rajesh Stephen

Hi Hilary,

From version 5.4 of CM we made quite a few structural changes to the form creator HTML to make it more compliant for accessibility and to allow the styling to be more flexible and controllable via CSS.

There is some default CSS present in the base stylesheets for forms but you can supplement this with your own CSS via the User Uploaded Stylesheets.

As a starting point you can try copying and pasting the below CSS into your CSS file and then can tweak widths, colours, fonts etc to your needs.

One small thing to keep in mind though if your intranet is upgraded to CM 5.5 or above is we made a few further tweaks to the form creator HTML to allow greater control particularly with Checkbox and Radio Button Lists so the CSS might need to be tweaked again in those cases.

Cheers,
David

/*----------Start new form creator layout styles----------*/
#divFormCreatorTableContentMain {width:100%; float:left; display:block;}
#divFormCreatorTableContentMain h2 {clear:left; margin:10px 0px; padding:0px;}
#divFormCreatorTableContentMain fieldset {clear:both; border:none; float:left; display:block; width:100%;}
#divFormCreatorTableContentMain p {float:left; clear:left; margin:0px 0px 5px 0px; padding:0px; width:700px;}
#divFormCreatorTableContentMain p.clsGeneralText {float:none; clear:both;}
#divFormCreatorTableContentMain p.clsDescriptionField {}
#divFormCreatorTableContentMain p label {width:200px; float:left;}
#divFormCreatorTableContentMain p input {}
#divFormCreatorTableContentMain .clsCheckBoxListSpanOptions,
#divFormCreatorTableContentMain .clsRadioButtonListSpanOptions {float:left; width:300px; margin-bottom:12px;}
/* IE6 Only */
* html body #divFormCreatorTableContentMain .clsCheckBoxListSpanOptions,
* html body #divFormCreatorTableContentMain .clsRadioButtonListSpanOptions {float:left; width:310px; margin-bottom:12px;}
#divFormCreatorTableContentMain .clsCheckBoxListSpanOptions span,
#divFormCreatorTableContentMain .clsRadioButtonListSpanOptions span {float:left; clear:both; display:block;}
#divFormCreatorTableContentMain p input.clsRadioButtonList,
#divFormCreatorTableContentMain p input.clsCheckBoxList {float:left; width:auto;}
#divFormCreatorTableContentMain p label.clsCheckBoxListLabel,
#divFormCreatorTableContentMain p label.clsRadioButtonListLabel {clear:none !important; width:280px !important; height:18px; padding-top:2px;}
#divFormCreatorTableContentMain p textarea {}
#divFormCreatorTableContentMain p select {}
#divFormCreatorTableContentMain p.clsMandatory {clear:both;}
#divFormCreatorTableContentMain p.clsBtnSubmit {clear:both;}
/*----------End new form creator layout styles----------*/