When we built the new Cotap.com, we switched to Wordpress as our CMS in order to give our business team the ability to manage content rather than taking up developer resources for simple copy changes.

While creating the necessary inputs required to manage the headers, paragraphs and bullets, we quickly realized the admin pages were turning into a long pages filled with inputs.

Aside from making an overwhelming form for our marketing team, that method also separated copy and design elements. When a page is reduced to a series of inputs it becomes difficult to understand what impact, if any, copy changes will have until they are saved and viewed on the front end.

We knew the best solution would be one where editors could simply click on an element, make the copy change, and immediately see the impact it would have on the page.

HTML5’s ContentEditable attribute provided the user-side functionality we wanted. We created a simple javascript snippet that would take any text changes in a ContentEditable element and pass it to a paired hidden input.

With the Javascript in place, we just needed the editable element and it’s companion input

Element:

The ContentEditable attribute tells the browser how to engage the content.

The editable class is used by the javascript to target the element.

The data-editable-input-id points to the id of the input where the value is saved.

Input:

It needs an id to target

The type attribute should be set to hidden so users don’t see it.

Placeholder isn’t necessary unless you’re showing the input.





The end product is a robust yet simple interface that our marketing and business teams love. It also has freed up extra development time and removed the delay in getting copy changes deployed.