Why the form looks different in Firefox?

  • Profile Image
    edrianlim
    Asked on March 06, 2012 at 10:20 PM

    Hi, I just realized that the form looks different in Firefox, and the Submit button is gone.

     

    May I ask how can I fix this? It looks fine on Safari, Opera & Chrome. I don't have internet Explorer though so I haven't check yet. Attached the screen shot from Firefox.

  • Profile Image
    jeanettebmz
    Answered on March 06, 2012 at 10:27 PM

    Hi and greetings!

     Edit your form and try to embed it via iFrame code ,

    Hope this work for you!

     

  • Profile Image
    jeanettebmz
    Answered on March 06, 2012 at 10:33 PM

    Hi again!

    Just something else :

    iFrame version has a downside : Every time you change your form, you must update the form code on your site.

    This happens because the height of the form needs to be hard-coded, by changin your form, the form size will change and the iframe height will need to be updated.

  • Profile Image
    edz_kgs
    Answered on March 06, 2012 at 10:36 PM

    @ edrianlim,

    Also make sure you have cleared your browser's cache and have an updated version of firefox before doing this to isolate the issue.

    Edz

  • Profile Image
    anartwork
    Answered on March 07, 2012 at 12:10 AM

    I tried visiting that webpage using chrome and firefox but it looks the same to me. The last field is only shown after you have filled in the rest of the information. You can actually control the height of the form by embedding it using iframe. Let me know if you need further assistance.

  • Profile Image
    NeilVicente
    Answered on March 07, 2012 at 01:04 AM

    @edrianlim

    Kindly re-embed your form using these codes:

    <iframe scrolling="no" frameborder="0" style="width:100%; height:601px; border:none;" src="//form.jotform.me/form/20421225188" allowtransparency="true">
    </iframe>

    As another supporter has pointed out, you must update your iFrame codes whenever you make changes to your form (such as adding or removing fields) because the height of the iFrame element that holds your form needs to be adjusted as well.

  • Profile Image
    edrianlim
    Answered on March 18, 2012 at 02:28 AM

    Hi all, thanks for the guides.

    I was using iFrame, even though I followed NeilVicente codes, it still looks different. The text field will still drop down from the label even though I set it to be next to eact other.

    So I changed the label to align top so the text field will drop down according to Firefox (not what I want but I have no choice), now I have another problem with the "text field size". I set to 60 but Firefox & Opera simply extend it with no end...

    Have a look here: http://www.omnixasia.com/contact-us.html

    I'm using the latest Mac version, Safari & Chrome seem to be ok.

  • Profile Image
    gori-mathew
    Answered on March 18, 2012 at 02:35 AM

    Hello;

    Your form opens well in my IE9 and not seeing the over-sized form. May be you can change to IE and see if this opens fine.

    Thanks.

     

  • Profile Image
    edrianlim
    Answered on March 18, 2012 at 02:37 AM

    Thanks Gori, I can't test it myself on IE9 because I'm a Mac user, but good to know it works in IE9.

  • Profile Image
    idarktech
    Answered on March 18, 2012 at 02:39 AM

    @edrianlim,

    Please try to inject this css codes to your form and see if this fixed the text field issue on FF and Opera. Thanks.

    .form-textbox{

    width:393px !important;

    max-width:393px !important;

    min-width:393px !important;

    }

    Update: Your form looks fine here on FF but text boxes overflows on Opera browser. I think injecting that CSS Codes above should help. Please try it and let us know the result, thanks.