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 can I change the pagebreak background color?

    Asked by Quirky2014 on September 05, 2014 at 08:44 AM

    Behind the 'Next' button there is an ugly white strip. How can I make this transparent so that its the same colour as the form back ground. 

    Page URL:
    http://form.jotformeu.com/form/42452786296365

    Screenshot
    next colour same
  • Profile Image
    JotForm Support

    Answered by KadeJM on September 05, 2014 at 12:05 PM

    I see your problem. This is happening due to the color contrast between your form and your background so it has forced a different color into your pagebreak.

    To fix this it needs to be overridden with some injected css for the pagebreak background plus some further colormixing to get it just right.

    I will need some additional time to try to fix this problem for you and will be with you shortly as soon as I figure it out.

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 05, 2014 at 12:24 PM

    Okay, I think I've managed to fix this problem or at least it seems pretty close to matching that particular color contrasting.

    I ended up having to force the colormixing to an rgba scale to get it to work against your background.

    You are more than welcome to try to tweak it slightly more if you wish.

    CSS:

    .form-pagebreak {

    background: none repeat scroll 0% 0% rgba(219, 206, 175, 1);

     

    Result:

  • Profile Image

    Answered by Quirky2014 on September 07, 2014 at 09:55 AM

    Thank you for spending the time on this. You seem to have gotten pretty close with it. I am not sure where I can enter that CS code. 

    Also just a quick one - is there any way I can position the question next to each other rather then one below the other? As you can see in my form I need measurements for hand made garments. It would look more appealing if they where arranged in a line rather than as a long list. It does not matter if not.
  • Profile Image

    Answered by BaneD on September 07, 2014 at 03:25 PM

    Hi Quirky

    "I am not sure where I can enter that CS code."

    You can inject that CSS that was mentioned by Kade by following these steps: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    "is there any way I can position the question next to each other rather then one below the other?"

    Do you want to have them all shown in one line or to have for example 2 of the questions per row?

    I would not suggest setting them all up in one row since your visitors would need to scroll to the side and it is usually preferred to scroll down. Either way you decide should be possible to set up though :)

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 07, 2014 at 07:03 PM

    @Quirky2014

    Something seems to be missing from my colleague's code. Here I have corrected it below and added a property to remove the border line on pagebreak as well.

    .form-pagebreak{

    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0);

    border: none;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    This should be the result:

    ----

    We will answer your second question to a separate thread here https://www.jotform.com/answers/425463.

    Thanks!