World is now on Opti ID! Learn more

KennyG
Oct 19, 2016
  3919
(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
Password protect your Optimizely CMS content

Want to share some private content on your website with basic password protection? You can do this with an Optimizely form and Audience based...

Brian Gerby | Jul 17, 2025 |

Importing Form Submission Data into Optimizely Forms Using DdsPermanentStorage

Recently, we needed to import a large number of records from a third-party system into Optimizely Forms . The data was available in CSV format, and...

Pawan Singh | Jul 16, 2025

Cancelling CMS Scheduled Jobs

From flags to tokens: making Optimizely CMS scheduled jobs more elegant with .NET cancellation tokens.

Damian Smutek | Jul 16, 2025 |

Optimizely Frontend Hosting: Deploy Without PowerShell Using the @kunalshetye/opticloud Package

In my last two blog posts, I walked through how to get started with deploying a headless app to Optimizely Frontend Hosting using PowerShell and th...

Szymon Uryga | Jul 15, 2025

New Administrator Certifications Are Here — 7 Ways to Get Certified with Optimizely

Not a developer but want to prove your product expertise? We’ve got great news. We’re thrilled to announce the expansion of Optimizely’s...

Satata Satez | Jul 15, 2025

Optimizely London Dev Meetup 10th July 2025

Overview & Agenda As 2025 rolled around this year it was time for another one of our much beloved developer meetups in London. This year, I took us...

Scott Reed | Jul 15, 2025