Remove Captions & Add Placeholders On Contact Forms.

Hey everyone!

I'm having trouble with the formatting for the contact form. Is there a way to remove section captions from the contact form and add place holders for each of the boxes instead? Squarespace doesn't offer the option to do this in the config for the name, phone, & date sections.

Any suggestions?

EDIT: NO LONGER WORKING WITH FORM UPDATE - 12/26/2023

How To Add Placeholder Text:

Add the following to Settings > Advanced > Code Injection > Header.

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

Add the following to Page Settings > Advanced > Page Header Code Injection for the page with the contact form. Replace the text "Replace With FormID" with the form id from inspect element.

See how it looks below:

<script>
  $( ( ) => {
    
    /* @CREEDON */
    
    const dataFormId = 'Replace With FormID';
    const firstNamePlaceholderText = 'First Name';
    const lastNamePlaceholderText = 'Last Name';
    const monthPlaceholderText = 'MM';
    const dayPlaceholderText = 'DD';
    const yearPlaceholderText = 'YYYY';
    
    let $form = $( '[data-form-id="' + dataFormId + '"]' );
    
    $( '.first-name input', $form )
    
      .attr ( 'placeholder', firstNamePlaceholderText );
      
    $( '.last-name input', $form )
    
      .attr ( 'placeholder', lastNamePlaceholderText );
    
    $( '.phone .three-digits input', $form )

  	  .attr ( 'placeholder', '###' );
  
    $( '.phone .three-digits input', $form )

      .attr ( 'placeholder', '###' );
  
    $( '.phone .four-digits input', $form )

      .attr ( 'placeholder', '####' );
    
    $( '.month input', $form )
      .attr ( 'placeholder', monthPlaceholderText );
    $( '.day input', $form )
      .attr ( 'placeholder', dayPlaceholderText );
    $( '.year input', $form )
      .attr ( 'placeholder', yearPlaceholderText );
    } );
    
  </script>

How To Remove Caption Text:

Add to Design > Custom CSS. Replace "#Collection-ID" with the collection id for the page that you're targeting.

/* Contact Form Caption Text - @shiDMV */
#Collection-ID {
.form-wrapper .field-list .field .caption .caption-text {
  display: none;
  }
}

Download the Squarespace Collection/Block Identifier Chrome Extension to view a page's collection id.

See how it looks below: