On preview, the form looks fine, but on the actual website, the text-areas expand. The form position also changed.

  • Profile Image
    JobTestPrep
    Asked on September 28, 2017 at 08:06 AM

    On preview, the form looks fine, but on the actual website, the text-areas expand.

    Original Post: https://www.jotform.com/answers/1256484

     

  • Profile Image
    John_Benson
    Answered on September 28, 2017 at 10:29 AM

    I checked your form (http://www.jotform.me/form/72171200030434) and the page URL (https://www.machon-noam.co.il/%D7%A4%D7%99%D7%9C%D7%AA-%D7%94%D7%9B%D7%A0%D7%94) that you have provided on the other thread. 

    It looks the same to me. Here are the screenshots:

    - Website:

    - Form link:

    Is the issue resolved? Is the form link and page URL, correct? 

    What device are you using when viewing the form and page URL?

    Let us know so we can investigate it further. Thank you.

  • Profile Image
    JobTestPrep
    Answered on October 01, 2017 at 05:05 AM

    No, this is not the form I'm referring to.

    Same URL, form #51892012601446.

    You can see it if you press on the green-white button at the bottom of the page-

    Thank you

  • Profile Image
    ashwin_d
    Answered on October 01, 2017 at 07:19 AM

    I'm sorry for the trouble caused to you. 

    I did check your form and I am able to see the issue you are having.  The issue is caused because of the iFrame width. I will get back to you on this soon.

  • Profile Image
    ashwin_d
    Answered on October 01, 2017 at 07:32 AM

    Please embed your form using the following iFrame embed code and see if that solves your problem:

    <iframe id="JotFormIFrame" allowtransparency="true" src="https://secure.jotform.me/form/51892012601446" frameborder="0" scrolling="no" style="width: 481px;height: 455px;border: none;"></iframe>

    Do get back to us if the issue persists.

  • Profile Image
    JobTestPrep
    Answered on October 01, 2017 at 08:34 AM

    I embedded the iFrame code you sent me.

    This is what it looks like now:

  • Profile Image
    EltonCris
    Answered on October 01, 2017 at 10:16 AM

    I presume that resolves the problem? If not, what exactly that you want the form too look like when embedded?

    FYI, forms from JotForm are mobile responsive. The form embedded on your website into a small container renders the mobile responsive layout so it appears properly when viewed on mobile. It's actually much easier to fill when the form field expands when embedded into a small container.

    Thanks

  • Profile Image
    JobTestPrep
    Answered on October 03, 2017 at 05:14 AM

    How can I get rid of the grey area around the form?

    Is the problem in the form's CSS or the iframe code?

    I'll mention again that every time I try and edit a form, the moment I press 'edit form', the form changes without me touching the CSS and creates these problems.

    Thank you.

  • Profile Image
    amy
    Answered on October 03, 2017 at 06:24 AM

    In order to get rid of the grey area around the form, you need to change the background colour of your form. Please click on the "Form Designer" button and then select a page colour which suits your page. 

    Finally, please save your form and then let us know if you encounter any issue.

  • Profile Image
    JobTestPrep
    Answered on October 03, 2017 at 06:53 AM

    Hey,

    I tried that, but there is still a border around the form itself.

    Is there a way to delete it?

  • Profile Image
    amy
    Answered on October 03, 2017 at 08:25 AM

    To remove borders please inject this custom CSS code to your form:

    .supernova .form-all, .form-all {

    border: none !important;

    -webkit-box-shadow: none !important;

    -moz-box-shadow: none !important;

    box-shadow: none !important;

    }

    How to Inject Custom CSS Codes

    The result is: