Views: 2159
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

Aria Zanganeh
(By Aria Zanganeh, 10/19/2016 4: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. 

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

Aria, thanks for the info!

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

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

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

Wow Valdis that is great. 

Please login to comment.