Views:	2739
Number of votes:	3
Average rating:

Make Episerver Forms a Little More Bootstrap Friendly

You may have noticed that the way the Episerver Forms package renders form elements that it isn’t really bootstrap friendly. Well there is a way to fix that.

Dig down into \modules\_protected\EPiServer.Forms\EPiServer.Forms.zip\Views\ElementBlocks\ and copy those ascx files into \Views\Shared\ElementBlocks.

Then you can tweak each template.

A couple of examples:

On TextboxElementBlock.ascx add “form-group” to the class attribute on the outer DIV and add “form-control” to the class attribute for the input tag.
On SubmitButtonElementBlock.ascx add “btn” to the class attribute.

Your form should now pickup bootstrap’s form styles.

Oct 19, 2016

( By Aria Zanganeh, 10/19/2016 2:04:19 AM)

Good article .. the other good thing I found is in episerver form configuration we can turn off BEM style using injectFormOwnStylesheet:

http://world.episerver.com/documentation/Items/Developers-Guide/Episerver-CMS/9/forms/configuring-episerver-forms/

And then load our own css which inherits from bootstrap:

http://world.episerver.com/documentation/Items/Developers-Guide/Episerver-CMS/9/forms/load-additional-resources-after-form-rendering-using-iviewmodeexternalresources/

With this you make sure you always get latest ASCX on nuget upgrade.

( By KennyG, 10/19/2016 2:11:30 AM)

Aria, thanks for the info!

( By valdis, 10/19/2016 1:36:23 PM)

Also, if you want to apply DisplayOptions for the elements, can use this trick.

( By Aria Zanganeh, 10/19/2016 9:38:18 PM)

Wow Valdis that is great.

Please login to comment.