Copied to clipboard

Flag this post as spam?

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


  • René Andersen 238 posts 684 karma points
    Mar 24, 2015 @ 14:36
    René Andersen
    0

    Umbraco 7 Forms custom css and div tags

    Hi

    How is it possible to achieve this with Umbraco Forms (wrap a div and a class around every input field):

    <form role="form">
    <div class="form-group">
    <input type="text" class="form-control" id="name" placeholder="Navn">
    </div>
    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email">
    </div>
    <div class="form-group">
    <textarea class="form-control" rows="3" id="message" placeholder="Besked"></textarea>
    </div>
    <button type="submit" class="btn btn-lg btn-theme-primary">Send besked</button>
    </form>

    // René

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Mar 24, 2015 @ 14:39
    Dennis Aaen
    1

    Hi René

    With Umbraco Forms, you have the full control over the markup that renders with Forms, but in Umbraco Forms, it would be the same markup for each form, but try to see this documentation.

    https://our.umbraco.org/documentation/Products/UmbracoForms/Developer/Custom-Markup/

    Hope this helps,

    /Dennis

  • René Andersen 238 posts 684 karma points
    Mar 24, 2015 @ 15:26
    René Andersen
    0

    Hi Dennis

    That helped me a lot but I just think that my output is a little messy. I have tried to remove some og the <divs> but I was not able to remove all of them.

    Is the output amount below what to expect when using Umbraco forms?

    <div id="contour_form_Profilform" class="contour profilform">
    <form action="/produkter/profilbeklaedning/" enctype="multipart/form-data" method="post">
    <input data-val="true" data-val-required="The FormId field is required." id="FormId" name="FormId" type="hidden" value="8fb55e63-2bac-416a-97ea-1b120d6e6c81" />
    <input id="FormName" name="FormName" type="hidden" value="Profil form" />
    <input data-val="true" data-val-number="The field RecordId must be a number." data-val-required="The RecordId field is required." id="RecordId" name="RecordId" type="hidden" value="0" />
    <input id="PreviousClicked" name="PreviousClicked" type="hidden" value="" />
    <input type="hidden" name="FormStep" value="0" />
    <div class="contourPage">
    <h4 class="contourPageName">Kontakt os</h4>
    <fieldset class="contourFieldSet">
    <div class="row-fluid">
    <div class="span12 col-md-12">
    <div class="form-group">
    <label for="f6718dda-0e45-48f9-bf8f-ecfe8a500a9e" class="fieldLabel">
    Navn <span class="contourIndicator">*</span>
    </label>
    <div>
    <input type="text" name="f6718dda-0e45-48f9-bf8f-ecfe8a500a9e" id="f6718dda-0e45-48f9-bf8f-ecfe8a500a9e" class="form-control" value="" maxlength="500" data-val="true" data-val-required="Udfyld venligst dit navn" />
    <span class="field-validation-valid" data-valmsg-for="f6718dda-0e45-48f9-bf8f-ecfe8a500a9e" data-valmsg-replace="true"></span>
    </div>
    </div>
    <div class="form-group">
    <label for="c9204231-7756-4e10-cb50-60870fb4bb73" class="fieldLabel">
    Email <span class="contourIndicator">*</span>
    </label>
    <div>
    <input type="text" name="c9204231-7756-4e10-cb50-60870fb4bb73" id="c9204231-7756-4e10-cb50-60870fb4bb73" class="form-control" value="" maxlength="500" data-val="true" data-val-required="Udfyld venligstn din email adresse" />
    <span class="field-validation-valid" data-valmsg-for="c9204231-7756-4e10-cb50-60870fb4bb73" data-valmsg-replace="true"></span>
    </div>
    </div>
    <div class="form-group">
    <label for="d69e4ea5-4957-4b27-f572-cae872e2dc75" class="fieldLabel">
    Besked <span class="contourIndicator">*</span>
    </label>
    <div>
    <textarea name="d69e4ea5-4957-4b27-f572-cae872e2dc75" id="d69e4ea5-4957-4b27-f572-cae872e2dc75" rows="2" cols="20" class="form-control" data-val="true" data-val-required="Indtast venligst en besked"></textarea>
    <span class="field-validation-valid" data-valmsg-for="d69e4ea5-4957-4b27-f572-cae872e2dc75" data-valmsg-replace="true"></span>
    </div>
    </div>
    </div>
    </div>
    </fieldset>
    <div style="display: none">
    <input type="text" name="8fb55e632bac416a97ea1b120d6e6c81" />
    </div>
    <div class="contourNavigation row-fluid">
    <div class="col-md-12">
    <input type="submit" class="btn primary" value="Submit" name="submit" />
    </div>
    </div>
    </div>
    <input name='ufprt' type='hidden' value='94E76FFBA6B5C0E135EC13DC0BF7A8417B8E12CAA18726D7C9E08DE793AE8F2614985472A1FB22435B8F75A2EF4AC10733A4309AE3E20516313A2EC2BAD24DF7D765B1073513E6047C6C8C3306EB2AC9499B97A2C7AC27211B32678D6F956ABA7ED0E4B1573E2D13AC5540B4EF29B353B90254CFC4514868BB03A880199C9544C6AFF75975067180E719F0B51AF6AC16' />
    </form>
    </div>

    // René

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Mar 24, 2015 @ 15:35
    Dennis Aaen
    0

    Hi René

    I think that you can keep the file, as it is by default, and the add the divs and stuff to this. When I get home, I would try to make an example that you can use.

    @using Umbraco.Forms.Core
    @using Umbraco.Forms.Mvc.Models
    @using Umbraco.Forms.Mvc.BusinessLogic
    @using Umbraco.Forms.MVC.Extensions
    @using Umbraco.Web
    @using ClientDependency.Core.Mvc;

    @model Umbraco.Forms.Mvc.Models.FormViewModel
    @{
        Html.EnableClientValidation(true);
        Html.EnableUnobtrusiveJavaScript(true);
    }



    @if (Model.SubmitHandled)
    {
        if (Model.RenderMode == "full" || Model.RenderMode == "form")
        {
            <p class="contourMessageOnSubmit">@Html.Raw(Model.MessageOnSubmit)</p>
        }
    }
    else
    {
        if (Model.RenderMode == "full" || Model.RenderMode == "form")
        {

             <div id="contour_form_@{@Model.FormName.Replace(" ", "")}" class="contour @Model.CssClass">

                 @using (Html.BeginUmbracoForm<Umbraco.Forms.Web.Controllers.UmbracoFormsController>("HandleForm"))
                 {
                     @Html.HiddenFor(x => Model.FormId)
                     @Html.HiddenFor(x => Model.FormName)
                     @Html.HiddenFor(x => Model.RecordId)
                     @Html.HiddenFor(x => Model.PreviousClicked)

                     <input type="hidden" name="FormStep" value="@Model.FormStep" />

                     <div class="contourPage">

                         @if (string.IsNullOrEmpty(Model.CurrentPage.Caption) == false)
                         {
                             <h4 class="contourPageName">@Html.Raw(Model.CurrentPage.Caption)</h4>
                         }

                         @if (Model.ShowValidationSummary)
                         {
                             @Html.ValidationSummary(false)
                         }

                         @foreach (FieldsetViewModel fs in Model.CurrentPage.Fieldsets)
                         {
                             <fieldset class="contourFieldSet">
                                 @if (string.IsNullOrEmpty(fs.Caption) == false)
                                 {
                                     <legend>@Html.Raw(fs.Caption)</legend>
                                 }

                                 <div class="row-fluid">
                                     @foreach (var c in fs.Containers)
                                     {

                                         <div class="@("span" + c.Width) @("col-md-" + c.Width)">
                                             @foreach (FieldViewModel f in c.Fields)
                                             {
                                                 bool hidden = f.HasCondition && f.ConditionActionType == FieldConditionActionType.Show;

                                                 <div class="@f.CssClass" @{
                                                                              if (hidden)
                                                                              {
                                                                                  <text> style="display: none"</text>
                                                                              }
                                                                          }>

                                                     @if (!f.HideLabel)
                                                     {
                                                         <label for="@f.Id" class="fieldLabel">@Html.Raw(f.Caption) @if (f.ShowIndicator)
                                                                                                                    {
                                                                                                                        <span class="contourIndicator">@Model.Indicator</span>
                                                                                                                    }</label>
                                                     }
                                                     @if (!string.IsNullOrEmpty(f.ToolTip))
                                                     {
                                                         <span class="help-block">@f.ToolTip</span>
                                                     }

                                                     <div>
                                                         @Html.Partial(FieldViewResolver.GetFieldView(Model.FormId.ToString(), f.FieldTypeName, f.Caption), f)
                                                         @if (Model.ShowFieldValidaton)
                                                         {
                                                             @Html.ValidationMessage(f.Id)
                                                         }
                                                     </div>
                                                 </div>

                                             }

                                         </div>

                                     } 
                                 </div>

                             </fieldset>
                         }

                         <div style="display: none">
                             <input type="text" name="@Model.FormId.ToString().Replace("-", "")" />
                         </div>


                         <div class="contourNavigation row-fluid">
                             <div class="col-md-12">
                                 @if (Model.IsMultiPage)
                                 {
                                     if (!Model.IsFirstPage)
                                     {
                                         <input class="btn prev cancel" type="submit" value="@Model.PreviousCaption" name="__prev"/>
                                     }
                                     if (!Model.IsLastPage)
                                     {
                                         <input type="submit" class="btn next" value="@Model.NextCaption" name="next"/>
                                     }
                                     if (Model.IsLastPage)
                                     {
                                         <input type="submit" class="btn primary" value="@Model.SubmitCaption" name="submit"/>
                                     }
                                 }
                                 else
                                 {
                                     <input type="submit" class="btn primary" value="@Model.SubmitCaption" name="submit"/>
                                 }
                             </div>
                         </div>

                     </div>
                 }
             </div>

        }

        if (Model.RenderMode == "full" || Model.RenderMode == "script")
        {
            @Html.Partial(FormViewResolver.GetScriptView(Model.FormId), Model)

            foreach (var script in Model.CurrentPage.JavascriptFiles)
            {
                if (Model.UseClientDependency)
                {
                    Html.RequiresJs(script.Value);
                }
                else
                {
                    <script type="text/javascript" src="@Url.Content(script.Value)"></script>
                }
            }

            if (Model.CurrentPage.JavascriptCommands.Count > 0)
            {

                <script type="text/javascript">
                    @foreach (var cmd in Model.CurrentPage.JavascriptCommands)
                    {
                        <text>@Html.Raw(cmd)</text>
                    }

                </script>
            }

            foreach (var css in Model.CurrentPage.CssFiles)
            {
                if (Model.UseClientDependency)
                {
                    Html.RequiresCss(css.Value);
                }
                else
                {
                    <link rel="stylesheet" href="@Url.Content(css.Value)" />
                }
            }

        }
    }

    /Dennis

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Mar 24, 2015 @ 19:01
    Dennis Aaen
    100

    Hi René,

    With this code you will get a div with the class="form-group" around every input field. For adding the class="form-control" to each field type go to this \Views\Partials\Forms\Fieldtypes folder in your Umbraco installation, and add the class to each field type.

    @using Umbraco.Forms.Core
    @using Umbraco.Forms.Mvc.Models
    @using Umbraco.Forms.Mvc.BusinessLogic
    @using Umbraco.Forms.MVC.Extensions
    @using Umbraco.Web
    @using ClientDependency.Core.Mvc;

    @model Umbraco.Forms.Mvc.Models.FormViewModel
    @{
        Html.EnableClientValidation(true);
        Html.EnableUnobtrusiveJavaScript(true);
    }

    @if (Model.SubmitHandled)
    {
        if (Model.RenderMode == "full" || Model.RenderMode == "form")
        {
            <p class="contourMessageOnSubmit">@Html.Raw(Model.MessageOnSubmit)</p>
        }
    }
    else
    {
        if (Model.RenderMode == "full" || Model.RenderMode == "form")
        {

             <div id="contour_form_@{@Model.FormName.Replace(" ", "")}" class="contour @Model.CssClass">

                 @using (Html.BeginUmbracoForm<Umbraco.Forms.Web.Controllers.UmbracoFormsController>("HandleForm"))
                 {
                     @Html.HiddenFor(x => Model.FormId)
                     @Html.HiddenFor(x => Model.FormName)
                     @Html.HiddenFor(x => Model.RecordId)
                     @Html.HiddenFor(x => Model.PreviousClicked)

                     <input type="hidden" name="FormStep" value="@Model.FormStep" />

                     <div class="contourPage">
                   
                         @if (string.IsNullOrEmpty(Model.CurrentPage.Caption) == false)
                         {
                             <h4 class="contourPageName">@Html.Raw(Model.CurrentPage.Caption)</h4>
                         }
                   
                         @if (Model.ShowValidationSummary)
                         {
                             @Html.ValidationSummary(false)
                         }

                         @foreach (FieldsetViewModel fs in Model.CurrentPage.Fieldsets)
                         {
                             <fieldset class="contourFieldSet">
                                 @if (string.IsNullOrEmpty(fs.Caption) == false)
                                 {
                                     <legend>@Html.Raw(fs.Caption)</legend>
                                 }

                                 <div class="row-fluid">
                                     @foreach (var c in fs.Containers)
                                     {

                                         <div class="@("span" + c.Width) @("col-md-" + c.Width)">
                                             @foreach (FieldViewModel f in c.Fields)
                                             {
                                                 bool hidden = f.HasCondition && f.ConditionActionType == FieldConditionActionType.Show;

                                                 <div class="@f.CssClass" @{
                                                                              if (hidden)
                                                                              {
                                                                                  <text> style="display: none"</text>
                                                                              }
                                                                          }>
                                                 
                                                     @if (!f.HideLabel)
                                                     {
                                                         <label for="@f.Id" class="fieldLabel">@Html.Raw(f.Caption) @if (f.ShowIndicator)
                                                                                                                    {
                                                                                                                        <span class="contourIndicator">@Model.Indicator</span>
                                                                                                                    }</label>
                                                     }
                                                     @if (!string.IsNullOrEmpty(f.ToolTip))
                                                     {
                                                         <span class="help-block">@f.ToolTip</span>
                                                     }
                                                   
                                                    <div class="form-group">
                                                         @Html.Partial(FieldViewResolver.GetFieldView(Model.FormId.ToString(), f.FieldTypeName, f.Caption), f)
                                                     </div>
                                                         @if (Model.ShowFieldValidaton)
                                                         {
                                                             @Html.ValidationMessage(f.Id)
                                                         }
                                                  
                                                 </div>

                                             }

                                         </div>

                                     } 
                                 </div>

                             </fieldset>
                         }

                         <div style="display: none">
                             <input type="text" name="@Model.FormId.ToString().Replace("-", "")" />
                         </div>


                         <div class="contourNavigation row-fluid">
                             <div class="col-md-12">
                                 @if (Model.IsMultiPage)
                                 {
                                     if (!Model.IsFirstPage)
                                     {
                                         <input class="btn prev cancel" type="submit" value="@Model.PreviousCaption" name="__prev"/>
                                     }
                                     if (!Model.IsLastPage)
                                     {
                                         <input type="submit" class="btn next" value="@Model.NextCaption" name="next"/>
                                     }
                                     if (Model.IsLastPage)
                                     {
                                         <input type="submit" class="btn primary" value="@Model.SubmitCaption" name="submit"/>
                                     }
                                 }
                                 else
                                 {
                                     <input type="submit" class="btn btn-lg btn-theme-primary" value="@Model.SubmitCaption" name="submit"/>
                                 }
                             </div>
                         </div>

                     </div>
                 }
             </div>

        }

        if (Model.RenderMode == "full" || Model.RenderMode == "script")
        {
            @Html.Partial(FormViewResolver.GetScriptView(Model.FormId), Model)

            foreach (var script in Model.CurrentPage.JavascriptFiles)
            {
                if (Model.UseClientDependency)
                {
                    Html.RequiresJs(script.Value);
                }
                else
                {
                    <script type="text/javascript" src="@Url.Content(script.Value)"></script>
                }
            }

            if (Model.CurrentPage.JavascriptCommands.Count > 0)
            {

                <script type="text/javascript">
                    @foreach (var cmd in Model.CurrentPage.JavascriptCommands)
                    {
                        <text>@Html.Raw(cmd)</text>
                    }
           
                </script>
            }

            foreach (var css in Model.CurrentPage.CssFiles)
            {
                if (Model.UseClientDependency)
                {
                    Html.RequiresCss(css.Value);
                }
                else
                {
                    <link rel="stylesheet" href="@Url.Content(css.Value)" />
                }
            }

        }
    }

    Hope this helps,

    /Dennis

  • René Andersen 238 posts 684 karma points
    Mar 24, 2015 @ 21:03
    René Andersen
    0

    Hi Dennis

    Great that was what I needed. Thanks!

    // René

  • René Andersen 238 posts 684 karma points
    Mar 24, 2015 @ 22:19
    René Andersen
    0

    Hi Dennis

    Are all the extra <div> tags and <fieldset> that comes with the Umbraco Form really necessary?

    It would be great if the form was almost as clean as the code in my first post.

    I have tried to remove the extra <div> tags and <fieldset> but that gives me some errors.

    See the <div> tags and fieldset below:

    <div class="contourPage">

    <div class="row-fluid">

    <fieldset class="contourFieldSet">

    <div class="@("span" + c.Width) @("col-md-" + c.Width)">

    <div id="contour_form_@{@Model.FormName.Replace(" ", "")}" class="contour @Model.CssClass">

    // René

     

  • René Andersen 238 posts 684 karma points
    Mar 24, 2015 @ 23:23
    René Andersen
    1

    Hi Dennis

    I managed to make it a bit more clean:

    @using Umbraco.Forms.Core
    @using Umbraco.Forms.Mvc.Models
    @using Umbraco.Forms.Mvc.BusinessLogic
    @using Umbraco.Forms.MVC.Extensions
    @using Umbraco.Web
    @using ClientDependency.Core.Mvc;

    @model Umbraco.Forms.Mvc.Models.FormViewModel
    @{
    Html.EnableClientValidation(true);
    Html.EnableUnobtrusiveJavaScript(true);
    }

    @if (Model.SubmitHandled)
    {
    if (Model.RenderMode == "full" || Model.RenderMode == "form")
    {
    <p class="contourMessageOnSubmit">@Html.Raw(Model.MessageOnSubmit)</p>
    }
    }
    else
    {
    if (Model.RenderMode == "full" || Model.RenderMode == "form")
    {
    using (Html.BeginUmbracoForm<Umbraco.Forms.Web.Controllers.UmbracoFormsController>("HandleForm"))
    {
    @Html.HiddenFor(x => Model.FormId)
    @Html.HiddenFor(x => Model.FormName)
    @Html.HiddenFor(x => Model.RecordId)
    @Html.HiddenFor(x => Model.PreviousClicked)

    <input type="hidden" name="FormStep" value="@Model.FormStep" />

    <div class="contourPage">
    @if (string.IsNullOrEmpty(Model.CurrentPage.Caption) == false)
    {
    <h4 class="contourPageName">@Html.Raw(Model.CurrentPage.Caption)</h4>
    }

    @if (Model.ShowValidationSummary)
    {
    @Html.ValidationSummary(false)
    }

    @foreach (FieldsetViewModel fs in Model.CurrentPage.Fieldsets)
    {
    <fieldset class="contourFieldSet">
    @if (string.IsNullOrEmpty(fs.Caption) == false)
    {
    <legend>@Html.Raw(fs.Caption)</legend>
    }

    @foreach (var c in fs.Containers)
    {
    foreach (FieldViewModel f in c.Fields)
    {
    bool hidden = f.HasCondition && f.ConditionActionType == FieldConditionActionType.Show;

    <div class="form-group" @{ if (hidden) { <text> style="display: none" </text> } }>

    @if (!f.HideLabel)
    {
    <label for="@f.Id" class="fieldLabel">
    @if (f.ShowIndicator)
    {
    <span class="contourIndicator">@Model.Indicator</span>
    }
    </label>
    }
    <div>
    @Html.Partial(FieldViewResolver.GetFieldView(Model.FormId.ToString(), f.FieldTypeName, f.Caption), f)
    @if (Model.ShowFieldValidaton)
    {
    <p class="redtext">@Html.ValidationMessage(f.Id)</p>
    }
    </div>
    </div>
    }
    }
    </fieldset>
    }
    <div style="display: none">
    <input type="text" name="@Model.FormId.ToString().Replace("-", "")" />
    </div>
    <input type="submit" class="btn btn-lg btn-theme-primary" value="@Model.SubmitCaption" name="submit" />
    </div>
    }
    }

    if (Model.RenderMode == "full" || Model.RenderMode == "script")
    {
    @Html.Partial(FormViewResolver.GetScriptView(Model.FormId), Model)

    foreach (var script in Model.CurrentPage.JavascriptFiles)
    {
    if (Model.UseClientDependency)
    {
    Html.RequiresJs(script.Value);
    }
    else
    {
    <script type="text/javascript" src="@Url.Content(script.Value)"></script>
    }
    }
    if (Model.CurrentPage.JavascriptCommands.Count > 0)
    {
    <script type="text/javascript">
    @foreach (var cmd in Model.CurrentPage.JavascriptCommands)
    {
    <text>@Html.Raw(cmd)</text>
    }
    </script>
    }

    foreach (var css in Model.CurrentPage.CssFiles)
    {
    if (Model.UseClientDependency)
    {
    Html.RequiresCss(css.Value);
    }
    else
    {
    <link rel="stylesheet" href="@Url.Content(css.Value)" />
    }
    }

    }
    }

    // René

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Mar 24, 2015 @ 23:59
    Dennis Aaen
    0

    Hi René

    That is great to hear. Happy that I could help you solve the question about how to customize the markup for the Umbraco Forms

    Happy Umbraco coding :)

    /Dennis

  • Martin 114 posts 313 karma points
    May 16, 2015 @ 13:28
    Martin
    0

    I would like to suggest a different approach to custom css markup and styling. You could just create css styles using the form name you specify within Forms. In my example below, my form is named H_Form and I can apply whatever styling to my form without having to make any changes to the default razor view.

    /Martin

    .H_Form form {
        padding-bottom: 30px;
        margin-bottom: 30px;
        background-color: #F2F2F2;
        border-radius: 25px;
    } 
    
    .H_Form h2 {
        font-weight: normal;
        color: #551A8B;
        margin: 0px;
        padding-top: 20px;
    } 
    
    
    .contourMessageOnSubmit {
        color: #551A8B;
        font-weight: bold;
        font-size: 16px;
        padding: 5px 70px 25px;
        background-color: #F2F2F2;
        border-radius: 25px;
        }
    
    .contourMessageOnSubmit:before {
        position: relative; 
        top:12px;
        right:-0px;
        padding-right: 20px;
        }
    
    
    .H_Form input[type=text], textarea, select {
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out;
      outline: none;
      padding: 3px 0px 3px 3px;
      margin: 5px 1px 3px 0px;
      border: 1px solid #DDDDDD;
    
    }
    
    .H_Form input[type=text]:focus, textarea:focus, select:focus {
      box-shadow: 0 0 5px rgba(81, 203, 238, 1);
      padding: 3px 0px 3px 3px;
      margin: 5px 1px 3px 0px;
      border: 1px solid rgba(81, 203, 238, 1);
    }
    
    
    
    .H_Form label {
        display: block;
        font-weight: normal;
        padding-top: 15px;
    }
    
    .H_Form label + span:first-of-type {
        font-size: 90%;
        color: grey;
    }
    
    
    .H_Form fieldset {
        display: block;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 2em;
        padding-top: 0.35em;
        padding-bottom: 1em;
        padding-left: 2em;
        padding-right: 2em;
        border: 0px;
    //  background-color: ##F2F2F2;
    //  border-radius: 25px;
    
    } 
    
    .H_Form input {
        min-width: 300px;
        border-radius: 6px;
    
    } 
    
    .H_Form textarea {
        min-width: 100%;
        border-radius: 6px;
        min-height: 100px;
    } 
    
    .H_Form select {
        min-width: 150px;
        border-radius: 6px 0px 0px 6px;
    } 
    
    .H_Form #recaptcha_response_field {
        min-width: 50px;    
        }
    
    .H_Form .primary {
    
        background: #25A6E1;
        background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
        background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
        background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
        background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
        background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
        padding:8px 13px;
        color:#fff;
        font-family:'Helvetica Neue',sans-serif;
        font-size:17px;
        border-radius:4px;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border:1px solid #1A87B9;
        min-width: 50px;
        margin-left: 2em;
        cursor: pointer;
    
        }
    
    .H_Form .primary:hover {    
        background: #3EB1E6;
        }
    
Please Sign in or register to post replies

Write your reply to:

Draft