### [How to Disable the Space Key Inside a Form Field](https://wpforms.com/developers/how-to-disable-the-space-key-inside-a-form-field/)

**Published:** March 29, 2022
**Author:** Umair Majeed

**Excerpt:** This tutorial will walk you through how you can easily disable the space key in any form field with a CSS class name and a small JavaScript snippet. 

**Content:**

Would you like to prevent users from entering spaces in certain form fields? This can be useful for usernames, email addresses, or other fields where spaces might cause issues.

This guide will show you how to disable the space key in specific form fields using a CSS class and simple JavaScript.

## Understanding the Need

When creating forms that require specific input formats, like usernames or codes, preventing spaces can help maintain data integrity. For example, in a user registration form, you might want usernames without spaces to ensure consistent login credentials.

## Setting Up Your Form

First, create your form and add the fields where you want to disable the space key. If you need help creating a form, please see our guide on [creating your first form](https://wpforms.com/docs/creating-first-form/).

For the purpose of this tutorial, we’re going to be creating a user registration form in which our visitors can set their own usernames. Since this will be what they use to log into our site, we don’t want to allow any spaces in this field.

We’ll start by adding a **Single Line Text** form field. Once added, we’re going to add a specific class name that we’ll use in our snippet to trigger the script to run.

Just add the `wpf-disable-space` to the **CSS Classes** field on the **Advanced** tab.

![Just add the CSS class of wpf-disable-space to the  CSS Classes field on the Advanced tab.](https://wpforms.com/wp-content/uploads/2022/03/wpforms-css-classname-advanced-tab.jpg)## Disabling the Space Key

Now it’s time to add the snippet to our site.

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

The `event.key` in the snippet followed by the three equals sign represents a specific keyboard key pressed. For the space bar, the key is just an empty space.

If you’d like a complete list of other special numerical representations, [please check out this article](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values "Mozilla Documentation on Key Values").

Now when the user tries to enter the **Username** field of our form, they will not be able to enter a space for the **Username**.

All you need to do for all future forms is only add the special CSS class name to the **CSS Classes** field in the **Advanced** tab of the field while inside the form builder.

And that’s it! You’ve successfully disabled the space key inside your form field! Next, would you like to prevent any special characters inside a form field? Check out our tutorial on [How to Restrict Special Characters From a Form Field](https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/ "How to Restrict Special Characters From a Form Field").

## Reference Action

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Using the wpforms_wp_footer_end action")

**Categories:** Fields

**Tags:** Javascript, JS

---