Copied to clipboard

Flag this post as spam?

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


  • John Hodgkinson 613 posts 355 karma points
    Apr 25, 2014 @ 19:25
    John Hodgkinson
    0

    Modify Form Template to use custom styles ???

    I would like to modify the form style elements to use something like the rendered html below on all the forms. How can I go about doing that? Many thanks in advance!

        <form action="/form-test.aspx" class="generic-form elements-row" enctype="multipart/form-data" method="post">       
        <ul class="elements-horizontal">
    
            <li class="row">
                <div class="form-element">
                    <label for="FirstName">First Name</label>
                    <input data-val="true" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" type="text" value="" />
                    <span class="field-validation-valid error" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>   
                </div>
            </li>
    
            <li class="row">
                <div class="form-element">                  
                    <label for="LastName">Last Name</label>
                    <input data-val="true" data-val-required="The LastName field is required." id="LastName" name="LastName" type="text" value="" />
                    <span class="field-validation-valid error" data-valmsg-for="LastName" data-valmsg-replace="true"></span>    
                </div>
            </li>
    
            <li class="row">
                <div class="form-element">    
                    <label for="Age">Age</label>
                    <input data-val="true" data-val-number="The field Age must be a number." data-val-range="Age must be between 1 and 99" data-val-range-max="99" data-val-range-min="1" data-val-required="Age is required" id="Age" name="Age" type="text" value="" />
                    <span class="field-validation-valid error" data-valmsg-for="Age" data-valmsg-replace="true"></span> 
                </div>
            </li>
    
    
            <li class="row">
                <div class="form-element">
                    <label for="City">City</label>
                    <input id="City" name="City" type="text" value="" />
                    <span class="field-validation-valid error" data-valmsg-for="City" data-valmsg-replace="true"></span>    
                </div>
            </li>
    
    
            <li class="row">
                <div class="form-element">
                    <button type="submit" name="submit">Submit<span class="ss-check"></span></button>
                    <button type="reset" name="reset">Reset<span class="ss-check"></span></button>
                </div>
            </li>
    
        </ul>   
    
    </form>  
    
  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Apr 25, 2014 @ 21:57
    Jan Skovgaard
    1

    Hi John

    I assume you're using Contour 3?

    You can read about customizing the the views here - http://our.umbraco.org/projects/umbraco-pro/contour/documentation/Developer/Custom-Markup/

    But be ware that the changes you make will apply to all forms you're creating. And if you at some point need to upgrade Contour you need to keep a backup of your modified file so it's not lost if you do an upgrade.

    /Jan

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Apr 25, 2014 @ 23:04
    Dennis Aaen
    1

    Hi John,

    I would like to make an addition to Jan´s fantastic post.

    You don´t need to make changes to all forms you're creating, You can customizing a specific form, if you only need to that. You can find the information about this here: http://our.umbraco.org/projects/umbraco-pro/contour/documentation/Developer/Custom-Markup/#Customizingforaspecificform

    And here is a video where Tim Geyssens shows how you can customize your forms or a specific form: http://umbraco.com/follow-us/blog-archive/2012/11/8/contour-30-features-full-control-over-form-markup.aspx

    That´s was just my inputs,

    /Dennis

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Apr 25, 2014 @ 23:18
    Jan Skovgaard
    0

    Wow, had not seen that part in the documentation about modifying specific forms. Good catch Dennis.

    But it does not seem it's very generic if you need to have 2 or more forms setup the same way and the rest should just be default. Then you would need to do some copy paste work with the 3 that are different than the "default". Not neccesarily a big issue - just something to be aware of.

    /Jan

  • John Hodgkinson 613 posts 355 karma points
    May 01, 2014 @ 14:52
    John Hodgkinson
    0

    thx Guys! I really appreciate the feedback and assistance and also apologize for the delay in responding. I have a few projects I'm juggling at the moment but hope to switch gears and starting working on the tweaks/customizations in the next week or so.

    Again, thank you for your help. It is very much appreciated!

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    May 01, 2014 @ 15:05
    Jan Skovgaard
    0

    Hi John

    No need to appoligize - We're just happy we could help :)

    /Jan

Please Sign in or register to post replies

Write your reply to:

Draft