### [How to Change the Tab Order Inside the Layout Field](https://wpforms.com/developers/how-to-change-the-tab-order-inside-the-layout-field/)

**Published:** August 1, 2023
**Author:** Editorial Team

**Excerpt:** In this tutorial, we'll show you how you can change the tab order of the fields that are inside the Layout field using a small JavaScript snippet. 

**Content:**

## Introduction

Are you using the **Layout** field and would like to change the tab order? By default, the tabbing sequence for this field proceeds through all the left-side fields before moving to the right-side ones. In just a few simple steps, we’ll demonstrate how to customize the tab order effortlessly using a JavaScript snippet. Let’s get started!

## Creating the form

To begin, we’ll create a new form using the **Layout** field. If you need any assistance with this, [please check out this useful documentation](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/ "Using the Layout Field").

For the purpose of this documentation, we’ve added the **Name**, **Email**, **Phone**, and a few other fields inside our **Layout** field.

![before you can change the tab order of the layout field, you must first add fields to this section in your form](https://wpforms.com/wp-content/uploads/2023/08/changing-tab-order-layout-field-create-form.jpg)

## Adding the snippet

Once the form is created, you’ll need to add this snippet to your site.

If you need any assistance with how and where to add snippets to your site, [please visit this tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

```

/**
* Change tab order inside layout field
*
* @link https://wpforms.com/developers/how-to-change-the-tab-order-inside-the-layout-field/
*/

function wpf_dev_change_layout_field_tab_order( ) {
?>

**Categories:** Tutorials

**Tags:** Javascript, JS, Layout Field

---