Display Problem on embedded forms.

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

 

 

but currently it looks like this.

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. 

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

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. 

 

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

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.

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?

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. 

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

 

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.

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

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. 

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

 

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

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

Thank you!!!

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!!

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.

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!