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 to get rid of background outside of border of my form?

    Asked by learnerp on June 18, 2013 at 06:10 PM

    I am using the Pastel theme and I've added css to add a border with rounded corners but there is still color bleeding past the border on both sides of the form.  Please let me know how to fix.  Please see the picture attached for exactly what i'm talking about.

    Thank you in advance for your help!  You guys are great!

    Screenshot
    pastel theme picture add a border attached
  • Profile Image

    Answered by EliezerN on June 18, 2013 at 07:55 PM

    Hello,

    First set the background color of your form to transaparent. Please check this guide for more detailed steps: Making the Form Background Transparent.

    After that insert the next code (You have already insert a css code to .form-all So just add the properties that are missing):

    .form-all 

    {

    background-color:#CFCCC8;

    border: 1px solid #000;

    -webkit-border-radius: 10px;

    width:520px;

    padding:10px;

    }

    This will change the background color that is out of the border and will keep the color of the theme.

    I cloned your form and did the changes, you can also clone mine and check it: http://www.jotform.com/form/31686675353969

    I hope this helps. If you need further assistance, please let us know.

    Thanks!

  • Profile Image

    Answered by learnerp on June 18, 2013 at 08:19 PM

    Thank you for your response.  There is still one problem though I hope you can help me with.  I want to extend the heading so there is not a bunch of extra space above it and to the side of it. 

    Please see this screenshot for exactly what I'm talking about...  http://screencast.com/t/6KPqqu7RJj

  • Profile Image

    Answered by EliezerN on June 18, 2013 at 11:03 PM

    To fix this just remove the next from the code I gave you before:

    width:520px;

    padding:10px;

    Here is my form, please take a look, I think it'll work fine now: http://www.jotform.com/form/31686675353969

    If you need further assistance, don't hesitate to contact us.

    Thanks!