Try our conversational search powered by Generative AI!

How to apply the CSS Styles to EPIServer forms???

Vote:
 

Hi Guys,

 i want to apply my own styles to EPIServer forms field,can any one help me out of this.

Thanks,

Ramkee.G

#186859
Jan 07, 2018 19:18
Vote:
 

Not sure I am 100 percent sure of what you are after but if I understand correct you would like to style the rendered forms from the episerver forms module for end visitors? If so you can either just create your own css and use the classes already available in the markup from the forms-module. Another approach is to have a look in the forms.config and find out what path you have for your views. Then creat your own path and views in that exact folder in your solution. Here you can either copy the developed views from episerver and add your own or you create your own views from scratch. I prefer using the first approach, copy and add your own markup/css and then use these in your own css-files.

This link might help you: https://world.episerver.com/documentation/developer-guides/forms/configuring-episerver-forms/

"Disabling the default stylesheet
Episerver Forms has a default stylesheet (EPiServerForms.less), using BEM methodology to name CSS classes and decorate HTML element tags; it is a very fundamental, minimal .less file, and easy to modify. If you do not want this, you can turn it off by using the following configuration.

injectFormOwnStylesheet="true" .."

#186862
Jan 07, 2018 21:25
Vote:
 

Also to note if you extract the forms packages to a local directory and change the formElementViewsFolder="~/Views/Shared/ElementBlocks" as described here https://world.episerver.com/documentation/developer-guides/forms/configuring-episerver-forms/ you can adjust the markup of all form components as you see fit changing any html strucutre or class names. Just make sure to leave any dynamic stuff or jquery validation.

#186869
Jan 08, 2018 10:08
Vote:
 

Thank you very much Eric and scott reed for your eply and time consideration,if i apply the styles(CSS) in form.config it will be effect on through out the application(ex:Registration form and contactus form), but i want to customize with diffferent styles to different form(ex:registration and contactus form).

Thanks,

Kartheek.

#186888
Jan 08, 2018 12:48
Vote:
 

If you go down my recommendation of extending the form markup you can put some logic in the FormContainerBlock.asxc markup that could dynamically set a css class for the forms. This could be specifically looking for something tha indicates the difference of form implicitly or you could look at extending the form system to add a styling option in the form settings allowing you to select the form styling when the form is creation allowing for a more reusable experience.

#186900
Edited, Jan 08, 2018 13:50
Vote:
 

Hi,

You can create you own model for formcontainerblock that inherits the baseclass. If you do that you can add properties for selecting diffrent stylings. Then you can use @scotts sugestion to use that property to change classes or whatever :) 

https://world.episerver.com/documentation/developer-guides/forms/creating-a-custom-form-block/

#186909
Jan 08, 2018 15:32
Vote:
 

Yes as myself and Eric has stated the model would be far more reusable across multiple form instances. cool

#186910
Jan 08, 2018 15:37
Vote:
 

Does anyone know of a way to configure the css directory that Forms looks for to apply the styling?

I wan't to apply my own stylings but don't really want to go peaking into the .Zip file in the modules/ directory as this will make it difficult to maintian going forward, e.g. I'll have to cherry pick things if I ever want to upgrade the forms module in the future. It doesn't feel like this is the best practice for applying custom forms stylings. 

Edit: I know I can apply my own CSS style as an override, but it still doesn't feel like best practice as I would need to use the !important flag to override those stylings from the .less file... 

EDIT2: Never mind - I've just found out how it can be switched off - https://world.episerver.com/documentation/developer-guides/forms/configuring-episerver-forms/ 

#210360
Edited, Nov 21, 2019 12:20
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.