Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Matthew Jarvis 129 posts 129 karma points
    Oct 06, 2011 @ 12:41
    Matthew Jarvis
    0

    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.

  • SM 19 posts 41 karma points
    Oct 07, 2011 @ 13:49
    SM
    1

    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

     

  • Matthew Jarvis 129 posts 129 karma points
    Oct 10, 2011 @ 12:14
    Matthew Jarvis
    0

    Many thanks, if you could post the modified XSLT with CSS for ref that would be excellent

  • Matthew Jarvis 129 posts 129 karma points
    Oct 10, 2011 @ 14:43
    Matthew Jarvis
    0

    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

  • SM 19 posts 41 karma points
    Oct 13, 2011 @ 08:05
    SM
    1

    I did the customization for the fields I require...

     <?xml version="1.0" encoding="UTF-8"?>

    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <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) &gt; 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]) &gt; 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) &gt; 0">
                                <label for="{$prefix}_{@id}">
                                    <xsl:value-of select="label" disable-output-escaping="yes" />
                                    <xsl:if test="string(required) = '1' and string-length(errorMessage) &gt; 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) &gt; 0">
                                  <xsl:text</xsl:text>
                                  <xsl:value-of select="class" />
                                </xsl:if>
                                <xsl:if test="string-length(defaultValue) &gt; 0 and placeholder = '1'">
                                  <xsl:textplaceholder</xsl:text>
                                </xsl:if>
                                <xsl:if test="string(required) = '1'">
                                  <xsl:textpRequiredText</xsl:text>
                                </xsl:if>
                              </xsl:variable>
                              <input type="text" id="{$prefix}_{@id}" name="{$name}" class="text {$className}">
                                <xsl:if test="string-length(defaultValue) &gt; 0">
                                  <xsl:attribute name="value">
                                    <xsl:value-of select="defaultValue" />
                                  </xsl:attribute>
                                </xsl:if>
                                <xsl:if test="string-length(regexValidation) &gt; 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) &gt; 0">
                                    <label for="{$prefix}_{@id}">
                                        <xsl:value-of select="label" disable-output-escaping="yes" />
                                        <xsl:if test="string(required) = '1' and string-length(errorMessage) &gt; 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) &gt; 0">
                                  <xsl:text</xsl:text>
                                  <xsl:value-of select="class" />
                                </xsl:if>
                                <xsl:if test="string-length(defaultValue) &gt; 0 and placeholder = '1'">
                                  <xsl:textplaceholder</xsl:text>
                                </xsl:if>
                                <xsl:if test="string(required) = '1'">
                                  <xsl:textpRequiredText</xsl:text>
                                </xsl:if>
                              </xsl:variable>
                              <textarea id="{$prefix}_{@id}" name="{$name}" class="text {$className}">
                                <xsl:if test="string-length(regexValidation) &gt; 0">
                                  <xsl:attribute name="data-validation">
                                    <xsl:value-of select="regexValidation" />
                                  </xsl:attribute>
                                </xsl:if>
                                <xsl:if test="string-length(defaultValue) &gt; 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) &gt; 0">
                                <label for="{$prefix}_{@id}">
                                    <xsl:value-of select="label" disable-output-escaping="yes" />
                                    <xsl:if test="string(required) = '1' and string-length(errorMessage) &gt; 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) &gt; 0">
                                  <xsl:text</xsl:text>
                                  <xsl:value-of select="class" />
                                </xsl:if>
                                <xsl:if test="string(required) = '1'">
                                  <xsl:textpRequiredSelect</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),'&#xA;','')" />
                                <xsl:variable name="textWithLts" select="umbraco.library:Replace($textWithBrs, '&lt;br/&gt;', '&lt;')" />
                                <xsl:for-each select="umbraco.library:Split($textWithLts,'&lt;')/value">
                                <option>
                                    <xsl:attribute name="value">
                                      <xsl:choose>
                                        <xsl:when test="contains(.,'&gt;')">
                                          <xsl:value-of select="substring-after(current(),'&gt;')" />
                                        </xsl:when>
                                        <xsl:otherwise>
                                          <xsl:value-of select="current()" />
                                        </xsl:otherwise>
                                      </xsl:choose>
                                    </xsl:attribute>
                                    <xsl:choose>
                                      <xsl:when test="contains(.,'&gt;')">
                                        <xsl:value-of select="substring-before(current(),'&gt;')" />
                                      </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) &gt; 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) &gt; 0">
                      <xsl:text</xsl:text>
                      <xsl:value-of select="class" />
                    </xsl:if>
                    <xsl:if test="string(required) = '1'">
                      <xsl:textpRequiredCheckbox</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) &gt; 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) &gt; 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),'&#xA;','')" />
                    <xsl:variable name="textWithLts" select="umbraco.library:Replace($textWithBrs, '&lt;br/&gt;', '&lt;')" />
                    <xsl:variable name="className" select="class" />
                    <xsl:for-each select="umbraco.library:Split($textWithLts,'&lt;')/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(.,'&gt;')">
                                <xsl:value-of select="substring-after(current(),'&gt;')" />
                              </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(.,'&gt;')">
                              <xsl:value-of select="substring-before(current(),'&gt;')" />
                            </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) &gt; 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) &gt; 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),'&#xA;','')" />
                    <xsl:variable name="textWithLts" select="umbraco.library:Replace($textWithBrs, '&lt;br/&gt;', '&lt;')" />
                    <xsl:variable name="className" select="class" />
                    <xsl:for-each select="umbraco.library:Split($textWithLts,'&lt;')/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(.,'&gt;')">
                                <xsl:value-of select="substring-after(current(),'&gt;')" />
                              </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(.,'&gt;')">
                              <xsl:value-of select="substring-before(current(),'&gt;')" />
                            </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) &gt; 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) &gt; 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

Please Sign in or register to post replies

Write your reply to:

Draft