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 have my page fit to the form I embed on my site?

    Asked by westmoore on January 03, 2017 at 07:49 AM

    Hi, 

     

    I am joining you from www.formstack.com which I have used up till now. 

    I find you softwaare far easier and providing a more professional result. However, is there a way I can have the webpage adapt to the length of the form so that the user dont have to scroll to fill in the form? 

     

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 03, 2017 at 08:06 AM

    Thank you for your feedback, we appreciate that.

    We can assist you in fitting your form in the website. Just please provide us with the URL.

    We'll wait for your response.

    Thank you!

  • Profile Image

    Answered by Stein Johnsen on January 04, 2017 at 04:22 AM

    Hi,

    A test version of the form can be found here

    http://www.westmoore-services.com/incorporate-test.html 

    but as you can see, each page starts with a few blank lines and the user has to scroll to see all the files and get to the Continue button.

     

    Thanks

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 04, 2017 at 05:05 AM

    Please try to copy and paste the below CSS code in your Custom CSS field:

    .form-all{

    margin-top:-50px;

    margin-bottom:-50px;

    }

    That should bring up the bottom and top of your form.

    Please let us know if that worked for you or if you had something else in mind.

    Thank you!

  • Profile Image

    Answered by westmoore on January 04, 2017 at 06:09 AM

    Hi, 

    thanks. 

    I have done that as indicated but it did not change how the form is presented on the page. 

     

  • Profile Image
    JotForm Support

    Answered by olivia on January 04, 2017 at 06:54 AM

    Hi,

    Could you please give me some time to work on your issue?

    I'll back to you as soon as possible.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by olivia on January 04, 2017 at 07:41 AM

    Hi,

    I have checked your form and it is is seen that you have embedded your form into your website with script code. My first suggestion is to use iFrame embed method because if you embed your form with script code, form codes may conflict with the codes of your own website. 

    On the other hand, according to your comment "... each page starts with a few blank lines and the user has to scroll to see all the files and get to the Continue button.",  I have made some changes on your form. (please note that I cannot change the embed method. I made below changes in your current webpage.)

    Your form will be seen like in the image below, after you change you form according to instruction below:

    The key point is height attribute in the source code of your website, not form. Please have a look at the following image:

    Please find the related div as shown in the above image and change the height as auto. If you cannot find this in the HTML source code, please search it in the CSS file, too.

    It was "height:350px;"by default (before I changed the height as auto.)

    If you still want to remove paddings in the form, you can inject below CSS into your form.

    .form-all {

        margin-top : -50px;

        margin-bottom : -50px;

    }

    .form-line {

        text-align : left;

        padding : 0;

        padding-left : 15px;

    }

    .form-html {

        padding : 0;

    }

    .form-label.form-label-left {

        width : 214px;

    }

    #label_5, #label_34, #label_63, #label_112, #label_169  {

        width : 1px;

    }

    However, these changes may not be presented in your webpage properly because of the conflict between form codes and your webpage codes as I mentioned above. The reason is embed method that you used (embedding by Script).

    If it is not your issue and you still want to change the style of your form, please embed your form with iFrame and then back to us with providing some screen shots about your requests.

    If you need any other details, please don't hesitate to contact us again.

    Thank you.

  • Profile Image

    Answered by westmoore on January 04, 2017 at 07:45 AM

    Thanks a lot!  Your support is impressive.

    Will look into the suggestions you made and get back to you if I still need your help. 

    Thanks again.