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

    Separating line between image and form fields

    Asked by OpWarm on July 14, 2017 at 11:30 AM

    Hello, 

     

    I've created a form that has an image offset to the left of my form. I'm trying to inset a divider to visually separate the image from the fields. I know that Jotform is not supposed to be in a two column format, so I'm not sure this can be done at all. I haven't been able to find a divider widget that works, and inserting the line in the image itself spaces out the form unevenly. I've attached a mocked up image of how I'd like it to look. 

    There probably isn't... but please let me know if there is a way to insert a vertical divider or line. 

    Page URL:
    https://www.jotform.com/build/71915448691163

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Mike_G on July 14, 2017 at 02:04 PM

    What you would like to achieve is possible with the help of a form divider and CSS codes.

    I see that you already have a form divider added to your form.

    First, set the form divider's properties similar to what is shown in the image below.

    Note: Please use the existing form divider in your form because I have based my CSS codes there.

    After that, position by dragging the form divider in-between the image in your form and the rest of the form fields.

    And lastly, add the following CSS codes below to your form following the instruction in this guide — How-to-Inject-Custom-CSS-Codes

    li#id_11 {

        width: 1px !important;

        display: inline-block !important;

        position: absolute !important;

        padding: 0px !important;

    }

    #cid_11 div {

        border-right: 1px solid #e6e6e6;

        height: 325px !important;

    }

    #cid_11 div {

        border-bottom: 0px solid #e6e6e6;

        height: 1px;

        margin-top: 0px !important;

        margin-bottom: 0px !important;

    }

    Here's a clone version of your form where I have applied the changes above.

    https://form.jotformpro.com/71945071559969

    Feel free to clone it to your account so you can have it examined better. — How-to-Clone-an-Existing-Form-from-a-URL

    If you have other questions regarding this, please feel free to contact us again anytime.

  • Profile Image
    JotForm Support

    Answered by Mike_G on July 14, 2017 at 02:21 PM

    Apologies for any inconvenience. I have tried to load the clone version of your form in most commonly used browsers and encountered an issue with Mozilla Firefox. To rectify the issue, I have made some minor changes in the CSS codes I have provided you above. Please use the updated CSS codes below instead in your form.

    li#id_11 {

        width: 1px !important;

        display: inline-block !important;

        padding: 0px !important;

    }

    #cid_11 div {

        border-right: 1px solid #e6e6e6;

        height: 325px !important;

    }

    #cid_11 div {

        border-bottom: 0px solid #e6e6e6;

        height: 1px;

        margin-top: 0px !important;

        margin-bottom: 0px !important;

    }

  • Profile Image

    Answered by OpWarm on July 18, 2017 at 09:54 AM

    This is exactly what I was looking for, thank you! Final question: is there any way to optimize this form for mobile devices with these changes?

  • Profile Image
    JotForm Support

    Answered by aubreybourke on July 18, 2017 at 11:08 AM

    You can try adding the following CSS to improve the responsiveness on moblie devices:

    @media screen and (max-width: 350px){
        #id_10, #id_4, #id_5, #id_6, #id_2 {
            top : -300px !important;
        }

    }