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 11x 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 4500 posts 18255 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 11x 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 11x 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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies