How to change the placeholder text on an input element?

Changing the placeholder text
Styling the placeholder text for the entire project
Styling an individual placeholder using an ID
Styling an individual placeholder using a CSS class

Chancing the placeholder text

To change the placeholder text for an input field you just need to:

Select the input you want to edit
Go to the Right panel and in the Visual tab look for the HTML section.
Click the triangle icon to extend the dropdown if needed
Look for the Placeholder field and change the text

Styling the placeholder text for the entire project

To change the styling on an ALL the inputs in your project, go to Project Settings -> Custom code, and in the Head section add the following code snippet:

<style>
::-webkit-input-placeholder { 
  color: pink;
}
</style>

Change the color: pink; property in the example above to any CSS styling you want.

Styling an individual placeholder using an ID

To add an ID to your input, select the input element, go to the Right panel and in the HTML section add the name you want (ex: styled-placeholder) in the ID input.

Go to the Left panel, in the Elements tab and from the Media section drag the Embed Code element where your input is and paste the following code.

<style>
#styled-placeholder::-webkit-input-placeholder { 
  color: red;
}

</style>

The changes will not be visible when previewing the project. They will only be visible once the project is deployed.

Styling an individual placeholder using a CSS class

To add a CSS class to your input, select the input element, go to the Right panel and in the Classes section add the name you want (ex: styled-placeholder) in the input and create the class.

From the Left panel, in the Elements tab in the Media section drag the Embed Code element where your input is and paste the following code.

<style>
.styled-placeholder::-webkit-input-placeholder { 
  color: red;
}

</style>

The changes will not be visible when previewing the project. They will only be visible once the project is deployed.

Make sure to change the styled-placeholder text with the ID or CSS class that you set up beforehand.

Updated on: 16/01/2023