How can I load a Webflow page at the bottom without using a form field set to autofocus, or disable the keyboard for auto-focused forms on mobile?

Published on
September 22, 2023

To load a Webflow page at the bottom without using a form field set to autofocus or disabling the keyboard for auto-focused forms on mobile, you can follow these steps:

  1. Select the body element: In the Webflow Designer, select the body element in the Navigator panel (located on the left-hand side of the Designer).

  2. Add a new custom attribute: With the body element selected, click on the plus icon next to "Attributes" in the settings panel on the right side of the Designer. In the custom attributes section, click on "Add Attribute" and enter the following attribute:

  • Name: tabindex

  • Value: -1

    This tabindex attribute allows you to add focus to an element other than a form field.

  1. Add a "div" element: Drag and drop a new div element into your page layout, preferably at the bottom of the page.

  2. Set the "div" element to be focusable: With the div element selected, go to the settings panel and under "Focus Settings," check the box next to "Focusable."

  3. Apply a unique class to the div element: Give the div element a unique class name to identify it. You can do this in the settings panel under the "Class" field.

  4. Create a new JavaScript function: In the Webflow Designer, go to the Page Settings panel by clicking on the gear icon at the top of the Designer. Then select the "Custom Code" tab and scroll down to the "Footer Code" section. Add the following JavaScript code inside a script tag:

    ```javascript

    ```

    Make sure to replace .your-div-class-name with the actual class name you assigned to the div element in step 5.

  5. Publish and test: Save your changes, publish your site, and test it on various devices. The page should load with focus on the div element you specified, effectively loading the page at the bottom.

By following these steps, you can load a Webflow page at the bottom without relying on a form field set to autofocus or disabling the keyboard for auto-focused forms on mobile.

Additional Questions:

  1. How can I set focus to an element other than a form field in Webflow?
  2. Is it possible to load a Webflow page at the bottom without using JavaScript?
  3. Can I disable auto-focus on mobile devices for specific form fields in Webflow?