Portal Engine Questions on portal engine and web parts.
Version 6.x > Portal Engine > How to style forms View modes: 
User avatar
Member
Member
dbraun-pediatricweb - 2/4/2013 6:11:33 PM
   
How to style forms
Is there a better/easier way to visually style forms?
I am having a heck of a time trying to get the text labels for the contact form to even align left.

User avatar
Certified Marketer 12
Certified Marketer 12
ilesh.m-mmtdigital.co - 2/5/2013 4:09:19 AM
   
RE:How to style forms
Hello

If you mean Kentico Biz Forms on the front end, then what you can do is go to the Form tab and select the 'Use custom form layout'. Here you can either 'Generate table layout' or create your own using Divs or whatever HTML you want using the Source option from CK Editor.

Then you can add in the class/id and using CSS you can then align the form labels and fields.

I would recommend that you 'Generate table layout' then go to the Source code of it and add the HTML you require around the fields.

Hope this helps

Thanks

Ilesh Mistry from MMT Digital's K-Team
Certified Kentico Developer

User avatar
Kentico MVP
Kentico MVP
Brenden Kehren - 2/5/2013 7:54:37 AM
   
RE:How to style forms
View your form and right click the page the form is loaded on and find the element in html. You will find a <div> element with a class="FormPanel". Nested inside the <div> is a <table> with class="EditingFormTable" assigned to it. The category rows have class names assigned to them as do the cells (label and value) and the label cells have <span> tags around the label text so you can style that as well. I suggest creating a simple form and reviewing the rendered markup. All you'd need to do is create those classes in your stylesheet. Here is a quick example:
.FormPanel { width: 100%; padding: 8px; border: none; }
.FormPanel .EditingFormTable, { width: 100%; }
.FormPanel .EditingFormTable .EditingFormCategoryRow { text-transform: uppercase; font-family: "OswaldBold"; font-size: 16px; color: #333333; }
.FormPanel .EditingFormTable .EditingFormCategoryRow td { margin: 10px 0px; padding: 5px 5px 5px 10px; }
.FormPanel .EditingFormTable tr .EditingFormLabelCell { vertical-align: middle; text-align: right; }
.FormPanel .EditingFormTable tr .EditingFormLabelCell .EditingFormLabel { font-weight: bold; }
.FormPanel .EditingFormTable tr td { padding-bottom: 9px; }
.FormPanel .EditingFormTable tr .EditingFormButtonCell { padding-top: 10px; }

User avatar
Kentico Customer Success
Kentico Customer Success
kentico_martind2 - 2/6/2013 8:29:37 AM
   
RE:How to style forms
Hi,

First let me say thanks for the posts guys, really great!

As second... what have you already tried? In my opinion the easy way is to style them via CSS as FroggEye mentioned in the previous post.

Best regards,
Martin Danko