Forms appearance in various browsers

  • Profile Image
    thealbumcreator
    Asked on March 21, 2012 at 08:30 PM

    Hi,

     

    I have been creating my forms in google chrome, however when I view my site in internet explorer and safari, the forms appear differently.  For example, chrome is how it should look.  Internet explorer, the submit buttons sit at different levels and in safari the message field isnt aligned with the email field.  Can anyone help?!

     

    Thanks

  • Profile Image
    jeanettebmz
    Answered on March 21, 2012 at 10:15 PM

    Try to inject a custom CSS in your form, here I leave you an example

    .form-submit-button {
    position: relative;

    top: 50px;

    }

    #iinput_6 {

    position: absolute;
    top: 46px;
    right: 64px;

    }

    While  on  your form (Edit Mode), click Setup & Embed then  Preferences

    here it is a screenshot of your form which I cloned to do this test

    You can adjust the px's according to the dimensions set on your flash code
    If you need further assistance, let us know

    Jeanette
  • Profile Image
    thealbumcreator
    Answered on March 22, 2012 at 03:31 AM

    Thanks but my submit button has now disappeared! And also how come there is now a large gap between my submit button and the bottom of the message field?

    Thanks again

  • Profile Image
    thealbumcreator
    Answered on March 22, 2012 at 03:33 AM

    My submit button appears on internet explorer but not chrome or safari

     

    Thanks

  • Profile Image
    gori-mathew
    Answered on March 22, 2012 at 04:08 AM

    Hello;

    Try embedding the form via an iFrame on chrome  instead of the short script and let us know if that helps:


    Thanks for contacting Jotform support!

  • Profile Image
    idarktech
    Answered on March 22, 2012 at 04:28 AM

    @thealbumcreator,

    I think it's because of this code that's provided to you by my colleague.

    .form-submit-button {

    position: relative;

    top: 50px;

    }

    Simply adjust 50px if you want to reduce the gap between your message and the button field.

    Furthermore, I have here your form which I think displays and aligned every fields correctly in most known browsers. Here: http://jotform.me/form/20809308005446, feel free to clone this form if you like. Thanks.

  • Profile Image
    thealbumcreator
    Answered on March 22, 2012 at 10:16 AM

    Unfortunately this still isn't resolved. The background is no longer transparant and although the forms are aligned in safari and chrome, the email field still overhangs the message field in internet explorer. Also the edit and preview modes are different - the email field sits below the name field in edit mode but sits next to the name field in preview mode

  • Profile Image
    jeanettebmz
    Answered on March 22, 2012 at 12:35 PM

    Hello again!

    While on edit,  go to the form styles tab (click on preferences) and make the background transparent, as shown below

    You might need to adjust the CSS just in case this advice doesn't work

         .form-line { background: none; }


    I hope this sorts out the issue.

    Feel free to come back with more questions

    Jeanette

  • Profile Image
    thealbumcreator
    Answered on March 22, 2012 at 12:49 PM

    Thanks, but the main issue is the alignment of the fields. It is aligned correctly in safari and chrome but not in internet explorer

  • Profile Image
    jeanettebmz
    Answered on March 22, 2012 at 02:55 PM

    Did you try the suggestion my colleague Gori-Mathew? 

    If you have already embedded the iFrame code but you have made changes , such as making the background transparent, then you need to re-embed the code into your page, that is the only disadvantage while using iFrame , but it ussually sorts out browser incompatibilities

    Jeanette

  • Profile Image
    thealbumcreator
    Answered on March 22, 2012 at 03:27 PM

    Yes I have tried these solutions and I am aware I need to re save changes etc.  I have embedded the form using iFrame but the problem still exists in IE8 that the email field slightly overhangs the message field - something that doesn't occur in the other browsers

  • Profile Image
    jeanettebmz
    Answered on March 22, 2012 at 06:39 PM

    Find out the email field and text fields id's on the source code of the form and try to set the position for your text and email fields to absolute

    Hopefully it will work for IE .

    Let me know if it helps