Thoughts on situating a mobile-only conversion form?

Question

I have a Drupal 7 site. In desktop display, the site contains a sidebar contact form and in most mobile displays, this form goes down below the webpages and buffering between them and the footer (that's because the themeing - That's how it is sorted in the TPL files).

The existing state in which I have only this form is problematic if the webpages are very long so then mobile-users won't necessarily see the form.

What you think is the best SEO-friendly way to construct another extra form that will appear only in mobile devices and this time above the main content area?

Note:

If I'll construct an extra form, I could use the following exemplary CSS code:

media screen and (min-width: 768px) {
    #form2 {display:none;}
    }

I so ask for your opinion about this as I've read several times that Google (for example) "doesn't like" such instances in which you hide things with CSS and the robot easily finds this "problematic", sayings which I find odd and illogical. Moreover, I plan to add a second extra form (one in the midpoint of articles from certain content-types) and this one also is aimed mostly for mobile-users.

Would thank you for your thoughts,

Answer 1

Google does not find CSS and media queries problematic nor will it care if you have multiple forms, some that are hidden. Using display: none is perfectly valid with CSS3 viewpoint triggers.

However if you prefer you can even opt to use mobiledetect which uses:

if ( $detect->isMobile() ) {

}

if( $detect->isTablet() ){

}

} else {

}

Which will mean that you can load a different form for each platform, there is MobileDetect module for Drupal in the module Library.