Styling difference on Jotform link vs embedded code

  • drealkulit
    Asked on May 12, 2021 at 2:42 AM

    Hi! Help, please. The the styling is quite different on mobile view between the Jotform link and site embedding. Everything from image cropping to font size.

    https://form.jotform.com/211172831068047

    1620801490 609b77d2ed0ae Screenshot 2021 Screenshot 101620801490 609b77d20dc5c Screenshot 2021 Screenshot 21

    http://shop.aelisse.com.s215521.gridserver.com/ (JS Embed*)

    1620801677 609b788d56626 Screenshot 2021 Screenshot 321620801710 609b78ae30933 Screenshot 2021 Screenshot 43

    *it's even worse when we do full code embed.

    Let me know what's causing the conflicts? Thanks!




  • Rehan Support Team Lead
    Replied on May 12, 2021 at 4:47 AM

    Greetings,

    Kindly try embedding your form using iFrame embed code. 

    <iframe
    
      id="JotFormIFrame-211172831068047"
    
      title="AELISSE Beauty Order Form"
    
      onload="window.parent.scrollTo(0,0)"
    
      allowtransparency="true"
    
      allowfullscreen="true"
    
      allow="geolocation; microphone; camera"
    
      src="https://form.jotform.com/211172831068047"
    
      frameborder="0"
    
      style="
    
      min-width: 100%;
    
      height:539px;
    
      border:none;"
    
      scrolling="no"
    
    >
    
    </iframe>

    Should you need further assistance the please let us know.

    Thanks

  • drealkulit
    Replied on May 12, 2021 at 5:28 AM

    Hi Rehan,

    This is what it looks like when I use the iframe embed code you provided.

    1620811639 609b9f77274c8 Screenshot 2021 Screenshot 10

    And then if use the full iframe embed code from the form's publish section, it reverts back to the original styling issue as the JS embed.


  • Jed_C
    Replied on May 12, 2021 at 6:18 AM

    Can you please try including the whole iframe code. You can get your iframe code by checking on this guide https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code. The script part on the iframe will automatically adjust the height of the form especially when showing the field warnings.

    Try the complete iframe code and let us know how it goes.

  • drealkulit
    Replied on May 12, 2021 at 6:30 AM

    Hi Jed, that's what I did for this part:

    "And then if use the full iframe embed code from the form's publish section, it reverts back to the original styling issue as the JS embed."

    Updated the site also with that just now.

  • John Support Team Lead
    Replied on May 12, 2021 at 7:28 AM

    To clarify, what CMS or website builder are you using? When I check the page' source, I can only see the iframe code.

    Can you share with us what type or what's specific webpage builder you're using and we'll try to replicate the issue on our end?

    Also, when you use the source code of the form, that should allow the form to inherit the styling of the page where it's embedded. While embedding it as an iframe will load the form independently from the page - thus retaining its style as in the form builder.

  • drealkulit
    Replied on May 12, 2021 at 7:40 AM

    Hi JohnRex,

    No builder. It's just a blank HTML page with the Jotform code. That's also the reason why originally we used the JS script, not the iFrame.

    We also tried the embedding the whole code, but that was even a weirder experience as it didn't carry over a lot of the styling for some reason.

  • Tommaso_F
    Replied on May 12, 2021 at 8:36 AM

    Greetings,

    Could you please embed your form on your website using this code?

    Let us know if that works for you. 

    <html>
    
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
</head>
    
<body>
    
<script type="text/javascript" src="https://form.jotform.com/jsform/211172831068047"></script>
    
</body>
    
</html>
  • drealkulit
    Replied on May 12, 2021 at 8:46 AM

    Hi Tomasso,

    Oh, yes that works much better (apparently just needed to be in the html tags, lol)!

    Still not quite the same (if you notice the images are still cropped too short - comparing it to the first screenshots I shared), but it will do for now.

    If you can let me know what I need to edit to fix the image cropping, please let me know.

    Thanks!

  • Sam_G
    Replied on May 12, 2021 at 9:34 AM

    Hello Drealkulit,

    May we ask which part needs to fix the image cropping?

    I have checked your webpage and it looks good on a mobile device emulator.

    1620826377 609bd9099fa07 5 Screenshot 10

    We will wait for your response.

  • drealkulit
    Replied on May 12, 2021 at 9:46 AM

    Hi Sam!

    Here's what I have on actual mobile (Android, Google Pixel, Chrome):

    1620826807 609bdab7786b1 photo 2021 05 1 Screenshot 10

    And this is what I have on simulated mobile size (iPhone) via Firefox desktop browser:

    1620827132 609bdbfc21179 SharedScreensho Screenshot 21

  • Amin JotForm Support
    Replied on May 12, 2021 at 10:49 AM

    Hi there,

    I can replicate the issue of the embedded form not being mobile-friendly.

    May I ask whether this exact issue happened when you tried with the iFram code before?

    If not, please re-embed the iFrame code again, and we will guide you further to rectify any other issues found with it.

    We're patiently waiting for your response.

  • drealkulit
    Replied on May 12, 2021 at 11:39 PM

    HI Amin,

    Yes, I did, but I tried it again to make sure and made a new page for it. Same styling issues: http://shop.aelisse.com/index_jotformiframe.html

  • Vanessa_T
    Replied on May 13, 2021 at 12:54 AM

    As per checking, the website/webpage itself is not mobile-friendly. Hence your form is displayed as if it is in a desktop view but squeezed in.

    Kindly try adding the viewport tag within the page's head tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1">

    eg:

    <html>
    
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1">
    
</head>
    
<body>
    
<script type="text/javascript" src="https://form.jotform.com/jsform/211172831068047"></script>
    
</body>
    
</html>


  • drealkulit
    Replied on May 13, 2021 at 1:06 AM

    Yay, all good now! Thanks, Vanessa!

  • cafekarel344
    Replied on May 15, 2021 at 12:55 AM

    Yes its the issue with styling that I am facing in my oppo device but in iPhone its showing every thing right but in oppo device its not working well what will be the reason?
  • Jed_C
    Replied on May 15, 2021 at 5:19 AM

    @cafekarel344, I have moved your question on a separate ticket and will be addressed on this link https://www.jotform.com/answers/3100008.