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

    Customizing "Back" & "next" button - problem

    Asked by switchedonaustralia on June 27, 2013 at 11:46 PM

    Hi, 

     

    I'm trying to use custom images for the "next" & "back" buttons on my form, and it's almost 100% perfect, except for one issue. All the button styles to choose from apply CSS which has a border that try as I might, I haven't been able to over-rule.

     

    Ussing injected CSS I've managed to over-rule most aspects of the default CSS, but the border just doesn't seem to want to co-operate - any ideas?

     

    The link will take you to a page that uses the form - click the "apply now" button to see it. I've minimsed the impact as best I can by using the "simply white" button style, but there is still a grey border showing up around my custom images. 

    Page URL:
    http://switchedonaustralia.com/residential/hometalk/basic.php

    problem next style Injected CSS
  • Profile Image

    Answered by switchedonaustralia on June 27, 2013 at 11:48 PM

    Just thought then - would probably help if I gave you the CSS I'm using too - here it is:

    .form-image

    {

    text-align: center;

    background:url("http://switchedonaustralia.com/html/images/text_bar.png");

    border: 1px solid #eee;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    v-align: center;

    }

     

    .form-pagebreak

    {

    text-align: center;

    background:url("http://switchedonaustralia.com/html/images/text_bar.png");

    border: 1px solid #eee;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    v-align: center;

    }

     

    .form-textbox

    {

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    }

     

    .form-dropdown

    {

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    }

     

    .form-header-group

    {

    background:url("http://switchedonaustralia.com/html/images/text_bar.png");

    text-size:18px;

    border: 1px solid #eee;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    text-align: center;

    }

     

    .form-pagebreak-next

    {

    display:block;

    text-size:12px;

    float:right;

    margin-left: 250px;

    background:url("http://switchedonaustralia.com/images/button-next.png") no-repeat  !important;

    width:155px !important;

    height:61px !important;

    }

     

    .form-pagebreak-back

    {

    display:block;

    text-size:12px;

    float:left;

    margin-left:20px;

    background:url("http://switchedonaustralia.com/images/button-back.png") no-repeat  !important;

    width:155px !important;

    height:61px !important;

    }

     

    .form-submit-button-simple_white

    {

    text-indent:-99999px !important;

    border:0px #fff none !important;

    }

  • Profile Image

    Answered by sidharth_kch on June 28, 2013 at 03:37 AM

    @switchedonaustralia

    Do you want to remove the borders from your next and back buttons?

    You should add this css in your page break css (.form-pagebreak-back / .form-pagebreak-next):

    box-shadow: none !important;

    border: none !important;

    Let us know if this helps your.

    Thanks,

    Sidharth

  • Profile Image

    Answered by switchedonaustralia on July 03, 2013 at 07:05 PM

    Wonderful - thank you. Worked a treat.

     

    Looking at it - I should have realised the box-shadow was to blame.