Embedded form is not mobile responsive

  • Profile Image
    toddwhitaker
    Asked on January 01, 2020 at 01:12 AM

    I just built my first form. Wonderful tool. A few questions:

    1) I want to embed my form in an Unbounce landing page. But when I do so, it doesn't seem to be mobile responsive. How can I make it mobile responsive?

    2) If i can't make it mobile responsive, and have to use jotform to host my form, I need to change my username. How do I do that (if #1 is not possible)?

    Thanks.

    Todd

  • Profile Image
    AshtonP
    Answered on January 01, 2020 at 02:39 AM

    Thank you for writing to Jotform support.

    Can you please provide us with the URL where you have embedded the form so that we can check and assist you accordingly.

    For your second query, we can help you to change your account username. If you would like us to change the same, please provide us with the new username. We will check the availability and change it accordingly. You can also customize your form URLs if you want. Please refer to this guide for more details: How-to-Create-a-Custom-URL-of-a-Form

    Hope this helps.

  • Profile Image
    toddwhitaker
    Answered on January 01, 2020 at 11:15 AM

    Hi Ashton,

    Thanks. Here's the URL:

    https://4minstitute.com/bridge-the-gap-application/

  • Profile Image
    Richie_P
    Answered on January 01, 2020 at 11:40 AM

    Can you please try to embed your form using the Iframe code?

    Here is a guide:https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Regarding your username, kindly share at least three unique username so that we can check its availability.

    Do note that we will update your account using the first available username.

    Looking forward for your response.

  • Profile Image
    toddwhitaker
    Answered on January 01, 2020 at 12:08 PM

    Hi Richie,

    Thanks. That worked. It looks good now. One last thing on the formatting of the mobile form - When I look at it on mobile, the First Name and Last Name are on different lines, but the Last Name field is offset to the right. It looks odd. How do I move it below the First Name field, so it doesn't look like a mistake?

    Thanks.

  • Profile Image
    Richie_P
    Answered on January 01, 2020 at 12:29 PM

    You may try this custom CSS to align your field correctly in mobile.

    @media screen and (max-width: 480px) {
      #last_122{
    margin-left: -133px;
    }
    #sublabel_122_last{

    margin-left: -133px;
    }
     
    }

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

    Please give it a try and let us know how it goes.

  • Profile Image
    toddwhitaker
    Answered on January 01, 2020 at 12:47 PM

    That works. Thanks. And... one more thing. :) The first field - "I understand and agree to the above" - I've set the "initial" field to a Width and Limit Entry to 3 pixels, but it isn't reducing the width of the field, only the character entry limit. It looks strange having a wide initial field, particularly given the First Name and Last Name fields are shorter. How do I fix that?

    Thanks.

  • Profile Image
    Vanessa_T
    Answered on January 01, 2020 at 01:02 PM

    Please add the custom css below to adjust the initials field width.

    input#input_135 {

        width: 50px !important;

    }

    You can change 50 to a smaller number if you want the field to be smaller.

  • Profile Image
    toddwhitaker
    Answered on January 01, 2020 at 01:12 PM

    Perfect! Thank you.

    And the final thing - when you look at the fields directly below it - First Name and Last Name - they have a short width compared to space available on mobile view. Is there a way to adjust (widen) the First Name and Last Name fields ONLY on mobile?

    Thanks

    .
  • Profile Image
    IvayloK
    Answered on January 01, 2020 at 01:23 PM

    Since a ticket has been opened here regarding another matter, I have moved your last question to the following thread:

    https://www.jotform.com/answers/2096549-Is-there-a-way-to-adjust-widen-the-First-Name-and-Last-Name-fields-ONLY-on-mobile