Styling difference on Jotform link vs embedded code

  • Profile Image
    drealkulit
    Asked on May 12, 2021 at 02: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 20211620801490_609b77d20dc5c_Screenshot 2021

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

    1620801677_609b788d56626_Screenshot 20211620801710_609b78ae30933_Screenshot 2021

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

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




  • Profile Image
    Rehan_F
    Answered on May 12, 2021 at 04: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

  • Profile Image
    drealkulit
    Answered on May 12, 2021 at 05:28 AM

    Hi Rehan,

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

    1620811639_609b9f77274c8_Screenshot_2021

    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.


  • Profile Image
    Jed_C
    Answered on May 12, 2021 at 06: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.

  • Profile Image
    drealkulit
    Answered on May 12, 2021 at 06: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.

  • Profile Image
    JohnRex
    Answered on May 12, 2021 at 07: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.

  • Profile Image
    drealkulit
    Answered on May 12, 2021 at 07: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.

  • Profile Image
    Tommaso_F
    Answered on May 12, 2021 at 08: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>
  • Profile Image
    drealkulit
    Answered on May 12, 2021 at 08: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!

  • Profile Image
    Sam_G
    Answered on May 12, 2021 at 09: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.12 embed.gif

    We will wait for your response.

  • Profile Image
    drealkulit
    Answered on May 12, 2021 at 09:46 AM

    Hi Sam!

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

    1620826807_609bdab7786b1_photo_2021-05-1

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

    1620827132_609bdbfc21179_SharedScreensho

  • Profile Image
    Amin_N
    Answered 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.

  • Profile Image
    drealkulit
    Answered 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

  • Profile Image
    Vanessa_T
    Answered 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>


  • Profile Image
    drealkulit
    Answered on May 13, 2021 at 01:06 AM

    Yay, all good now! Thanks, Vanessa!

  • Profile Image
    cafekarel344
    Answered 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?
  • Profile Image
    Jed_C
    Answered on May 15, 2021 at 05: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.