What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by guest_23056653975058 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

    Page URL:
    http://wilmtigers.com/Index.html

  • Profile Image
    JotForm Support

    Answered by NeilVicente 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

    Answered by guest_23056653975058 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
    JotForm Support

    Answered by NeilVicente 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

    Answered by guest_23056653975058 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

    Answered by guest_23056653975058 on November 09, 2012 at 03:16 PM

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