Jump to content

Remove Captions & Add Placeholders On Contact Forms.

Recommended Posts

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?

Edited by shiDMV
Link to comment
  • Replies 1
  • Views 983
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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

How To Add Placeholder Text:

Screen Shot 2022-05-01 at 7.40.15 PM.png

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:

2099426858_ScreenShot2022-05-01at9_38_21PM.thumb.png.b43f90445e02b1f4a75c5c7d4c2c0e0a.png

<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:

2088453456_ScreenShot2022-05-01at8_57_32PM.thumb.png.c2d1f9e24e31ae565aba5b85310e04dd.png

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:

141405256_ScreenShot2022-05-01at9_31_10PM.thumb.png.1c015c5b4384fb2377fdbd43ea9f5c1f.png

Edited by shiDMV
Link to comment
  • shiDMV changed the title to Remove Captions & Add Placeholders On Contact Forms.

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.