### [How to Add Autofocus on Your Form](https://wpforms.com/developers/how-to-add-autofocus-on-your-form/)

**Published:** December 15, 2020
**Author:** Editorial Team

**Excerpt:** This tutorial will walk you through how to use JavaScript to have the cursor autofocus inside the first form field when your page loads. 

**Content:**

Are you interested in enabling auto focus on your form to enhance user experience? With auto focus, the cursor automatically activates inside the first form field when the page finishes loading, streamlining user interaction. This simple enhancement can be achieved with a JavaScript code snippet, and we’ll guide you through the process.

## Creating your form

First, you’ll need to start by creating your form and adding your form fields. If you need any help in creating a form, [please see this documentation](https://wpforms.com/docs/creating-first-form/ "How to Create Your First Form").

![start by creating your form](https://wpforms.com/wp-content/uploads/2020/12/wpforms-autofocus-create-form.jpg)

## Creating the snippet to add autofocus

Next, you’ll need to add this code snippet to your site.

If you need help in adding snippets to your site, [please see this tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

```

/**
 * Add autofocus to the first form field of the form
 *
 * @link https://wpforms.com/developers/how-to-add-autofocus-on-your-form/
 */

function wpf_dev_autofocus() {
?>

**Categories:** Fields

**Tags:** Javascript, JS

---