Auto Focus the first element in the popup when it opens

  • Resolved harryhorss

    (@harryhorss)


    8 years ago

    Hi,

    Unfortunately this function does not work, I’m unable to successfully autofocus to the first field of any contact form using your plugin. I’ve scoured the web for a solution and unfortunately cannot find any support tickets or instructions on using the autofocus feature.

    Can you please advise where I can activate this setting?

    I’ve even tried adding additional scripts to the header such as:

    <script type=”text/javascript”>
    jQuery(document).ready(function($) { jQuery(‘.wpcf7-text:first’).focus(); });
    </script>

    Still, no matter what I do the contact form refuses to automatically select the first field with the mouse cursor.

    Kind Regards,

Viewing 4 replies - 1 through 4 (of 4 total)
  • waltmesser

    (@waltmesser)

    @harryhorss

    Sorry you’re having difficulties, I’m sure we can this resolved.

    Is this something you can do with these form builders when the forms are just embedded in the page as normal?

    Let us know if you can accomplish this just on a page, and that it’s indeed the popup causing the issue.

    Thank you for being patient.

    Thread Starter harryhorss

    (@harryhorss)

    Hi Walter,

    I noticed in your plugin description that you wrote:
    “Auto Focus the first element in the popup when it opens”

    Does this mean the popup maker should already be autofocusing without the need for my own custom script? If so, can you please advise me how I can activate it? Does the plugin have an autofocus feature or was the description above related to something else?

    My experience: When the form is embedded into the page (not in the pop-up maker), then using jQuery I can script autofocus on page load and it works, because the form is exposed during page load.

    However, with the popup maker being trigger by a button press as an overlay, it results in the form initially being hidden on page load (thus the autofocus script I have does not work, as the form loads after the button press action and not when the page loads)

    See the code showing the hidden element:

    <div style=”display: none;”>
    <input type=”hidden” name=”_wpcf7″ value=”6711″>
    <input type=”hidden” name=”_wpcf7_version” value=”4.6″>
    <input type=”hidden” name=”_wpcf7_locale” value=”en_US”>
    <input type=”hidden” name=”_wpcf7_unit_tag” value=”wpcf7-f6711-o3″>
    <input type=”hidden” name=”_wpnonce” value=”b8d7b3439a”>
    <input type=”hidden” name=”_wpcf7cf_hidden_group_fields” value=””>
    <input type=”hidden” name=”_wpcf7cf_hidden_groups” value=””>
    <input type=”hidden” name=”_wpcf7cf_visible_groups” value=””>
    </div>

    I really appreciate the time you have spent assisting me.

    Plugin Author Daniel Iser

    (@danieliser)

    @harryhorss – That feature is for Accessibility more than anything. It does focus the first focusable element in the popup. This could be a paragraph of text though since screenreaders need to start there. That 100% refers to screenreader compatibility. If you want to focus on a specific field that is not the first element in the popup then you would need to write some code to handle that.

    Hope that helps.

    waltmesser

    (@waltmesser)

    Closing this ticket due to inactivity. If you’re still having an issue, create a new thread, link this one, and we will continue troubleshooting.

    Please take a moment to rate and review our plugin and/or support.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Auto Focus the first element in the popup when it opens’ is closed to new replies.