KennyG
Oct 19, 2016
  3809
(3 votes)

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

Comments

Aria Zanganeh
Aria Zanganeh Oct 19, 2016 02:04 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
KennyG Oct 19, 2016 02:11 AM

Aria, thanks for the info!

valdis
valdis Oct 19, 2016 01:36 PM

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

Aria Zanganeh
Aria Zanganeh Oct 19, 2016 09:38 PM

Wow Valdis that is great. 

Please login to comment.
Latest blogs
PageCriteriaQueryService builder with Blazor and MudBlazor

This might be a stupid idea but my new years resolution was to do / test more stuff so here goes. This razor component allows users to build and...

Per Nergård (MVP) | Feb 10, 2025

Enhancing Optimizely CMS Multi-Site Architecture with Structured Isolation

The main challenge of building an Optimizely CMS website is to think about its multi site capabilities up front. Making adjustment after the fact c...

David Drouin-Prince | Feb 9, 2025 | Syndicated blog

How to: set access right to folders

Today I stumped upon this question Solution for Handling File Upload Permissions in Episerver CMS 12, and there is a simple solution for that Using...

Quan Mai | Feb 7, 2025 | Syndicated blog

Poking around in the new Visual Builder and the SaaS CMS

Early findings from using a SaaS CMS instance and the new Visual Builder grids.

Johan Kronberg | Feb 7, 2025 | Syndicated blog

Be careful with your (order) notes

This happened a quite ago but only now I have had time to write about it. Once upon a time, I was asked to look into a customer database (in a big...

Quan Mai | Feb 5, 2025 | Syndicated blog

Imagevault download picker

This open source extension enables you to download images as ImageData with ContentReference from the ImageVault picker. It serves as an alternativ...

Luc Gosso (MVP) | Feb 4, 2025 | Syndicated blog