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 embedded on wordpress is showing its mobile layout

    Asked by moneylifeliving on April 01, 2016 at 02:25 AM

    I'm using the wordpress plugin to integrate forms on my site however for some reason it's displaying the mobile version of the site (replicated 3 times!!), along with the form in the place where the form should be.

    Why is this and how can I fix it?

    This happens with responsive option checked and unchecked.

    Screen print attached with erroneous content boxed in red.

    Page URL:
    http://lifestylegroup.es/clausula-suelo-claim-enquiry-form/

    Screenshot
  • Profile Image
    JotForm Support

    Answered by EltonCris on April 01, 2016 at 04:20 PM

    Our sincerest apologies for the delayed response.

    Just FYI, all forms are now mobile responsive. This is most probably the reason why it is rendering the mobile version specially when the form is embedded on a small container.

    So far as of checking, your standalone form https://www.jotform.com/form/60174876326966 seems to be showing perfectly on your page.

    If you don't want the form to render its mobile layout unless it is viewed on 500px width and smaller, inject this CSS codes to your form.

    @media screen and (min-width:500px){

    .form-all {

        width: 690px !important;

    }

    }

    Guide:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please let us know if this doesn't make any difference.

    Thanks!

  • Profile Image

    Answered by moneylifeliving on April 03, 2016 at 10:29 AM

    Hello,

    Thanks for you reply.  

    It seems the page / form behaves differently depending on browser.  The problem is not that the mobile version of the form is being, rendered, it is that for some reason the mobile version of the page is being injected into the container for the form, along with the form.

    When I view the page using Firefox or Chrome it appears like this:

     

    As you can see the section in the red box should not be there.  This also happens when viewing the page / form on my mobile device running android Chrome, as well as my PC (24" monitor) and laptop with 15" screen

    I have added the coding you suggested, and it hasn't made any difference.

    Any further much appreciated.

    Rgds

    Sam

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 03, 2016 at 11:24 AM

    Thanks for the clarification. I didn't get the issue at first because the screenshot in your post failed to load in my browser. Thanks for re-posting the screenshot anyway, I greatly appreciate it.

    The problem is due to to the conflicting script between the form script and the scripts in your website. The conflict occurs when the script embed code executes on your page, it changes the iframe URL to a short URL parameter "?wmode=transparent" which is the reason why the website itself is included in the iframe content. To resolve this, simply re-embed your form using the iframe embed code. Since the form will load directly in an iframe container, it will not create any conflict on your page. http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Hope this helps!

  • Profile Image

    Answered by moneylifeliving on April 04, 2016 at 02:17 AM

    So basically I can't use the form plugin with my site. 

    Thanks for your help.

    Sam

  • Profile Image
    JotForm Support

    Answered by mert on April 04, 2016 at 04:03 AM

    Hi Sam,

    On behalf of my colleague, you are most welcome. You can always use the Wordpress form plugin; but it could lead some conflicts on your page as you have experienced. As my colleague has already explained, please use the iFrame embed code to overcome this issue.

    Below, you will find the instructions:

    http://www.jotform.com/help/299-How-to-Embed-Form-to-Wordpress-com

     

    In addition, when you are taking the iFrame embed code, please don't take the whole structure of it. The content between <iframe>...</iframe> tags is enough to embed your form. (Following code is just an example, don't embed that one.)

     

        <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

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

          frameborder="0"

          style="width:100%;

          height:800px;

          border:none;"

          scrolling="no">

        </iframe>

     

    Please, try this method, it will overcome the script conflict and please don't forget to let us know the results.

    Thanks.