Display Problem on embedded forms.

  • Profile Image
    ImmobiliareUSA
    Asked on May 31, 2017 at 12:52 PM

    6) Form "EastCoast Contatti: modulo NUOVA landing page" > this form should look like this (see the following image):

     

     

    but currently it looks like this.

  • Profile Image
    Kevin_G
    Answered on May 31, 2017 at 02:58 PM

    I have checked your form and noticed the width value is reduced, I have cloned it and increased the width value, after reloading the form multiple times, I could see the width was the same. 

    Could you please try increasing your form's width? 

    You will find the option on the advanced tool, under the styles tab: 

    If you notice that your form resets back to the incorrect layout, please let us know. 

  • Profile Image
    ImmobiliareUSA
    Answered on May 31, 2017 at 06:53 PM

    I'm so sorry but I'm not a developer, so not that familiar with jot form settings...my concern would be doing something wrong and getting in trouble more than I am now. 

    So would just ask if you could give me a little help resizing the form in a correct way, in order to make it appear like it was before (see the following image):

     

    Thank you so much in advance :)))
    Davide

  • Profile Image
    Kevin_G
    Answered on May 31, 2017 at 07:55 PM

    I have increased the width value for your form, please check how it displays now, if you still cannot see the change reflected on your webpage, please share us the link where the form is embedded so we can take a look. 

     

  • Profile Image
    ImmobiliareUSA
    Answered on June 01, 2017 at 04:02 PM

    Unfortunately I still have issues with this form, which is embedded here: www.immobiliareusa.it/landing

    In the desktop version everything is ok but in the MOBILE version the fields NOME E COGNOME are too large and the 2 words lay on the turquoise graphic, which isn't good.

     

     

    Plus, I've set the error notices in Italian, but if you check on the form (see the following image) they're all still in English and I don't know why

     

    As specified, I'm not familiar with HTTP and codes so just asking if you could give me a little help resizing the form in the correct way and deleting the grey band.

    Thank you very much :)))))

     Davide

  • Profile Image
    david
    Answered on June 01, 2017 at 06:35 PM

    I checked your webpage and currently you are using the full source code to embed your form.  Try replacing the source code with your forms iFrame code:

    https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    We should then be able to help you adjust the frame size if need be.

  • Profile Image
    ImmobiliareUSA
    Answered on June 07, 2017 at 09:21 AM

    Ok, the iFrame code replaced the source code to embed the form.

    Now the issue is that ONLY on MOBILE devices the fields "telefono" and "email" (which have been contracted and are perfecly responsive on desktop) lay on 2 different levels and the orange button goes out of the form...how can I take the 2 fields on one line, as on desktop?

  • Profile Image
    Kevin_G
    Answered on June 07, 2017 at 10:36 AM

    I have checked your website http://www.immobiliareusa.it and could not find the embedded form, may we get the link where the form has been embedded on? 

    We will be glad to help you fixing the layout issue. 

  • Profile Image
    ImmobiliareUSA
    Answered on June 07, 2017 at 11:01 AM

    Sure! It's "immobiliareusa.it/landing"

     

  • Profile Image
    david
    Answered on June 07, 2017 at 12:06 PM

    I checked the embedded form on mobile and it currently looks the same as desktop:

    Telefono and E-mail are both on the same line.  Is this still not the case on your end?  If so, let us know what device/browser you are using to display the page and we will have a look.

  • Profile Image
    ImmobiliareUSA
    Answered on June 07, 2017 at 12:14 PM

    I just checked on my I-Phone 6 (Safari) and keep seeing the 2 fields (telefono & email) on 2 different lines and the orange button out of the form as in my previous picture.

    Thank you,

    Davide

  • Profile Image
    Kevin_G
    Answered on June 07, 2017 at 01:41 PM

    I have been checking your form and I can see what you're referring to, the fields are displaying like this: 

    I would suggest you to inject the following CSS code so the form keeps its layout no matter if it's viewed in a desktop or mobile: 

    li#id_18, li#id_16 {

       width: 50%;

    }

    [data-type="control_fullname"] .form-sub-label-container {

        width: 46%;

    }

    .form-input-wide div{

        width: 100% !important;

    }

    .form-input-wide{

        width: 100% !important;

        max-width: inherit !important;

    }

    .form-textbox, .form-textarea{

        max-width: inherit ;

    }

    [data-type="control_fullname"] .form-sub-label-container:first-child {

        margin-right: 5%;

    }

    li#id_15 {

        padding-right: 2.8%;

    }

    Regarding to the button displayed out of the background, I have further inspected your webpage and I can see the background color has been applied to the JotForm form's container and not directly to the form, if you open the link to your JotForm form you will see it has not a background color/image, the form's container seems to have a fixed height value, the form's height is currently greater than the background so this is why the form displays like that. 

    Here's an image to explain what I'm referring to: 

    Would be better if you set the background colors and needed images to the JotForm form directly, your entire background seems to be an image, I think you may set the background color and leave the header just like an image. However, I know that may not be possible to make such change so I would suggest you to inject the following CSS code to your form, this should reduce the space between the fields so the button should not display out of the form's container: 

    @media screen and (max-device-width: 480px){

      .form-line {

          margin-top: -4px;

          margin-bottom: 3px;

      }

      ul.form-section.page-section {

          margin-top: -14px;

      }

    }

    This code could be added right below the one I provided above. 

    This guide will help you injecting all the given CSS code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps. 

  • Profile Image
    ImmobiliareUSA
    Answered on June 08, 2017 at 02:35 PM

    Thank you so much, Kevin! Your help and tips are always to precious!!

    May I ask you one last question? After having injected the first code, 2 strange red rectangles have appeared behind the error message (please see the green arrows)..how can I delete them?

    Thanks again,

    Davide

     

  • Profile Image
    david
    Answered on June 08, 2017 at 03:48 PM

    Adding the following code should remove that portion of the error:

    .form-error-arrow{
      display : none;
    }

  • Profile Image
    ImmobiliareUSA
    Answered on June 08, 2017 at 04:18 PM

    Thank you!!!

  • Profile Image
    ImmobiliareUSA
    Answered on June 08, 2017 at 05:54 PM

    Do you know by chance why the form is cut on the right side, as highlighted by the 2 green arrows? What can I do to solve the issue?

    Thanks!!

  • Profile Image
    BDAVID
    Answered on June 08, 2017 at 07:21 PM

    You need to increase the width of the div of your page, where you have embedded your form, example:

    Let us know if you need more help.

  • Profile Image
    ImmobiliareUSA
    Answered on June 09, 2017 at 04:38 AM

    Perfect! Now how can I adjust the light-pink rectangle (please see the green arrows) not to allow it to go out of the form border?

    Thank you!!!!

    Davide

  • Profile Image
    ashwin_d
    Answered on June 09, 2017 at 05:17 AM

    Hello Davide,

    I have moved your question to a new thread so that we can address it separately. You will be answered in the following thread:  https://www.jotform.com/answers/1168360

    Thank you!