Adding Placeholders to the Name and Phone Number fields

I have used the following code to try and inject the placeholder text into the form however its not working, any help would be greatly appreciated. 

<script>
(function() {
document.querySelector(".first-name input").setAttribute("placeholder", "First name");
document.querySelector(".last-name input").setAttribute("placeholder", "Last name");
document.querySelector(".phone input").setAttribute("placeholder", "Mobile Telephone No.");
})()
</script>

I also added the following to the header as well: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1 hour ago, KawebDev said:

I have used the following code to try and inject the placeholder text into the form however its not working

Sadly this won't work now because Form Blocks were updated in May 2023 to use React. See earlier threads for more background.

1 hour ago, KawebDev said:

I also added the following to the header as well: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Also, it is not necessary to add jQuery to the header when you are using pure JavaScript like the example you've quoted. Adding this will just slow your site down unnecessarily.

Is there any way to do the placeholders with a React friendly code instead?