Optimize Form to work on Mobile website and Mainsite simultaneously

  • Profile Image
    virtualearth
    Asked on March 30, 2012 at 04:49 PM

    New Patient Form

    Mobile URL:  http://www.cityclinic.mobi/forms.aspx?s=2
    Main site URL: http://www.cityclinic.com.au/new-patient-form 

    How do I make this form work on both our mobile website and our mainsite?

    Up to now we have been making two forms with different widths to fit, one for our mobi site and and one for mainsite. From the articles in support it appears we shouldn't have to do this so I guess we are doing something wrong.

    We have now written an API to autopopulate our CRM when the form arrives on our server and would like to use a single form to suit both the mainsite and mobi site.

    With some forms we can do this by adjusting the width however for most of our forms we can't.

    In the above New Patient Form the Address field, html field (see: select the health professional you are seeing / Naturopath - Kathy Harmer. This will show html field) and some other fields run over the page.

    Appreciate your input.

    Kind regards

    Brad




     

  • Profile Image
    NeilVicente
    Answered on March 30, 2012 at 07:01 PM

    Brad,

    May I know which mobile device in particular do you have in mind when you designed your mobile site? It seems to me that 320px is too small an allowance for a mobile device's screen. I mean, even iPhone and Android devices have at least 480 pixels-wide resolution. Of course, that's just my opinion.

    Anyway, making this particular form fit in your mobile site requires the following:

    -  Decreasing text box and drop down sizes
    -  Moving some fields to a new line
    -  Injecting custom css to decrease the width of the address field's sub-fields
    -  Re-writing your Free Text HTML so that it does not run over the mobile site's width

    The above tasks apply on a per-form basis, so that means we will have to work on individual forms separately.

    Increasing the mobile site's width will probably be the best solution for ALL your forms, but if you're not up for it, let me know so we can come up with adjustments to this specific form.

  • Profile Image
    virtualearth
    Answered on March 30, 2012 at 07:24 PM

    Hi Neil,

    The mobile site was built for iPhone a couple of years ago. Probably easier to adjust the site width which unfortuantely I don't know how to do. I'm guessing it must be in the css somewhere. Is it just a matter of changing to 480px or do you think that will effect other stuff on the site?

    Cheers

    Brad

  • Profile Image
    NeilVicente
    Answered on March 30, 2012 at 08:04 PM

    I am not sure if this would work, but try changing the current values in your mobile site's CSS file (site.css) to the following:

    .inner {
    width: 480px;
    }

    .inner .header {
    width: 480px;
    }
    .inner .title {
    width: 480px;
    }
    .inner .contentblock {
    width: 453px;
    }

    .inner .footer {
    width: 453px;

    }

    Let me know if it helps or not.

  • Profile Image
    virtualearth
    Answered on March 30, 2012 at 08:33 PM

    Thanks for this Neil,

    I just had a quick look at the CSS and there are images set at 320 and smaller. I have resized some of the main images to 480 however float and padding values would also likely need changing. I am a bit of a hack when it comes to coding usually confined to very simple stuff in our mainsite CMS.

    You can see the CSS here: http://cityclinic.mobi/styles/Site.css

    If it is going to be more adding some code and uploading resized images then I had better hire a developer to do it.

    Let me know your thoughts.

    Cheers

    Brad 

  • Profile Image
    liyam
    Answered on March 31, 2012 at 12:30 AM

    I'm not sure if this can help but you can try this style example:

    @media handheld { input, select, textarea { size: 9px; }
      label { font-size: 10px; }
    }

    This type of styling is read by most handheld device browsers  (except apple based devices), so probably you can try inserting a CSS code like this to specifically fit the 320px width in your mobile device.

  • Profile Image
    NeilVicente
    Answered on March 31, 2012 at 02:16 AM

    Brad,

    I did some testing using Firebug, and the only problem I encountered when I applied the CSS changes I proposed is that the header image repeated horizontally:

    Since you admitted yourself that the mobile site was created years ago, I think it would be best to hire a developer to update its design to keep up with today's mobile technology.

  • Profile Image
    markashton
    Answered on April 24, 2012 at 02:07 PM

    @Liyam 31 March states ...

    I'm not sure if this can help but you can try this style example:

    @media handheld { input, select, textarea { size: 9px; }
      label { font-size: 10px; }
    }

    This type of styling is read by most handheld device browsers  (except apple based devices), so probably you can try inserting a CSS code like this to specifically fit the 320px width in your mobile device.

    Anyone in the entire world who can enter that into jotform Inject CSS without the @ symbol turning into //

    My question to Liyam is ... did you test this in the most rudimentary way?

    I'd be grateful to know

  • Profile Image
    idarktech
    Answered on April 25, 2012 at 01:19 AM

    @markashton,

    Hello,

    Yes, it's not possible with Custom CSS Injection but it's possible using form's source code. What my colleague trying to say is to add his CSS codes on the user's existing CSS. http://cityclinic.mobi/styles/Site.css

    Hope this contribues. Thanks for your message. Have a great day to you!

  • Profile Image
    markashton
    Answered on April 25, 2012 at 04:34 AM

    Hi,

    This thread "Optimize Form to work on Mobile website and Mainsite simultaneously" is exactly what I am trying to achieve. 

    I'm suprised this topic hasn't had more airplay really ... I mean I'm often thinking ... Ok that would be great if it would work on a mobile and desktop  ...the same form.

    Could I ask this please ...

    "Is the custom CSS injection not possible for mobile purely down to the fact that the injection area turns the @ symbol, neccessary for media queries, into a double slash //  ?"

    Thanks, please let me know ;) 

  • Profile Image
    jonathan
    Answered on April 25, 2012 at 08:45 AM

    Hi Mark,

    "Is the custom CSS injection not possible for mobile purely down to the fact that the injection area turns the @ symbol, neccessary for media queries, into a double slash //  ?"

    I believe this part was already answered by Mike_T on the other thread, and I know that it was already forwarded to our dev team for them to re-evaluate.

    Thank you for all the input.


  • Profile Image
    aytekin
    Answered on January 22, 2013 at 03:19 AM

    This issue is now resolved. You can now use at-sign "@" in the Custom Inject CSS.