How do we remove the white border around the form?

QUESTION 1.  Now both my forms have a white border, one only at top and bottom the other is all around.  a) how do I remove it or reduce it?

I took a look at both forms:

http://canberrabirds.org.au/about-cog/joining-cog-and-renewing/

http://canberrabirds.org.au/observing-birds/incidental-record-form/

The white space at the top and bottom is caused by the padding that is added to your form.

You can remove it by adding the following CSS code to your form:

form.jotform-form {
    padding: 0;
}

You can add it to your form by following the steps here: Inject Custom CSS Codes

The only suggestion that I would like to give is to always add the new codes at the bottom of all the other CSS code in your forms custom CSS field - unless otherwise specified.

Do let us know how it goes.

Just to add, for the other form, you would need to apply the following CSS as well:

div.form-all {
    width: 100%;
}

That will remove the white on left and right as well.

The code is not important if it goes above or under the one I have shared with you a moment ago in my previous reply.

Thanks I appreciate the css code.

BUT I am looking to understand what is going on so that I can efficiently design forms next time, and even to make it work now.  Designing a form by asking for a css code for every issue is not efficient for you or me.  The issues we've been dealing with here are ALL caused by changes at your end that I don't understand.  I've changed nothing and both forms behaved differently recently.

My point was the the white background is NEW, it appeared when I tried to fix changes in layout that occurred recently, I think when Form Designer was introduced.  This changed widths so that margins or padding disappeared and fields dropped over to the next line.  

I asked for help to fix this and in the process used Form Designer for the first time.  As a result an UNRELATED white border appeared at top bottom and side.  This 'border' was not there before.  You have given me patches to fix it but I don't know why it first appeared, how to design a form with it next time, and how to fix the border that still remains at the bottom of the form.

The white 'background' was not there before.  The white area that still remains at the bottom is I think related to the fact I have to embed using iframe to get it to work in my Wordpress site.

How does Form Designer cause this white border to appear and how do I control it in the first place (without using specific patch css code)?  Maybe the border always existed, but it was transparent.  How can I make the background transparent instead of white? Or how else can I remove the white patch at the bottom?

 

 

UPDATE - I've worked out how to remove the border that solves most of this. (Make background transparent in Designer).  No need to respond to above.  Thanks.

I am glad to hear that you were able to find a way to resolve the issue by yourself.

Even though you have mentioned that there is no need to reply to the above, I want to mention that Form Designer adds extra padding at the top and bottom of the form so that it looks nicer on the website and this space changes as your form changes (different padding for different devices), but the code that I have given above, cancels this for you.

Next to this there are also other CSS styles applied to your theme as soon as you open the form in the Form Designer, however, if you want to restore your old layout, it is easy to do by following the steps here: How to View Form Revision History

Do let us know if you have any further issues or questions and we would be happy to assist with the same.

Thanks for that, and yes, what we needed is for Jotform to state clearly when it introduced Designer exactly what Designer does and how it would change existing forms (as well as how to use it).  If that was done, I didn't see it.  Jotform seems to introduce changes that have wide effect without adequate notification to existing users.

I never understood what Designer actually was supposed to do.  Now I understand that it is not for designing forms (layout, boxes, what the form does), but 'theme-ing' them really.  You still need Builder.

If I'd seen an introduction that said just the below it would have saved me many hours of confusion and work:

"DESIGNER allows you to change the appearance of existing forms easily. Forms still need to be created in FOrm Builder. WARNING - when you use Designer on an existing form it will automatically add effects and changes to your forms that will change how your form looks and in some cases change layout undesirably. Font, spacing, padding and background changes will affect horizontal layout. Sometimes forms will no longer fit horizontally, or be truncated or run over to the next line. The main changes added by Designer are: a) a background is added; b) fonts and line spacing are altered. c) padding is changed ...etc.   DESIGNER works by adding CSS styles to your form.  You can examine these added styles by looking here ... A list of styles use is here ... and you can remove these changes if necessary as follows . . ."

This info should have been sent to every user in big letters and posted as an unmissable part of the help system.  It should also have been sent to every user who was having trouble with existing forms changing.

Anyway I like the look of forms better now, so a good change overall.

Cheers

In final answer to the original question, one way to remove the border is to make the background transparent.  It is actually the background that makes the border.  Designer / color scheme / background / move the transparency slider to the left.

Hello Aaardvaark,

Thank you for sharing your workaround and I am glad to know that your issue is resolved.

Your understanding is correct. Form designer will help you style the form but you still need the form builder.

Thank you!