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

  • randypotterschool
    Asked on November 24, 2014 at 8: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/
  • Charlie
    Replied 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. 

    Form is rendering differently on my Wordpress site from Form Designer or Preview mode Image 1 Screenshot 20

    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.

  • randypotterschool
    Replied 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.

    Form is rendering differently on my Wordpress site from Form Designer or Preview mode Image 1 Screenshot 30

     

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

    Form is rendering differently on my Wordpress site from Form Designer or Preview mode Image 2 Screenshot 41

     

    Any idea why this is happening?

     

  • Carina
    Replied 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
  • randypotterschool
    Replied 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:

    Form is rendering differently on my Wordpress site from Form Designer or Preview mode Image 1 Screenshot 30

    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.

    Form is rendering differently on my Wordpress site from Form Designer or Preview mode Image 2 Screenshot 41

     

    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!

     

     

     

     

  • randypotterschool
    Replied 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:

     

    Form is rendering differently on my Wordpress site from Form Designer or Preview mode Image 1 Screenshot 30

    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:

    Form is rendering differently on my Wordpress site from Form Designer or Preview mode Image 2 Screenshot 41

     

    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?

     

  • Ben
    Replied on November 25, 2014 at 1: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

  • randypotterschool
    Replied on November 25, 2014 at 2: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?

     

     

  • Ben
    Replied on November 25, 2014 at 3: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

  • randypotterschool
    Replied on November 25, 2014 at 3: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.

  • Ben
    Replied on November 25, 2014 at 4: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