KennyG
Oct 19, 2016
  3003
(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
Optimizely SendGrid SMTP host is deprecated

SendGrid is a services for sending email that is included in Optimizely DXP. Previously smtp.episerver.net was the recommended SMTP server to use,...

Tomas Hensrud Gulla | Dec 4, 2022 | Syndicated blog

Hosting Optimizely CMS 12 on Docker Engine

Since Optimizely CMS can now be deployed as a Docker container, here is a demonstration of building, running and scaling an Optimizely CMS 12 site ...

Stefan Holm Olsen | Dec 4, 2022 | Syndicated blog

How to use CacheTagHelper with content areas in Optimizely CMS 12

I might be going out on a limb here - if you have a better solution, feel very free to share it!  Upgrading your Optimizely web application from .N...

Andreas J | Dec 2, 2022

The 1001st Piece in your 1000 Piece Puzzle: .NET Default Interface Functions

I was recently working with a client who wanted a reasonably large subsystem added to Optimizely that would add automated management to their...

Greg J | Nov 28, 2022 | Syndicated blog