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

    Overriding CSS for form width

    Asked by randypotterschool on January 30, 2017 at 09:19 AM

    Hello,

    I'm having some issues with having one of my forms render properly on my page with regards to its width.   There seems to be a default value in the CSS forcing a width of 100%.  I see it in the CSS when I inspect it in Firebug, but I can't find the right code to override it to a value of 75% or so.  I read several threads and tried a few suggestions that I found in your forums, but to no avail.  I tried the inject CSS option with the following codes but they didn't seem to do anything:

    .form-all {width: 75% !important;}

    div.form-all {width: 75% !important;}

     

    Could you set me straight here?  I have a screen shot attached of the value that I'm trying to change/override.  It's the <iframe> code.  

     

    Thanks for your help. 

    Blair

    Page URL:
    http://domenyspianoservice.com/contact.php

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 30, 2017 at 10:31 AM

    The injected code will not change the iFrame embedded code, you need to handle that from the webpage where you're embedding the form. 

    You could also use the iFrame embed method, it will allow you to change the default width value so you do not need to inject any CSS code. 

    Here's the guide to get the iFrame code: https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    On the sample iFrame code below you will find highlighted the part where you change the width: 

        <iframe

          id="JotFormIFrame"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/FormID"

          frameborder="0"

          style="width:100%;

          height:2190px;

          border:none;"

          scrolling="no">

        </iframe>

    Hope this helps.