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

    Resize Form when embedded on webpage

    Asked by annettedusa on October 22, 2014 at 07:11 PM

    I have my form the way I want it to look but when I insert it into my website, it has about 2 inches of padding on the left and the right. I'm wondering if there is a way to trim ALL sizes, there is quite a bit of padding at the top and bottom also. I've tried to adjust it but if I make the form smaller, the fields wrap. I'd like it to look like the screen shot attached, without the padding all around. 

     

    Thank you,

    Annette

    Screenshot
    form layout form designer designer responsive designer
  • Profile Image
    JotForm Support

    Answered by Kiran on October 22, 2014 at 08:27 PM

    Could you share us the webpage URL where the form is embedded? This would help us to guide you in the right direction. 

    We will wait for your response.

     

  • Profile Image

    Answered by annettedusa on October 22, 2014 at 08:33 PM

    I was able to get some of the padding out using a padding code I found on your website but there is still too much on the right side and bottom. If you could help with those, that would be great.

    Here is the link:

    http://pdxestateservices.businesscatalyst.com/contact-us.html

     

    Annette

  • Profile Image
    JotForm Support

    Answered by Kiran on October 22, 2014 at 11:17 PM

    As I inspect the website, it seems the padding is something related to the div tag (#u1735) where the JotForm is embedded. Please try adjusting the following properties for this tag and see if the issue is resolved 

    width : 770px;

    min-height: 720px;

    margin-top: 60px;

    left: 362px;

     

    Please let us know if the issue still persists. We will be happy to look into this issue further.

    Thank you.

  • Profile Image

    Answered by annettedusa on October 23, 2014 at 04:46 PM

    Hi Kiran, thank you for your response. I'm sorry, I don't know code very well and don't know where to put this. Can you walk me through where to insert this? Right now, when I insert this form into Muse, it's saying the form is 851 x 1261. If I try to size it down, the labels where someone fills in information, stretch across the whole form. I'd really like the form to stop just to the right of the boxes so there is very little padding on the right side. There is also way more padding on the bottom than the form needs.

    Hopefully that makes sense. I just want the form to show with very little padding around the whole form.

    Thank you,

    Annette 

  • Profile Image
    JotForm Support

    Answered by jonathan on October 23, 2014 at 06:25 PM

    Hi Annette,

    I checked the jotform http://www.jotformpro.com/form/42941352141952 in your website and I can see more white space on the right side.

     

    Can you please confirm that what you wanted to do is to position the form more on right justification?

    We can probably use custom injected CSS code to achieve that.

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    We will wait for your update.

    Thanks.

     

  • Profile Image

    Answered by annettedusa on October 23, 2014 at 06:53 PM

    No, the form is currently positioned where I want it. I put the same background color in the form so it matches my webpage and. The trouble I'm having is with the right side padding and the bottom padding. I've attached a screen shot of what the form looks like when I put it in my site. It hangs over the page on the right side and moves the footer down because of the bounding box it creates. The second image shows a red box which is how large I'd like the form to be. 

    And if I pull in the handles, then the boxes that people fill in, resize to fill up the whole form and the labels go above the boxes. The form looks exactly the way I want it to look, I just need the surplus padding on the right and bottom to go away.

  • Profile Image
    JotForm Support

    Answered by jonathan on October 23, 2014 at 07:28 PM

    Hi,

    Can you please try testing this jotform http://www.jotformpro.com/form/42957308945972 instead.

    Re-embed this on your website and tell us if the result is according to what you need.

    I think I am able to understand the problem on your embedded form, but I can only do the fix on my test form for now so I need to see first how it looks when used on your actual website.

    We will wait for your response.

    Thanks.

     

  • Profile Image

    Answered by annettedusa on October 23, 2014 at 08:32 PM

    I'm not sure how to embed that?

  • Profile Image
    JotForm Support

    Answered by jonathan on October 23, 2014 at 08:43 PM

    Sorry for my lacking and not providing you detailed instructions.

    Please try this steps

    1. Clone my form first. Follow this guide http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    2. Once the form is in your form builder. Get the embed code.

    User guide http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    3. You can now embed the form to your website.

    We will wait for your update.

    Thanks.

     

     

  • Profile Image

    Answered by annettedusa on October 23, 2014 at 10:33 PM

    Maybe I'm doing something wrong. I copy the iframe code and paste it into my site. I've attached a screen shot again of your form (on the left) and mine (on the right). On your form, the labels are at the top of the fill in fields. The form is narrower but I can do that with mine also. But what I don't like is the labels at the top and the form fields longer. But as you can see, when I achieve the look in my form that I'm wanting, I get a bunch of padding on the right side. 

    It doesn't seem like this should be this hard. I took one of your predefined templates, did nothing to it and pasted it into my webpage. Here is the screenshot. See how the bounding box is so slim and the labels and fields are all on the same line? Such as email: then the person enters their email on the same line as the label - email? The form is so narrow. How come I can't have that with mine?

  • Profile Image

    Answered by annettedusa on October 23, 2014 at 11:07 PM

    I think the problem is with your new design editor. I just started with a blank form, added the fields I wanted and placed it in my design and it a perfect size. For some reason, when I brought my form into the design editor, that's when I got the superfluous padding on all sides. Maybe it was something I did, I'm not sure but I went back to the main forms designer and it works fine. Thanks for your help. I think I have spent too much time on this, as have you, so I'm moving on.

    Thanks so much for your help,

    Annette

  • Profile Image
    JotForm Support

    Answered by jonathan on October 23, 2014 at 11:25 PM

    Hi Annette,

    I understand the frustration on this, and we apologize for that.

    Yes, it seems the issue is indeed caused by a glitch in the new Form Designer

    I was able trace the problem in the Form Layout design when using the "Responsive Form" option.

     

    Unfortunately the only workaround/temporary fixed I could come up at this time is to create the form again from scratch and do not use the form designer to change any layout on the form.

    If you can try, please create a new jotform and embed it on the website. Let us see how it behaves using everything on default.

    We will assist you on further modification you need to properly position the embedded form in your website without using the designer for the meantime.

    --

    I have submitted a bug ticker report about the glitch we discovered on the Form Designer on this discussion.

    Our higher team support will update us also for any status update when available.

     

    Thanks.

     

  • Profile Image

    Answered by annettedusa on October 23, 2014 at 11:33 PM

    Yes, it works fine. Here is the link again: http://pdxestateservices.businesscatalyst.com/contact-us.html

    I started with a blank form and didn't take it into the design editor and the form is a perfect size.

    Annette

  • Profile Image
    JotForm Support

    Answered by jonathan on October 23, 2014 at 11:37 PM

    I agree. I was able to check the update you did just now.

     

    I think only the Full Address field have a different label alignment -- it is using Top.

    Maybe you want to set it to Left using its alignment property. See if that moves the label position to the left side and moves all the address input fields more to the right side.

     

    Thanks.

     

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on October 23, 2014 at 11:47 PM

    Here is my version http://www.jotformpro.com/form/42959466425972 in case you wanted to visualize a different option that you can be use.

     

     

    You can clone it using this guide http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

     

    Thanks.

     

  • Profile Image

    Answered by annettedusa on October 24, 2014 at 12:03 AM

    Hey, I like that!  Thanks so much!

    Annette