My jotform looks fine in the form builder but its fields are much too wide when viewed on the web page where it's embedded

  • lrobinson
    Asked on December 4, 2014 at 2:59 PM

    How do i get my response boxes to stay on the form page.  Even the automatic ones like the phone number, or date and year, are way to big.  I am sorry to have so many little questions.  They look bigger on the actual form when it is embedded than they do on the screen when i am working on it.  thanks again.

     

  • abajan Jotform Support
    Replied on December 4, 2014 at 4:38 PM

    Firstly, it's our job to answer your questions, no matter how small or unimportant they may seem to you. And we like answering them too! :)

    Anyway, the issue is being caused by the responsive nature of your jotform. I know you didn't set it to be responsive but once it has been edited in the Form Designer, it will likely become that way. (Our developers are working on fixing that glitch.) Whenever the form's width is below 768 pixels, the width of its fields will expand like you've seen and since the width of the jotform in your web page is less than 768px, the width of the fields are expanded. This block of CSS is causing that behavior and if it's removed from the form's injected CSS the problem will go away. However, due to the sheer volume of code which the Form Designer would have inserted, it may be difficult for you to spot and remove the aforementioned offending block. As such, I've saved the new code, sans the problematic section, to a page. Just delete all of the form's current injected CSS and replace it with this code. That should correct the problem but if it doesn't please let us know.


    Cheers

  • abajan Jotform Support
    Replied on December 4, 2014 at 4:42 PM

    My apologies, I gave you the wrong link. Inject this code instead.

  • documender
    Replied on December 11, 2014 at 6:07 PM

    I am having the same problem as Irobinson - my date fields are spanning the width of my form. I see your solution above but it's still too advanced for me. Exactly where do I have to replace the code?

  • Ben
    Replied on December 11, 2014 at 6:45 PM

    Hi,

    To use the styles you would need to inject them to your jotform. You can do that by following next steps: Inject Custom CSS Codes

    Since the style is not intended for your jotform it might and it might not completely work because of the difference in the fields, but if that happens please open a new thread about it and we will be happy to help you sort it out as my colleague has done above.

    Best Regards,
    Ben