My email form looks great in regular browsers but on my iPhone the form changes position. How can I fix this?

  • Profile Image
    jeanetteillidge
    Asked on April 10, 2012 at 01:13 PM

    I've tried embedding it regularly and as an iFrame and nothing seems to work. I've attached an example of what it is doing on my iPhone screen. Thanks in advance!

  • Profile Image
    jeanettebmz
    Answered on April 10, 2012 at 01:51 PM

    Hi Jeanette!

    I think you would need to embed your form using the iFrame method, as I checked you page and it is embedded with the script code, please follow the instructions below :

    First of all, remove the previous code embedded into your page (double click on the image) :

    Then go to your form (into the Edit mode )

    If you copy the iframe code correctly , pretty much nothing can break the form on your page! Since form is called inside an iFrame it does not conflict with anything on your page.

    To get your form's iframe code, please follow this steps below:

    1. Go to Setup & Embed

    2. Click Embed Form

    3. Select iFrame

    4. Copy the provided code.

     

    Should you need more assistance, let us know

    Jeanette

    PS. Very nice website by the way!

  • Profile Image
    jeanetteillidge
    Answered on April 10, 2012 at 02:24 PM

    Hi Jeanette, (Great name by the way). :o)

    Okay, I tried it with the iframe code and it's still doing the same thing. So that I could use my own text on my email form I used ♥ in lieu of "Name, Email, Subject, etc." do you think this might be interfering with the placement of the form? I've tried embedding the form with all of the available options and the result is still the same. 

    PS

    Thank you! I haven't officially launched yet so the feedback is much appreciated. I've been working very very hard on it.

  • Profile Image
    jeanettebmz
    Answered on April 10, 2012 at 02:42 PM

    Hi again Jeanette (yes you are right,  great name for great people! LOL)

    No, I don't think that the background is interfering with that, let's try to change on the iFrame code scrolling="yes"  instead of    scrolling="no"  ,

    If it still doesn't work on  iphone, then you might need to check if the tag before the iframe code  div style="position: absolute;  might need to be set to either relative or static.  Though I think the suggestion above should work

    Let me know if it helps

    Cheers!

    Jeanette

     

  • Profile Image
    jeanetteillidge
    Answered on April 10, 2012 at 03:19 PM

    Hi Jeanette,

    Okay, I tried your suggestions and the form is still doing the same thing. *weeps* On the iPhone I noticed that the form seems to be top-aligning the text and ignoring the label width set during the form customization. The computer is not doing this. Is there a fix for that? 

    Thank You,

    Jeanette

  • Profile Image
    jeanettebmz
    Answered on April 10, 2012 at 04:36 PM

    Can you please change  position to "absolute"  but leave  scrolling to yes?

    I might also suggest you to install iCab into your iphone, as it seems to be a browser issue involved

    However,  I found that the height of the frame where the form is embedded is less than the height of the form it self

    So I would suggest you to change it to a higher number so the form might fit into it

    Jeanette

  • Profile Image
    jeanetteillidge
    Answered on April 10, 2012 at 05:14 PM

    Thanks Jeanette,

    Okay, my width and height were already the same on both. I made that change earlier. I have changed the positon back to absolute. 

    Here is my current code:

    <div style="position: absolute; z-index: 2; width: 470px; height: 440px; margin-top: -433px; margin-bottom: 0px; margin-right: 0px; margin-left: 150px;"><iframe allowtransparency="true" src="//form.jotform.us/form/20955693378165" frameborder="0" style="width:470px; height:440px; border:none;" scrolling="yes"></iframe></div>

    Additionally, if I install iCab it may solve my issue but what about visitors to my site who do not have this installed? They will still be viewing my contact form incorrectly... Most people won't have iCab installed.

    I'm sorry for the brain buster here and I appreciate all of your help thus far. Jotform is such a great service and I hope I will be able to use it.

    Thx,

    Jeanette

  • Profile Image
    jeanetteillidge
    Answered on April 10, 2012 at 05:30 PM

     

    I just tried it on iCab and it is doing the same thing. *weeps and pounds the floor*

    :o)

  • Profile Image
    jeanettebmz
    Answered on April 10, 2012 at 05:57 PM

    Hi again Jeanette!

    I have been doing some tests

    Try to adjust the code to something close to :

    <div style="position: absolute; z-index: 2; width: 470px; height: 650 px; margin-top: -433px; margin-bottom: 0px; margin-right: 0px; margin-left: 150px;"><iframe allowtransparency="true" src="//form.jotform.us/form/20955693378165" frameborder="0" style="width:470px; height:550 px; border:none;" scrolling="no"></iframe></div>

    So we probably might not need to set scrolling = yes. 

    Try with different heights making sure the main frame where the picture background is set, is higher than your form height.

    Otherwise, we might need to inject some custom CSS code into the form

    Jeanette

     


  • Profile Image
    jeanetteillidge
    Answered on April 10, 2012 at 06:19 PM

    LOL Jeanette!

    We were both trying the same exact thing. What I've discovered is that no matter how I change the height and width of the form the alignment is still doing its own thing. On all web browsers on my computer (Safari, Firefox, Google Chrome, IE7) the form looks great. Once I shift to my iPhone the alignment changes. It is top aligning where the text is supposed to be and changing width between the label and the text field: 

    screenshot

    I seriously appreciate your hard work. 

    ~Jeanette

  • Profile Image
    jeanettebmz
    Answered on April 10, 2012 at 06:44 PM

     

    Hi again,

    It is my pleasure to help. 

    Yes, I can see that, so you don't need to change the text, please revert it to previous code.

    Please try with this example ,  to inject custom CSS in your form ,  you might want to try different heights in px's  accordingly, until you get the desired look

     

    .form-all{

            height:550px !important;

            max-height:550px !important;

            min-height:550px !important;

            background:none repeat scroll 0 0 ;

                }


    Here you have a guide on how to inject the above custom CSS codes to your form

    The other idea that has just come into my head, is to set your image as background in your form, using CSS codes,  instead of using the HTML code of your page.

    Here I leave you the guide about how to accomplish it  and you probably might need to split your image in 2 parts

    Sooner or later, we will find the solution

    Jeanette

  • Profile Image
    jeanetteillidge
    Answered on April 10, 2012 at 10:29 PM

    Jeanette, 

    These were both such good ideas and I just knew that at least one of them would work but even inserting the image as a background using CSS didn't change the orientation issue. The text is still top aligning and the line width has been eliminated. ::sigh:: I'm giving up and going to bed. Hopefully tomorrow will bring a resolution. I have a feeling it's something really simple. That's usually how these stories end. :o)

    Thanks Again,

    Jeanette