How to reference a part of the page that could be below or to the right

Question

I've got a basic contact form (not currently "live"; it won't actually submit), which has a small area of the page as a description of "how to contact us". In this section, I reference the contact form as "The contact form on the right", but on mobile devices the contact form is below, so I have 2 spans that are hidden/shown based on the size of the screen. If you shrink the screen, the text will change to "The contact form below" and provide a link to the contact form element.

How do I mark this up correctly, namely for users who are using a screenreader/SEO? I am aware that I could simply change the text to "The contact form on this page", but I also provide a link to the contact form for mobile users, meaning it should also add to the usability. If my idea of 2 different pieces of text in spans is absurd and I should just use a single "on this page" type option, I will accept that as an answer, but I would like to look in to the mixed option.

Answer 1

The responsive text is a thorny road to travel. Not only is there the screen size issue, you also need to correct for font size, orientation, and language direction.

In my opinion, you should eliminate the text altogether. A user who sees the form will immediately know it's for contact based on the nature of the page and the fields requested.

If you must keep the text, let it read "Complete our contact form". Let it be an in-page link to the form. Ie:

<ul id='contact_options'>
<li><a href='#contact'>Complete our contact form</a></li>
</ul>
...
<form id='contact'>
</form>