WordPress.org

Ready to get started?Download WordPress

Forums

Slick Contact Forms
[resolved] iPhone problem (17 posts)

  1. madziczyzna
    Member
    Posted 1 year ago #

    Hi,
    The plugin is great, and works perfectly for me, but I got a report that it creates problems for iPhone - "the box flashes as you scroll down
    the page", my visitor wrote.
    Any advice on that?
    My site is http://psychodynamiczen.org

    Thanks!

    http://wordpress.org/extend/plugins/slick-contact-forms/

  2. dathinaios
    Member
    Posted 1 year ago #

    Yes, I am having the same problem. The plugin also gets really big when zooming. Would it be possible to avoid having it scrolling down and magnifying maybe?

    EDIT: My site in case you want to check is dathin.net

  3. SweetPweb
    Member
    Posted 1 year ago #

    I'm having trouble with the form on iPhone as well. It is flashing open as I scroll down the page which obstructs the text.

  4. SweetPweb
    Member
    Posted 1 year ago #

    Issue does not replicate on the iPad, only on iPhone.
    http://www.DurangoWebDevelopment.com

  5. Daedalon
    Member
    Posted 1 year ago #

    I came here to report on the same problem. I've gotten verified user reports of the Slick Form covering most of their page on iPhone 4S, using iOS 6 and Safari with the latest updates.

    The issue seems to be with the code that should collapse the form on loading.

    With a different type of phone (waiting for info on what was the make and model) I've seen the same happen in a slightly different way: the form was not collapsed automatically and it was placed wrong. Instead of being in a CSS "fixed" position at eg. bottom right of the screen, it was located closer to widget area where it was loaded. The bottom of the expanded Slick Form was approximately where a computer browser window would have the 800-1000th horizontal row of pixels. Perhaps the placement was done in accordance to a somehow emulated browser window.

  6. Daedalon
    Member
    Posted 1 year ago #

  7. Daedalon
    Member
    Posted 1 year ago #

    http://mobile.tutsplus.com/tutorials/mobile-web-apps/ios-5-fixed-positioning-and-content-scrolling/ states that despite iOS 5 supporting fixed positioning, "there are still some good reasons to depend on third party libraries like iScroll."

    I don't have an iPhone to test with so can't really recommend one solution over another possible one yet. http://testiphone.com/ seems to emulate iPhone, but I'm not sure how well. I'll report back when I get some testing done with someone's iPhone.

  8. Daedalon
    Member
    Posted 1 year ago #

    I've now gotten the following test results:

    iPhone 4S, iOS 6 with latest updates, Safari: The feedback form is always open and displayed in the center of the screen instead of its proper position. With the small screen this is most counter-productive, so I'm considering a workaround for the plugin to display nothing for iPhone clients.

    iPhone 5, iOS 6.0.1 with latest updates, Safari: The same. User reported all iOS 5 versions should have the same CSS / JS support in regards to this.

    Nokia Lumia 710, Internet Explorer: The feedback form is always open and displayed in the widget area instead of its proper position.

  9. remix4
    Member
    Plugin Author

    Posted 1 year ago #

    @daedalon re Nokia Lumia - this indicates a javascript error elsewhere on the page that is preventing the jquery from loading

    To hide the form on mobiles you can add the following css to your responsive website media queries:

    .dc-contact-slick {display: none;}

  10. Daedalon
    Member
    Posted 1 year ago #

    Workaround: hide the widget completely for Safari on iPhone 4 and 5 and IEMobile 9.0 on Lumia 710.

    Open dcwp_slick_contact.php, locate line 13:

    global $registered_skins;

    and paste above it:

    // Custom: Don't display widget for mobile browsers with compatibility issues
    // 'iPhone3C' is the user agent for some iPhone 4 models, but not any iPhone 3 models. http://enterpriseios.com/wiki/Complete_List_of_iOS_User_Agent_Strings
    $user_agent = $_SERVER['HTTP_USER_AGENT'];
    if ( strpos( $user_agent, 'IEMobile/9.0; NOKIA; Lumia 710)' )
    	|| ( strpos( $user_agent, 'Safari' )
    		&& (
    			strpos( $user_agent, 'iPhone3C' )
    			|| strpos( $user_agent, 'iPhone4' )
    			|| strpos( $user_agent, 'iPhone5' )
    		)
    	) {
    	return;
    }

    You can test that it works by temporarily changing 'Lumia 710' to eg. 'Firefox', if you're using Firefox. The widget should disappear when you refresh (and clear the cache of any cache plugins you might use). Don't forget to restore the Lumia or no Firefox users would not see the widget. Feel free to tweak further and share your improvements.

  11. Daedalon
    Member
    Posted 1 year ago #

    Remix4: Thanks for the info. With any luck it's a JS bug in IEMobile9.0, and a later update will fix it for Lumia 710.

    The CSS workaround is more update-safe. It needs a separate declaration so that the setting is activated only for mobile clients, or even better, only the affected ones (iPhone 4 & 5: Safari; Lumia 710: IE9Mobile verified). The PHP solution I posted should limit the effect to the affected clients only and it provides a tiny bit better performance, but an update of the plugin would naturally erase it.

  12. SweetPweb
    Member
    Posted 1 year ago #

    Thank you Daedalon and Remix4 for all of your help and efforts.
    CSS tweak worked great for me as I am not as literate with PHP...

  13. Daedalon
    Member
    Posted 1 year ago #

    I've improved the PHP solution meanwhile. However, it seems that cache plugins such as WP Super Cache will render it mostly useless by sending the same page to all users.

    CSS solution has the advantage of working regardless of cache settings. Any recommendations on how to use the following CSS rule only for certain affected mobile browsers?

    .dc-contact-slick {display: none;}

  14. SweetPweb
    Member
    Posted 1 year ago #

    Not sure how to accomplish browser specific so had to base it on screen resolution...

    My theme has some responsive CSS declarations so, if yours does, you can place it in there... I have a few for different screen resolutions so I added the display: none; to all less than 768px:

    E.g.

    @media only screen and ( max-width: 767px ) {
    
    .dc-contact-slick {display: none;} 
    
    }
  15. Daedalon
    Member
    Posted 1 year ago #

    Thanks, SweetPweb. The theme I'm currently using, Elbee Elgee, doesn't have responsive declarations by default.

    Opera Mobile 12 on Nokia E71 with a 320 x 240 px screen shows the feedback form exactly as it should. But there are certain browsers that show it horribly wrong, such as Safari on iPhones (but not on Macs), so I'm looking for CSS or HTML that can be used to affect the display only on those exact problematic browsers.

    I'll be looking at jQuery Safari iPhone detection (search results) next, but if someone knows of a solution already, that'd be handy :)

  16. Daedalon
    Member
    Posted 1 year ago #

    JohnWilson1's message right above this one seems like spam to me.

  17. Daedalon
    Member
    Posted 1 year ago #

    There's another solution posted at http://wordpress.org/support/topic/hide-form-for-mobile-users:

    @media only screen and ( max-width: 479px ) {
      #dc-contact-2.dc-contact-slick .tab { display: none; }
    } /* This curly bracket was presumably missing from the original */

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags