Hello. 

I'd like to add placeholder text for first name and last name in the fields as is shown in the your email field below. I know I can add a label, but then the boxes don't align. Can someone help me with some code to add the placeholders? 

3 minutes ago, triciabateman said:

Hello. 

I'd like to add placeholder text for first name and last name in the fields as is shown in the your email field below. I know I can add a label, but then the boxes don't align. Can someone help me with some code to add the placeholders? 

Can you share your website URL?

It's not published yet.

If you use the latest Localized Forms, you can use the below code
 

<script>

    /*
        In case you want to make immediate modifications on the form with the above methods.
        We need to check when the Squarespace React form was added
    */

    // 1. targetNode is the container or the form. If you have multiple forms, make sure to target the ".form-block" of that individual form.
    // 2. Inside the function startMyChangesOnTheForm(), put the code that makes changes on the form
    
    document.addEventListener("DOMContentLoaded", function(){

        var targetNode = document.querySelector('.form-block');

        // Options for the observer (which mutations to observe)
        var config = { childList: true, subtree: true };

        // Callback function to execute when mutations are observed
        var callback = (mutationList, observer) => {    
            mutationList.forEach(mutation => {
                // debugger;
                if( mutation.addedNodes.length ) {
                    mutation.addedNodes.forEach(addedNode => {
                        if(addedNode.classList.contains("react-form-contents")){
                            console.warn("Found react form mutation");
                            observer.disconnect();
                            startMyChangesOnTheForm();
                        }
                    });
                }
            });
            
        };

        // Create an observer instance linked to the callback function
        const observer = new MutationObserver(callback);
        // Start observing the target node for configured mutations
        observer.observe(targetNode, config);


        // Here is where we can add our code that will make changes to the form
        function startMyChangesOnTheForm() {
            var form           = document.querySelector(".react-form-contents"),
                firstNameInput = form.querySelector("[id*='fname-field']"),
                lastNameInput  = form.querySelector("[id*='lname-field']");

			firstNameInput.setAttribute("placeholder", "First Name");
            lastNameInput.setAttribute("placeholder", "Last Name");

        }

    });
</script>

This code is based on this code https://github.com/sorcamarian/squarespace-tricks/blob/main/Forms/modify-localized-form-input-with-javascript.html

I have a video about it in case you are interested

I've got the site mostly complete and published it. Here's the link. 

https://mountainaccessbrigade.org

On 12/21/2023 at 8:58 PM, triciabateman said:

I've got the site mostly complete and published it. Here's the link. 

https://mountainaccessbrigade.org

Have you tried above code yet? Or it doesn't work?