Sunday, February 21, 2010

How to get codes with a <form> tag working in Office Live?

Since my last entry, I have had a number of users say they still are not able to get code to work in Office Live.  There have been two main reasons, 1.  The Custom Footer Module is broken.  The simple solution is simply use one of the other custom modules (Custom Header or Custom Navigation).  The second reason is codes that have a <form> tag in the code, this can include contact us forms, or even Google’s Search box has a <form> tag in it.

To make a code with a <form> tag work in Office Live, use the following base codes, these codes work in all the Custom modules.  There are two base codes, one for strict XHTML and one for codes that may not conform to XHTML standards.  If possible use the strict XHTML base code.  If the code does not work then use the second base code.

Base code for XHTML compliant codes:

Your code would go on line #5

1: <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
2: <xsl:output method="html" omit-xml-declaration="yes"/>
3: <xsl:template match="/">
4: <xsl:text disable-output-escaping="yes"><![CDATA[</form>]]></xsl:text>
5:
6: <xsl:text disable-output-escaping="yes"><![CDATA[<form>]]></xsl:text>
7: </xsl:template>
8: </xsl:stylesheet>

Example:

<xsl:stylesheet xmlns:xsl=http://www.w3.org/1999/XSL/Transform version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<xsl:text disable-output-escaping="yes"><![CDATA[</form>]]></xsl:text>
<div align="left" >
<form action=http://solutionsforofficelive.com/search.aspx id="cse-search-box" style="background-color:#1b1b1b; background-repeat:repeat;width:275px; height:40px;">
<input type="hidden" name="cx" value="partner-pub-0488902814979569:dku8ma-8ngn" />
<input type="hidden" name="cof" value="FORID:11;NB:1" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="19" style="height:25px; vertical-align:middle; background-color:#ffffff; background-repeat:repeat; border : 1px solid #ff9900; font-size:12pt;"/>
<input type="image" src="/documents/mag_glass.gif" style="vertical-align:middle;" alt="Search" name="sa"/></form></div>
<xsl:text disable-output-escaping="yes"><![CDATA[<form>]]></xsl:text>
</xsl:template>
</xsl:stylesheet>

Base code for non-compliant codes:

Your code would go on line #6

1: <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
2: <xsl:output method="text" omit-xml-declaration="yes"/>
3: <xsl:template match="/">
4: <![CDATA[
5: </form>
6:
7: <form>
8: ]]>
9: </xsl:template>
10: </xsl:stylesheet>

Example:

<xsl:stylesheet xmlns:xsl=http://www.w3.org/1999/XSL/Transform version="1.0">
<xsl:output method="text" omit-xml-declaration="yes"/>
<xsl:template match="/">
<![CDATA[
</form>
<div align="left" >
<form action=http://solutionsforofficelive.com/search.aspx id="cse-search-box" style="background-color:#1b1b1b; background-repeat:repeat;width:275px; height:40px;">
<input type="hidden" name="cx" value="partner-pub-0488902814979569:dku8ma-8ngn" />
<input type="hidden" name="cof" value="FORID:11;NB:1" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="19" style="height:25px; vertical-align:middle; background-color:#ffffff; background-repeat:repeat; border : 1px solid #ff9900; font-size:12pt;"/>
<input type="image" src="/documents/mag_glass.gif" style="vertical-align:middle;" alt="Search" name="sa"/></form></div>
<form>
]]>
</xsl:template>
</xsl:stylesheet>