customized buttons for pop-up forms?

  • Profile Image
    oseo5511
    Asked 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?

  • Profile Image
    Tasha
    Answered 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
    oseo5511
    Answered 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
    oseo5511
    Answered 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
    Tasha
    Answered 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
    oseo5511
    Answered 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
    jonathan
    Answered 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.