Forms

Posted by Community Admin on 03-Aug-2018 11:50

Forms

All Replies

Posted by Community Admin on 11-Mar-2011 00:00

Morning,

I have created a number of forms and have noticed that I am unable to set the size of the fields.  Well, I can set the field sizes (textboxes and paragraph) and they do not change. 

I have attached two images, one of how it is designed and another of how it appears.  I have no CSS that should be affecting the styling of the form.  So I am a little bit confused.  The drop down box is also not showing as I expect with the label above the control. 

Anybody got any ideas?

Posted by Community Admin on 16-Mar-2011 00:00

Hello James Greaves,

You are supposed to set the size of the fields in your site theme. You can set different classes to the form fields in the Forms Editor (the editor which you create and edit the form in). After that, when you add the form to a page (in Page Editor, the editor used to manage pages) you can write CSS in the site theme to style the form as you like. You can read more on themes in the Designer's guide

We will add the option to add a theme to a form (in Forms Editor) in one of the next Sitefinity releases.

Let us know if you need further help.

Kind regards,
Katia
the Telerik team

Posted by Community Admin on 17-Mar-2011 00:00

Thanks for the reply,

I am a little confused still, I have set a class and given it a width but this still does not change the size of the text box. 

The in-built option to change the textbox size does not work and CSS as far as I am aware will only change the size of the wrapper around the text box. 

All I want to do is increase the length of the text boxes for the minute.  If this is a CSS thing, woul dyou mind sending me a class I can try out?

Cheers,

Posted by Community Admin on 17-Mar-2011 00:00

The size you specify in the management section sets the size of the containing div element. What I've done is style based on the container, since my forms are fairly simple (single-column), like this:

/* sfFieldWrp is a Sitefinity class surrounding the input */
#contactForm .sfFieldWrp input width: 97%; font-size: 14px; padding: 4px;
/* sfTxtLbl is a Sitefinity class applied to the label element */
#contactForm .sfTxtLbl font-weight: bold; font-size: 14px;

You may want to consider using FireBug on Firefox to inspect the elements created by Sitefinity, noting how they change with changes in the management settings.

Josh

Posted by Community Admin on 18-Mar-2011 00:00

Cheers Josh. 

It had been a long day!  Exactly what I wanted, no idea why I didn't think to use FireBug?!

Thanks again

Posted by Community Admin on 09-Jan-2014 00:00

Hello Josh,

I have tried your codes for the text box and label but for the text area (.sfDescription ) and submit button (.sfFormSubmit sfSubmitBtnLarge) the CSS is not working.  Can you please help me with it.

Thank you
Vishika

Posted by Community Admin on 10-Jan-2014 00:00

Hi Vishika,

What you can do is add your custom CSS classes for each of your form fields by editing the form in Sitefinity backend then edit the properties of the controls you want to style. On the appearance tab you can add custom CSS class as it shown in the attached screenshot. For example custoDescription, customFormSubmit and then apply the same CSS as Josh suggested:

/* sfFieldWrp is a Sitefinity class surrounding the input */
.custoDescription width: 97%; font-size: 14px; padding: 4px;
/* sfTxtLbl is a Sitefinity class applied to the label element */
.customFormSubmit font-weight: bold; font-size: 14px;

I believe this should help you. If this does not help, please send more information about your Sitefinity version and how you are adding your custom CSS on the page.

Regards,
Strahil Strahilov
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed