How do I change the size of the button that links to the form?

  • Profile Image
    guest_23056653975058
    Asked on November 09, 2012 at 01:09 PM

    Inserted code in html file.:

    Currently selected the embed as pop up on site option.

    <div id="tryouts">

        <button type="button">

    <a target="_blank" href="javascript:void( window.open('http://form.jotform.us/form/23057279252152', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))">Register NOW for 2013 Season</a>   

    </button>

         <br />

         Tryout Information for 2013 Season - Coming Soon

        </div> 

    How do I make the button larger? or change any of the attrributes?  can I have the button relink to my sites stylesheet?

    Thanks

  • Profile Image
    NeilVicente
    Answered on November 09, 2012 at 02:10 PM

    Hello,

    Just so you know, buttons (html button tag) are very restrictive when it comes to styling.

    My advice would be to define a CSS styling for the link (<a>) element in your form's pop-up codes.

    Try this:

    <style type="text/css">
    .myForm {
        -moz-box-shadow:inset 0px 1px 0px 0px #caefab;
        -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
        box-shadow:inset 0px 1px 0px 0px #caefab;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
        background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
        background-color:#77d42a;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #268a16;
        display:inline-block;
        color:#306108;
        font-family:arial;
        font-size:15px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:1px 1px 0px #aade7c;
    }.classname:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
        background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
        background-color:#5cb811;
    }.classname:active {
        position:relative;
        top:1px;
    }
    /* This imageless css button was generated by CSSButtonGenerator.com */
    </style>

    <a class="myForm" target="_blank" href="javascript:void( window.open('http://form.jotform.us/form/23057279252152', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))">Register NOW for 2013 Season</a>  

    Go to this site to generate more link (button) styles. Please do change the class name on the style codes generated on that site to match that of your form.

    Notice how my example has the same class name for both the CSS style and the pop-up codes (myForm).

  • Profile Image
    guest_23056653975058
    Answered on November 09, 2012 at 02:45 PM

    When I downloaded the css from jotform for my form I had a calendar.css and nova.css.  Do I put the code in one of those or do I make another css file?  

    It didn't work when I put it in my css, or either one of those css files.

    I put the

    <a class="myForm" target="_blank" href="javascript:void( window.open('http://form.jotform.us/form/23057279252152', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))">Register NOW for 2013 Season</a>  

    in the html file in the button tag..


     

  • Profile Image
    NeilVicente
    Answered on November 09, 2012 at 02:49 PM

    There is no need to download the form's CSS files. Pop-up embed will call the form as hosted on our server. All styling (for the actual form, not the pop-up link) are defined in CSS files hosted on our server.

    Just copy the codes I provided to you on my previous response and paste it on your site's source code (at http://wilmtigers.com/Index.html).

  • Profile Image
    guest_23056653975058
    Answered on November 09, 2012 at 02:57 PM

    ok.  i got it to work but the css is showing up on the top of the page...

  • Profile Image
    guest_23056653975058
    Answered on November 09, 2012 at 03:16 PM

    I got it.  Thank you for your help and the link to the button generator.