Creating Gated Content with Optimizely Forms

I recently worked on an Optimizely project where the customer wanted to serve gated content to visitors. If you're not familiar with gated content, it's where content is only available to a user that fills out a form - the form being the "gate". Gated content can be a powerful marketing tool to help capture valuable information for lead generation, or for tracking visitor statistics. 

In our case, the customer wanted to provide whitepaper downloads to visitors that provided a defined set of information. Our goal was to create this interaction using Optimizely Forms.

Hide Optimizely Form Info when Redirecting

With Optimizely Forms you have the option to redirect to a page after a complete submission. By default, Optimizely appends some form information to the URL it redirects to. This allows you to process the form submission data in any way you need to on the page it directs to, or perform an action based on what form was submitted. However, if you don't want that information in the URL you can change the behaviour.

Popup TextArea Property Editor

Inline editing in Optimizely delivers a great editor experience due to the WYSIWYG approach for content authors. Sometimes, though, the inline editing can get cumbersome. When making a bunch of edits, or editing a complex component, it can be easier to edit out of line. When working with string properties in these scenarios, I like to use a popup editing box, and this is how I do it.

Hide FormContainerBlock in Optimizely

It's easy to customize a FormContainerBlock by creating a new one inheriting from the out-of-box FormContainerBlock model. When doing this you gain the option of using the OOB container, or your new custom one. However, I have encountered numerous times when the OOB form container was no longer necessary for the project. Furthermore, attempting to use the OOB FormContainerBlock in certain areas created issues I had to account for. In several instances for me, the easiest approach was to hide the Optimizely FormContainerBlock from editors, and this is how I did it.

Optimizely Form Events using an Interface Pattern

Much like standard content items in Optimizely CMS, Forms trigger events that can be subscribed to for further customization. You typically subscribe to these events by employing an Initialization Module and attaching an event handler to process the logic you need for each event. This works well for the out-of-the-box Forms, but I have done enough customization of forms that I started employing an Interface pattern to clean it up. I use this same pattern for content events, so I thought I would share my forms approach. 

Working with SyntaxHighlighter in Blogger Simplified - Updated

I’ve been attempting to clean up my blog and make it a little more user friendly for myself and visitors, and given that it’s a blog by a developer there is bound to be a code sample or two posted on it. When I see a code sample on a site I like to be able to scroll the code block to see the full thing, or highlight sections to copy if I like. Needless to say, it’s important to display code samples properly on a blog for coding.

When I was first throwing this blog together I searched for the best approach to displaying code samples. Some people were using SyntaxHighlighter with some tweaks and troubles here and there; others said the simplest approach was to just create a GitHub Gist and copy the Gist embed URL into your post. The Gist approach seemed the simplest so I decided to go with that to start. Well, now that I tackled that with all the effort it took (none, seriously) I decided to try my hand at SyntaxHighlighter.

Stop Creating New Windows & Tabs When Debugging

By default, Visual Studio launches web applications in a new browser window when debugging. It also closes your browser window when you stop. While I prefer publishing my web applications locally, Optimizely runs well from Visual Studio, and it's easier to debug initialization modules and other items this way. However, when you want to leave the page or content open, this behaviour can get in the way. This is how you change that.