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

    customized buttons for pop-up forms?

    Asked by oseo5511 on September 01, 2013 at 08:25 AM

    I know I have seen this happen before, I just cannot find the thread.

     

    If I want to get a button as opposed to a text link for pop-up embed mode, is there any way i can customize it to look like my other form buttons on further pages?

    Page URL:
    http://www.jotform.com//?formID=32164325608148

    customized form buttons find
  • Profile Image
    JotForm Support

    Answered by Tasha on September 01, 2013 at 09:59 AM

    Hi,

    To accomplish this you will need to edit either the pop code that comes from jotform or the css on your web page. You might also want to review this thread that is similar to what you would like to accomplish.

    If you need more help please let us know by sending us both the url for the page that the pop up will be added and also how you would like the button to look.

    Thanks!

  • Profile Image

    Answered by oseo5511 on September 01, 2013 at 12:49 PM

    the image solution is no go, I want a CSS button.

     

    Say I have this code for my button

     

    how do i mix it properly with my popup code from jotform? also just to be perfectly clear, i will be using this and any other forms on this account via custom domain at webforms.ourdomain.com, so we will not really be able to use source code in any way. this has to be achieved somehow using the injections and i am 100% someone like idarktech knows it, cuz i remember months ago with another client project that is not longer accessible to me, he helped me and gave me the code to the button style that I wanted exctly. I have not decided on the button design yet, but i need to know if i get the code from a button generator such as the example here, how can I incorporate it with the proper jotform code for sized pop up window

  • Profile Image

    Answered by oseo5511 on September 01, 2013 at 12:55 PM

    <style type="text/css">
    .classname {
        -moz-box-shadow:inset -6px 22px 13px -10px #f29c93;
        -webkit-box-shadow:inset -6px 22px 13px -10px #f29c93;
        box-shadow:inset -6px 22px 13px -10px #f29c93;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
        background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
        background-color:#fe1a00;
        -webkit-border-top-left-radius:37px;
        -moz-border-radius-topleft:37px;
        border-top-left-radius:37px;
        -webkit-border-top-right-radius:0px;
        -moz-border-radius-topright:0px;
        border-top-right-radius:0px;
        -webkit-border-bottom-right-radius:37px;
        -moz-border-radius-bottomright:37px;
        border-bottom-right-radius:37px;
        -webkit-border-bottom-left-radius:0px;
        -moz-border-radius-bottomleft:0px;
        border-bottom-left-radius:0px;
        text-indent:0;
        border:1px solid #d83526;
        display:inline-block;
        color:#ffffff;
        font-family:Verdana;
        font-size:15px;
        font-weight:bold;
        font-style:normal;
        height:43px;
        line-height:43px;
        width:184px;
        text-decoration:none;
        text-align:center;
        text-shadow:2px 2px 0px #ff1100;
    }
    .classname:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
        background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
        background-color:#ce0100;
    }.classname:active {
        position:relative;
        top:1px;
    }</style>

  • Profile Image
    JotForm Support

    Answered by Tasha on September 01, 2013 at 02:15 PM

    All you will need to do is to add a css class to the a tag that you get from jotform to match the class in your css as shown below. You will also need to ensure that the css above is added to your webpage as well.

    <a class="classname" target="_blank" href="javascript:void( window.open('http://support.jotform.com/form/32164325608148', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))">what of LAST DITCH</a>

    Please give that a try and let us know if you have any further questions.

    Thanks!

  • Profile Image

    Answered by oseo5511 on September 01, 2013 at 02:56 PM

    That's not possible. I use a wix site and we cannot add css separately. so within one piece of code in the provided wix html widget, i have to get the whole thing to work. i am sure idarktech/eltoncris knows the solution to this, i just cannot seem to find the thread on which i had seen him respond to a very similar question for another client of ours.

     

    It's ok for the time being, i will go ahead and finalize my forms and the final button style on the form itself, then im sure someone can help me get a separate button looking just like that for a pop-up embed code.

     

    thanks

  • Profile Image
    JotForm Support

    Answered by jonathan on September 01, 2013 at 04:51 PM

    @  oseo5511

    Hi, please do update us when you have finalize everything. Hopefully by then our colleague EltonCris will be available also to do an assessment on your requirement along with us.

    Thanks.