Yesterday I was assisting a partner in setting up a simple "Subscribe" xform on a customer web site. It was a fairly simple setup: An input-text box for the email (validating as email), and a submit button, that should store the email in the database.

"What an excellent chance to use the build-in XForms editor", I thought - and then we started. We made an XForm property on the pagetype and began build the form in the xform editor. It was fairly quick and easy - until we realized that we wasn't really pleased with the HTML it outputted: it was tables, not div's, we wanted to change the formatting a bit as well, and we wanted the validation text to appear another place.

After reading the documentation and looking at the code-samples I understood that in order to modify the output you'd have to hook into the right events and run a lot of regular expressions to convert the html to what you preferred. Even though I'm a huge fan and believer in regex, I just wasn't in the mood to make a lot of unreadable code yesterday afternoon and so I called on Linus (EPiServer front-end guru) to help me with an easy way out. First of all, Linus introduced me to a hidden (but really cool) feature in the XForms editor:

When the XForms editor has focus you can hit CTRL+SHIFT+C to copy the underlying HTML to your clipboard (make sure to click "Yes" if a security dialog appears). Then paste it in notepad, edit it, copy it back to your clipboard - and when you're done, paste it back in your XForms editor using CTRL+SHIFT+V.

This turns out to be a nice and easy way to customize an xhtml form. However, since the validation is build into the xform input field, that was a bit trickier - that is, until Linus pointed out that it uses standard asp.net validation which means that we could just place a ValidationSummary anywhere on the page to output the validation messages there. For some reason they kept appearing next to the input field as well - but that was easy to solve with a bit of CSS. All we then needed to do was to tweak the validation messages a bit so the language in them made more sense. Since this was a danish web site it was just a matter of modifying the right strings in "/lang/LanguageDA.xml". Thanks for the help, Linus!