Hi, wonder if someone could give any advice on how I would start styling the contact form. Have created the form below
As you can see though the text boxes are aligned all over the place. How would I be able to get the boxes lined up correctly, would this be via HTML/CSS or via a propety I have missed on the Form Definition.
Just noticed when I insert that macro via the RTE that there is an option for Pliable Macro Table. Selecting this option has met my style needs. Many Thanks
Styling Guidance
Hi, wonder if someone could give any advice on how I would start styling the contact form. Have created the form below
As you can see though the text boxes are aligned all over the place. How would I be able to get the boxes lined up correctly, would this be via HTML/CSS or via a propety I have missed on the Form Definition.
You can make changes on the xslt and css for the styling.. It works for me..
If you want I will post the modified xslt with css for ref. am attaching the screenshot of the same
Many thanks, if you could post the modified XSLT with CSS for ref that would be excellent
Just noticed when I insert that macro via the RTE that there is an option for Pliable Macro Table. Selecting this option has met my style needs. Many Thanks
I did the customization for the fields I require...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon"xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath"xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings"xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:param name="formNodeId" select="/macro/formNode" />
<xsl:param name="jQuery" select="/macro/jQuery" />
<xsl:variable name="prefix">p</xsl:variable>
<xsl:template match="/">
<xsl:choose>
<xsl:when test="number($formNodeId) > 0">
<xsl:call-template name="renderForm">
<xsl:with-param name="formPage" select="umbraco.library:GetXmlNodeById($formNodeId)" />
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="renderForm">
<xsl:with-param name="formPage" select="$currentPage" />
</xsl:call-template>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="renderForm">
<xsl:param name="formPage" />
<xsl:if test="count($formPage/* [pliableField]) > 0">
<div id="PliableForm" class="contact-form">
<xsl:value-of select="$formPage/formContent" disable-output-escaping="yes" />
<xsl:for-each select="$formPage/* [pliableField]">
<xsl:variable name="name" select="@nodeName" />
<xsl:choose>
<xsl:when test="name() = 'PliableText'">
<xsl:choose>
<xsl:when test="multipleLine != '1'">
<div>
<xsl:choose>
<xsl:when test="position() mod 2 = 1">
<xsl:attribute name="class">
<xsl:text>one-third margin15 form left</xsl:text>
</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="class">
<xsl:text>one-third margin15 form last</xsl:text>
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<fieldset>
<xsl:if test="string-length(label) > 0">
<label for="{$prefix}_{@id}">
<xsl:value-of select="label" disable-output-escaping="yes" />
<xsl:if test="string(required) = '1' and string-length(errorMessage) > 0">
<span class="pErrorMessage required" id="{$prefix}_{@id}_error" style="display:none">
<xsl:text> </xsl:text>
<xsl:value-of select="errorMessage" />
</span>
</xsl:if>
</label>
</xsl:if>
<xsl:variable name="className">
<xsl:text>pText</xsl:text>
<xsl:if test="string-length(class) > 0">
<xsl:text> </xsl:text>
<xsl:value-of select="class" />
</xsl:if>
<xsl:if test="string-length(defaultValue) > 0 and placeholder = '1'">
<xsl:text> placeholder</xsl:text>
</xsl:if>
<xsl:if test="string(required) = '1'">
<xsl:text> pRequiredText</xsl:text>
</xsl:if>
</xsl:variable>
<input type="text" id="{$prefix}_{@id}" name="{$name}" class="text {$className}">
<xsl:if test="string-length(defaultValue) > 0">
<xsl:attribute name="value">
<xsl:value-of select="defaultValue" />
</xsl:attribute>
</xsl:if>
<xsl:if test="string-length(regexValidation) > 0">
<xsl:attribute name="data-validation">
<xsl:value-of select="regexValidation" />
</xsl:attribute>
</xsl:if>
</input>
</fieldset>
</div>
</xsl:when>
<xsl:otherwise>
<div class="two-third margin15 form last">
<fieldset>
<xsl:if test="string-length(label) > 0">
<label for="{$prefix}_{@id}">
<xsl:value-of select="label" disable-output-escaping="yes" />
<xsl:if test="string(required) = '1' and string-length(errorMessage) > 0">
<span class="pErrorMessage required" id="{$prefix}_{@id}_error" style="display:none">
<xsl:text> </xsl:text>
<xsl:value-of select="errorMessage" />
</span>
</xsl:if>
</label>
</xsl:if>
<xsl:variable name="className">
<xsl:text>pText</xsl:text>
<xsl:if test="string-length(class) > 0">
<xsl:text> </xsl:text>
<xsl:value-of select="class" />
</xsl:if>
<xsl:if test="string-length(defaultValue) > 0 and placeholder = '1'">
<xsl:text> placeholder</xsl:text>
</xsl:if>
<xsl:if test="string(required) = '1'">
<xsl:text> pRequiredText</xsl:text>
</xsl:if>
</xsl:variable>
<textarea id="{$prefix}_{@id}" name="{$name}" class="text {$className}">
<xsl:if test="string-length(regexValidation) > 0">
<xsl:attribute name="data-validation">
<xsl:value-of select="regexValidation" />
</xsl:attribute>
</xsl:if>
<xsl:if test="string-length(defaultValue) > 0">
<xsl:value-of select="defaultValue" />
</xsl:if>
</textarea>
</fieldset>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:when test="name() = 'PliableSelect'">
<div>
<xsl:choose>
<xsl:when test="position() mod 2 = 0">
<xsl:attribute name="class">
<xsl:text>one-third margin15 form left</xsl:text>
</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="class">
<xsl:text>one-third margin15 form last</xsl:text>
</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<fieldset>
<xsl:if test="string-length(label) > 0">
<label for="{$prefix}_{@id}">
<xsl:value-of select="label" disable-output-escaping="yes" />
<xsl:if test="string(required) = '1' and string-length(errorMessage) > 0">
<span class="pErrorMessage required" id="{$prefix}_{@id}_error" style="display:none">
<xsl:text> </xsl:text>
<xsl:value-of select="errorMessage" />
</span>
</xsl:if>
</label>
</xsl:if>
<xsl:variable name="className">
<xsl:text>pSelect</xsl:text>
<xsl:if test="string-length(class) > 0">
<xsl:text> </xsl:text>
<xsl:value-of select="class" />
</xsl:if>
<xsl:if test="string(required) = '1'">
<xsl:text> pRequiredSelect</xsl:text>
</xsl:if>
</xsl:variable>
<select id="{$prefix}_{@id}" name="{$name}" class="text {$className}">
<xsl:if test="string(multipleSelections) = '1'">
<xsl:attribute name="multiple">multiple</xsl:attribute>
</xsl:if>
<xsl:variable name="textWithBrs" select="umbraco.library:Replace(umbraco.library:ReplaceLineBreaks(optionsAndValues),'
','')" />
<xsl:variable name="textWithLts" select="umbraco.library:Replace($textWithBrs, '<br/>', '<')" />
<xsl:for-each select="umbraco.library:Split($textWithLts,'<')/value">
<option>
<xsl:attribute name="value">
<xsl:choose>
<xsl:when test="contains(.,'>')">
<xsl:value-of select="substring-after(current(),'>')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="current()" />
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:choose>
<xsl:when test="contains(.,'>')">
<xsl:value-of select="substring-before(current(),'>')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="current()" />
</xsl:otherwise>
</xsl:choose>
</option>
</xsl:for-each>
</select>
</fieldset>
</div>
</xsl:when>
<xsl:when test="name() = 'PliableCheckbox'">
<xsl:if test="string-length(label) > 0">
<label for="{$prefix}_{@id}">
<xsl:value-of select="label" disable-output-escaping="yes" />
</label>
</xsl:if>
<xsl:variable name="className">
<xsl:text>pCheckbox</xsl:text>
<xsl:if test="string-length(class) > 0">
<xsl:text> </xsl:text>
<xsl:value-of select="class" />
</xsl:if>
<xsl:if test="string(required) = '1'">
<xsl:text> pRequiredCheckbox</xsl:text>
</xsl:if>
</xsl:variable>
<input type="checkbox" id="{$prefix}_{@id}" name="{$name}" class="{$className}">
<xsl:if test="string(checked) = '1'">
<xsl:attribute name="checked">checked</xsl:attribute>
</xsl:if>
</input>
<xsl:if test="string(required) = '1' and string-length(errorMessage) > 0">
<span class="pErrorMessage" id="{$prefix}_{@id}_error" style="display:none">
<xsl:value-of select="errorMessage" />
</span>
</xsl:if>
</xsl:when>
<xsl:when test="name() = 'PliableRadioList'">
<xsl:if test="string-length(label) > 0">
<xsl:value-of select="label" disable-output-escaping="yes" />
</xsl:if>
<span id="{$prefix}_{@id}">
<xsl:if test="string(required) = '1'">
<xsl:attribute name="class">pRequiredRadioList</xsl:attribute>
</xsl:if>
<xsl:variable name="nodeId" select="@id" />
<xsl:variable name="textWithBrs" select="umbraco.library:Replace(umbraco.library:ReplaceLineBreaks(labelsAndValues),'
','')" />
<xsl:variable name="textWithLts" select="umbraco.library:Replace($textWithBrs, '<br/>', '<')" />
<xsl:variable name="className" select="class" />
<xsl:for-each select="umbraco.library:Split($textWithLts,'<')/value">
<span class="{$className}">
<input type="radio" name="{$name}" id="{$prefix}{position()}_{$nodeId}" class="pRadio {$className}">
<xsl:attribute name="value">
<xsl:choose>
<xsl:when test="contains(.,'>')">
<xsl:value-of select="substring-after(current(),'>')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="current()" />
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</input>
<label for="{$prefix}{position()}_{$nodeId}">
<xsl:choose>
<xsl:when test="contains(.,'>')">
<xsl:value-of select="substring-before(current(),'>')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="current()" />
</xsl:otherwise>
</xsl:choose>
</label>
</span>
</xsl:for-each>
</span>
<xsl:if test="string(required) = '1' and string-length(errorMessage) > 0">
<span class="pErrorMessage" id="{$prefix}_{@id}_error" style="display:none">
<xsl:value-of select="errorMessage" />
</span>
</xsl:if>
</xsl:when>
<xsl:when test="name() = 'PliableCheckboxList'">
<xsl:if test="string-length(label) > 0">
<xsl:value-of select="label" disable-output-escaping="yes" />
</xsl:if>
<span id="{$prefix}_{@id}">
<xsl:variable name="nodeId" select="@id" />
<xsl:variable name="textWithBrs" select="umbraco.library:Replace(umbraco.library:ReplaceLineBreaks(labelsAndValues),'
','')" />
<xsl:variable name="textWithLts" select="umbraco.library:Replace($textWithBrs, '<br/>', '<')" />
<xsl:variable name="className" select="class" />
<xsl:for-each select="umbraco.library:Split($textWithLts,'<')/value">
<span class="{$className}">
<input type="checkbox" name="{$name}" id="{$prefix}{position()}_{$nodeId}" class="pCheckboxList {$className}">
<xsl:attribute name="value">
<xsl:choose>
<xsl:when test="contains(.,'>')">
<xsl:value-of select="substring-after(current(),'>')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="current()" />
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</input>
<label for="{$prefix}{position()}_{$nodeId}">
<xsl:choose>
<xsl:when test="contains(.,'>')">
<xsl:value-of select="substring-before(current(),'>')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="current()" />
</xsl:otherwise>
</xsl:choose>
</label>
</span>
</xsl:for-each>
</span>
</xsl:when>
</xsl:choose>
</xsl:for-each>
<div class="two-third margin15 form last">
<fieldset>
<input id="Mysubmitted" type="button" value="{$formPage/submitButtonText}" class="button pSubmit" />
</fieldset>
</div>
</div>
<xsl:if test="number($formPage/loadingImage) > 0">
<xsl:variable name="img" select="umbraco.library:GetMedia($formPage/loadingImage,0)" />
<div id="PliableForm_loading" style="display:none">
<img src="{$img/umbracoFile}" alt="{$img/@nodeName}" />
</div>
</xsl:if>
<div id="PliableForm_success" style="display:none">
<xsl:value-of select="$formPage/successContent" disable-output-escaping="yes" />
</div>
<div id="PliableForm_error" style="display:none">
<xsl:value-of select="$formPage/errorContent" disable-output-escaping="yes" />
</div>
<xsl:choose>
<xsl:when test="number($formNodeId) > 0">
<input id="PliableForm_id" type="hidden" value="{$formNodeId}" />
</xsl:when>
<xsl:otherwise>
<input id="PliableForm_id" type="hidden" value="{$formPage/@id}" />
</xsl:otherwise>
</xsl:choose>
<xsl:if test="$jQuery = '1'">
<!-- <xsl:value-of select="umbraco.library:AddJquery()"/> -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</xsl:if>
<script type="text/javascript" src="/scripts/PliableForm.js"></script>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
CSS Stylesheet
/*----------------------------------------- PLIABLE FORMS -----------------------------------------*/ .contact-form label { width:200px; font-weight:normal; display:block; } .contact-form .form { margin-top:15px; } .contact-form .one-third, .contact-form .two-third { float:left; margin-top:60px; } .contact-form .one-third { width:330px; } .contact-form .two-third { width:660px; } .contact-form .margin15 { margin-top:15px !important; } .contact-form .last { margin-right: 0px!important; } .contact-form input[type=text], .contact-form input[type=password], .contact-form input.text, .contact-form input.title, .contact-form textarea { background-color:#FFF; border:1px solid #e1e1e1; font-size:11px; } .contact-form input[type=text]:focus, .contact-form input[type=password]:focus, .contact-form input.text:focus, .contact-form input.title:focus, .contact-form textarea:focus { border-color:#d7d7d7; -moz-box-shadow: 0 0px 3px #d7d7d7; -webkit-box-shadow: 0 0px 3px #d7d7d7; box-shadow: 0 0px 3px #d7d7d7; } .contact-form select { background-color:#fff; border-width:1px; border-style:solid; } .contact-form input[type=text], .contact-form input[type=password], .contact-form input.text, .contact-form input.title, .contact-form textarea, .contact-form select { } .contact-form input.text, .contact-form input.title { width: 300px; padding: 5px 10px; } .contact-form input.title { font-size:1.5em; } .contact-form textarea { width:630px; height:180px; padding:5px 10px; } .contact-form form.inline { line-height:3; } .contact-form form.inline p { margin-bottom:0; } .contact-form .required { color:#ff0000; }If there is any issue please let me know
is working on a reply...