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

    Form is rendering differently on my Wordpress site from Form Designer or Preview mode

    Asked by randypotterschool on November 24, 2014 at 08:47 AM
    7- And lastly, but still very important - My form is rendering differently when embedded on my Wordpress site than it is in the form designer and/or preview.  The fields seem to by dynamic and are filling the width of the form/screen.  If you could take a look and compare for me, my form is in my account (randypotterschool is my login/user ID) and the live form can be viewed at http://pianotuning.com/school/ats-registration/
    render wordpress form designer
  • Profile Image
    JotForm Support

    Answered by Charlie on November 24, 2014 at 10:56 AM

    Hi,

    Upon checking your account, I see that the form embedded on your Wordpress seems to work fine, and looks the same with the form that is viewed on it's standalone URL. 

    This is the standalone URL:

    http://www.jotform.us/form/43267105705148 

     

    May I know what problems are you seeing in the embedded Wordpress website? Also, please do try to view website using different web browsers, we usually recommend using Google Chrome or Firefox. Screenshots would also help us a lot on identifying your concern.

    We'll wait for your response.

    Thank you.

  • Profile Image

    Answered by randypotterschool on November 24, 2014 at 11:33 AM

    Thanks for your reply.  The difference I'm seeing is that on the embedded form all of the fields are expanding to the full width of the screen.  Even the submit button.   Here's a screen shot highlighting a section where it looks especially bad/obvious.

     

    And here's the same section in the stand-alone version that looks much better. 

     

    Any idea why this is happening?

     

  • Profile Image

    Answered by Carina on November 24, 2014 at 12:52 PM

    I believe it is connected with this css code:

    #main.fullwidth, .layout-full #main, .col-full {
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        max-width: 75.998em;
        width: 100%;
    }
     
    Please try replacing width by 500px instead to see if it solves.
    Let us know if the problem persists.
    Thank you
  • Profile Image

    Answered by randypotterschool on November 25, 2014 at 11:18 AM

    Thank you for getting back to me.  I believe we're on the right path here with identifying this issue, but we're not quite there yet.   I've literally spent several hours working on this, as I want to resolve this with minimal assistance, but I'm still stuck.  Here's a screen shot of the page looking at the code you identified using firebug:

    It seems like the lines that make the difference are the max-width: 75.998em; lines, highlighted below.  When I disable those lines, the form displays correctly, but the overall page layout is disrupted.  Note the lines that are commented out and the effect on the white space.  There is now no white space on the left or right of the main content area.

     

    Now, I recognize that this is a CSS issue rooted in my site/Wordpress template.  However, is there a way to override this effect and isolate it from how it is causing my JotForms form to render?   

    This is my last notable issue in my first (of hopefully many) Jotforms Form and I'll be a super happy customer if I can get to the bottom of this.  Thanks for any further insights you can offer!

     

     

     

     

  • Profile Image

    Answered by Shadae on November 25, 2014 at 11:53 AM

    Hi randypotterschool,

    As my colleague was saying the best way to resolve this issue would by changing the width from 100% to 500px. This would need to by changing the actually code on the page to resolve the issue.

    You can however attempt to inject the follow CSS code in your form within the form builder to resolve this issue:

    #main.fullwidth, .layout-full #main, .col-full {

        margin-bottom: 0;

        margin-left: auto;

        margin-right: auto;

        margin-top: 0;

        max-width: 75.998em;

        width: 500px;

    How to Inject CSS Code

    I hope this helps, please inform us if you need further assistance.

  • Profile Image

    Answered by randypotterschool on November 25, 2014 at 12:42 PM

    Well, I did try what you said.  When I changed the value in my site's CSS file from 100% to 500px; I got the following:

     

    And furthermore, the form fields remained fully justified.  So, I restored that value in my site's CSS file and instead tried the injection method you suggested.  There was no effect.  Here's a screen shot of how it is in the form builder:

     

    Like I mentioned before, I do see some steps in the right direction if I comment out the line that says max-width: 75.998em;  However I need to either isolate that change to just affect the form itself rather than the whole page or to find a different/better solution.  

    Any other ideas?  Also, any idea why the CSS injected using the formbuilder didn't have any apparent effect?

     

  • Profile Image

    Answered by Ben on November 25, 2014 at 01:56 PM

    Hi,

    Please remove the Mobile Responsive widget from your jotform and check then. It should show the jotform with proper width just as in Form Builder.

    Best Regards,
    Ben

  • Profile Image

    Answered by randypotterschool on November 25, 2014 at 02:03 PM

    Yes!  That seems to have done it!  Thank you!!

    Now...  why did that fix my problem and will it have any other adverse effects?

     

     

  • Profile Image

    Answered by Ben on November 25, 2014 at 03:42 PM

    Hi,

    Yes!  That seems to have done it!  Thank you!!

    Great. :) You are welcome.

    Now...  why did that fix my problem

    The amount of space that you have dedicated to the iframe was suggesting to the widget that it is being shown on a mobile device and it wanted to adjust properly. Unfortunately as mobile devices have better and better resolution, this becomes a bit harder to determine (if it is truly a mobile device or not).

    and will it have any other adverse effects?

    Well, it could be displaying slightly off on mobile devices, which is why our developers have added it, but if that happens I would suggest placing this code into your jotform:

    @media screen and (max-width: 360px)
    {
       div.form-all, li.form-line
       {
         width: 90%;
         max-width: 90%;
       }
       input, .form-sub-label-container, select, textarea
       {
         width: 100%;
         max-width: 100%;
       }
       .form-sub-label-container
       {
         float: left;
       }
       .phone-separate
       {
         display: none;
       }
       .form-address-table input
       {
         max-width: 250px;
       }
       input.form-address-city, input.form-address-state, input.form-address-postal, input.form-address-country
       {
         max-width: 120px;
       }
       input.form-address-postal
       {
         width: 80px;
       }
       select.form-address-country
       {
         left: -25px;
         position: relative;
       }
       .form-radio-item > input, .form-checkbox-item > input
       {
         width: 10px;
       }
       .form-radio-other-input.form-textbox
       {
         min-width: 50px;
       }
       .form-address-table td[width="50%"]
       {
         width: 40%;
       }
    }

    You an see here how to Inject Custom CSS Codes.

    It will only effect the layout on a very small devices so that it matches the rest of your website.

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by randypotterschool on November 25, 2014 at 03:47 PM

    Thank you so much.  Great explanation.  You guys are fantastic.  I'm new to Jotforms and very pleased with the support you offer.  I'll be a client now moving forward for sure.

  • Profile Image

    Answered by Ben on November 25, 2014 at 04:54 PM

    Hi,

    You are welcome and thank you for the nice words. :)

    We are looking forward to seeing you here with us and do let us know if you have any further questions and we would be happy to answer them.

    Best Regards,
    Ben