Separating line between image and form fields

  • OpWarm
    Asked 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. 

    Jotform Thread 1199384 Screenshot
  • Mike_G JotForm Support
    Replied on July 14, 2017 at 2: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.

    Separating line between image and form fields Image 1 Screenshot 30

    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.

    Separating line between image and form fields Image 2 Screenshot 41

    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.

  • Mike_G JotForm Support
    Replied on July 14, 2017 at 2: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;

    }

  • OpWarm
    Replied on July 18, 2017 at 9: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?

  • aubreybourke
    Replied 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;
        }

    }