How to display fields inline on my embedded form?

  • Profile Image
    Squashrev
    Asked on August 07, 2017 at 11:23 AM

    Hi, 

    I created a form see below but the format doesn't keep when I am pasting it on my website see the other image below. 

    it keep making it a column instead of a a one line

     

     

    How can I fix that ? 

  • Profile Image
    Kevin_G
    Answered on August 07, 2017 at 01:47 PM

    That happens due to the form's container size, may be that the container has not enough size to display the form fields inline. However, it can be fixed by injecting the following CSS code to your form: 

    .form-line:not([data-type="control_button"]){

        width: 50%;

    }

    This guide will help you to inject it: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    If the issue still persists, please share us the webpage  where you have embedded your form, we will be glad to take a look on it. 

  • Profile Image
    Squashrev
    Answered on August 07, 2017 at 02:20 PM

    Hi, I tried and did not work I am fine with having the submit button under I really want the two field to be inline.

     

  • Profile Image
    Kevin_G
    Answered on August 07, 2017 at 02:52 PM

    May you please try with this one? 

    It has added the "!important" rule that overrides other CSS codes:

    .form-line:not([data-type="control_button"]){

        width: 50% !important;

    }

    I also checked your webpage http://www.squashrevolution.com/ and was unable to find the embedded form, please try embedding it and let us know where can we find it, we will be glad to check it for you and provided with the needed code or instructions to display your form as desired. 

    Looking forward to your response. 

     

  • Profile Image
    Squashrev
    Answered on August 07, 2017 at 03:33 PM

    I have embedded it. If you could take a look. Thank you very much

  • Profile Image
    Kiran
    Answered on August 07, 2017 at 04:39 PM

    I have checked your web page and see that the form fields are now displayed side by side. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help.

    Thank you for using JotForm!