Autofocus on button click

Design help Animations & Interactions
1

I have a mobile layout where there is a signup button on top. On click of this button, the user is scrolled to an email form. I’d the email for to focus once the user is scrolled to the form. Any suggestions on how to achieve this?

Here is my public share link: [https://preview.webflow.com/preview/betcha?utm_medium=preview_link&utm_source=dashboard&utm_content=betcha&preview=d27aa725287f3678c76e358ccebb207d&mode=preview][1]

2

Hi Matthew, Welcome to the forum :webflow_heart:

You can add this to your custom code section:

<script>
$('.SignUpMobile').click(function () {
    $('#email3').focus();
}); 
</script>
1 Like
3

Thanks @avivtech ! That seems to have worked.

4

@avivtech
can you offer explaination on the code. I’m trying somthing similar but the hash # location isn’t autofocusing? Is it based on the ID field?

image

5

Hi @miekwave,
Yea, the # is the HTML ID sign.

1 Like
7

Thanks @avivtech — Works great when the input field is on the same page as the link.

But what if the link is on a different page?

We’d have to add window.location.href to the script… But how?

8

Hi Dean,

This could be solved with a regular link to the page you want, and check the autofocus on the input field.

9

Cheers — That is definitely one way to do it. Just load the autofocus on the target page, and some conditions for when it will show (for example, the source page of the link)