mahpotofu Posted February 10, 2021 Share Posted February 10, 2021 (edited) Site URL: https://seal-reindeer-3la9.squarespace.com/contact Hello! For layout purposes, I chose to hide the captions "First name" and "Last name" on the lightbox form. Since I hid those, I would like to add placeholder texts for those fields as "First" and "Last" respectively. Would this be with jQuery? I attempted and failed because I could not figure out how to target these fields... Any advice would be much appreciated. Thank you so much for your time! pw: sqspcontacttest Edited February 10, 2021 by mahpotofu Removed additional request Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 Hi. Have you found the solution yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
mahpotofu Posted February 16, 2021 Author Share Posted February 16, 2021 Hello, thank you for your response! No I have not 😞 Link to comment
ArminB Posted February 16, 2021 Share Posted February 16, 2021 this should help: About Armin: Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084 Website: www.braunsberger-media.com Link to comment
mahpotofu Posted February 16, 2021 Author Share Posted February 16, 2021 Hi ArminB, thanks for your comment! I did read through the article, but I'm not sure which block-yui and field selector I use to target the lightbox name field. Since I'm on Chrome, I right-click inspected, but I can't seem to get the block-yui right (it's different from the newsletter one as in the example, but there's multiple when I inspect the lightbox form). Link to comment
Solution creedon Posted February 17, 2021 Solution Share Posted February 17, 2021 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 contact page. <script> $( ( ) => { /* add placeholder text to first and last name fields in "Get in touch!" form for v7.1 site. SS version : 7.1 */ const dataFormId = '601ced4f7050527e47ff6076'; const firstNamePlaceholderText = 'first'; const lastNamePlaceholderText = 'last'; // do not change anything below, there be the borg here let $form = $( '[data-form-id="' + dataFormId + '"]' ); $( '.first-name input', $form ) .attr ( 'placeholder', firstNamePlaceholderText ); $( '.last-name input', $form ) .attr ( 'placeholder', lastNamePlaceholderText ); } ); </script> Let us know how it goes. Chris_SQSP, kyleigh.wentworth and mahpotofu 3 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
mahpotofu Posted February 17, 2021 Author Share Posted February 17, 2021 Creedon sir, it works marvelously! Much gratitude for your magic. Thank you all for your time! Chris_SQSP and creedon 1 1 Link to comment
kyleigh.wentworth Posted April 30, 2021 Share Posted April 30, 2021 On 2/16/2021 at 7:12 PM, creedon said: 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 contact page. <script> $( ( ) => { /* add placeholder text to first and last name fields in "Get in touch!" form for v7.1 site. SS version : 7.1 */ const dataFormId = '601ced4f7050527e47ff6076'; const firstNamePlaceholderText = 'first'; const lastNamePlaceholderText = 'last'; // do not change anything below, there be the borg here let $form = $( '[data-form-id="' + dataFormId + '"]' ); $( '.first-name input', $form ) .attr ( 'placeholder', firstNamePlaceholderText ); $( '.last-name input', $form ) .attr ( 'placeholder', lastNamePlaceholderText ); } ); </script> Let us know how it goes. Not to bring back a dead thread, but I was able to adjust this code to work for my form and I have a few extra fields in mine. Names, Email, Phone, Date. I was able to add the bit for email placeholder and even phone, but was wondering if there was a way to target the individual phone inputs? I'd like to have "###" in the first two and "####" in the last box to indicate the number of digits accepted. Would want to do the same with date "MM" "DD" "YYYY" but could probably figure that out from the format of the phone one, if it's even possible. Link to comment
creedon Posted April 30, 2021 Share Posted April 30, 2021 @kyleigh.wentworth Give this a try. $( '.phone .two-digits input', $form ) .attr ( 'placeholder', '##' ); $( '.phone .three-digits input', $form ) .attr ( 'placeholder', '###' ); $( '.phone .four-digits input', $form ) .attr ( 'placeholder', '####' ); Let us know how it goes. kyleigh.wentworth 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
kyleigh.wentworth Posted May 1, 2021 Share Posted May 1, 2021 @creedon Worked PERFECTLY!! And was able to get the date fields as well. THANK. YOU SO MUCH! creedon 1 Link to comment
Chele Posted July 28, 2021 Share Posted July 28, 2021 Hm. Didn't work for me for some reason. Am I correct that I enter the jquery code into Advanced>Header then put on the page Advanced code area the code? Nothing is coming up in the boxes. Not sure what I'm doing wrong. 🤔 Link to comment
creedon Posted July 29, 2021 Share Posted July 29, 2021 11 hours ago, Chele said: Am I correct that I enter the jquery code into Advanced>Header then put on the page Advanced code area the code? Sounds like you did it right. Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. Chele 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Verosie Posted July 29, 2021 Share Posted July 29, 2021 (edited) I'm actually struggling with this right now as well. I'm trying to get MM, DD and YYYY in the date fields of the Top footer form in my 7.0 site. Trying to go off of everything in this thread and update it for the date field, but failing so far. Thanks in advance for any help! 🙂 https://www.scoopstationnj.com/flavors **Actually updating my post now, I just got it to work!!! Thanks for all your above info and advice on this topic! 🤗 Edited July 29, 2021 by Verosie Link to comment
creedon Posted July 29, 2021 Share Posted July 29, 2021 @Verosie Two issues. Your script has a syntax error. Change the following from... </script> ...to... } ); </script> You need to change the dataFormId variable. Set it like the following. const dataFormId = '6102dce95c4a20491d6d9534'; Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Verosie Posted July 29, 2021 Share Posted July 29, 2021 (edited) @creedon Thank you, that worked! But I can't figure out why my Month field is displaying 'DD' instead of 'MM'. Any ideas? Edited July 29, 2021 by Verosie Link to comment
creedon Posted July 30, 2021 Share Posted July 30, 2021 @Verosie You need to change the following line... $( '.date input', $form ) ...to... $( '.day input', $form ) Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Verosie Posted July 30, 2021 Share Posted July 30, 2021 @creedon You are wonderful thank you so much for your help! It worked!! I was also able to utilize this on another form here: https://www.scoopstationnj.com/partypackages Thank you thank you! creedon 1 Link to comment
Chele Posted August 7, 2021 Share Posted August 7, 2021 @creedonThank you for responding 🙂 I couldn't figure out what I was doing wrong so i did a workaround instead. I just added one text box for first name and another for last name. My goal was to take off all the titles so it just had the direction of what to type as the placeholder (like it is now) but I was having trouble with the phone and name areas as they seem to be only programmed with the title with no option for putting a place holder. Here is the site: https://lodeware.squarespace.com/ Pass: lodeware I tried it on this page (at the bottom) but can't seem to get it to work: https://lodeware.squarespace.com/design-page Thanks so much. Link to comment
creedon Posted August 7, 2021 Share Posted August 7, 2021 @Chele You need to change the dataFormId to 610e4329c1b8266a7c1d8569. Let us know how it goes. Verosie 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Chele Posted August 17, 2021 Share Posted August 17, 2021 @creedonI see! It worked. Thank you! I was using the Section ID I think. Thank you very much! creedon 1 Link to comment
Shan1234 Posted November 17, 2022 Share Posted November 17, 2022 is there any way to do this without having the premium plan? Link to comment
creedon Posted November 17, 2022 Share Posted November 17, 2022 29 minutes ago, Shan1234 said: is there any way to do this without having the premium plan? No. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
WayneL Posted January 30, 2023 Share Posted January 30, 2023 On 2/16/2021 at 7:12 PM, creedon said: 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 contact page. <script> $( ( ) => { /* add placeholder text to first and last name fields in "Get in touch!" form for v7.1 site. SS version : 7.1 */ const dataFormId = '601ced4f7050527e47ff6076'; const firstNamePlaceholderText = 'first'; const lastNamePlaceholderText = 'last'; // do not change anything below, there be the borg here let $form = $( '[data-form-id="' + dataFormId + '"]' ); $( '.first-name input', $form ) .attr ( 'placeholder', firstNamePlaceholderText ); $( '.last-name input', $form ) .attr ( 'placeholder', lastNamePlaceholderText ); } ); </script> Let us know how it goes. Hi, I just can't seem to get this working. What ID is used to set the dataFormId? I've tried Block Id, section ID, Collection Id... what should it be? Link to comment
WayneL Posted January 30, 2023 Share Posted January 30, 2023 I FINALLY found the ID!!! Progress!!!! Thanks creedon 1 Link to comment
TWBDesign Posted May 11, 2023 Share Posted May 11, 2023 On 1/30/2023 at 8:32 PM, WayneL said: I FINALLY found the ID!!! Progress!!!! Thanks Any chance you could share how to find the elusive dataFormID?? Thanks! 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