shiDMV Posted May 1, 2022 Share Posted May 1, 2022 (edited) 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 May 2, 2022 by shiDMV Link to comment
Solution shiDMV Posted May 1, 2022 Author Solution Share Posted May 1, 2022 (edited) Hey everyone, I found the solutions for both of these problems! 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: Edited May 2, 2022 by shiDMV Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment