Lightbox form: How to add form field placeholders?

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

Hi. Have you found the solution yet?

Hello, thank you for your response! No I have not 😞

this should help:

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). 

Creedon sir, it works marvelously! Much gratitude for your magic.

Thank you all for your time!

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.

@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.

@creedon Worked PERFECTLY!! And was able to get the date fields as well. THANK. YOU SO MUCH!

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. 🤔

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.

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! 🤗

@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.

@creedon Thank you, that worked! But I can't figure out why my Month field is displaying 'DD' instead of 'MM'. Any ideas?

@Verosie

You need to change the following line...

$( '.date input', $form )

...to...

$( '.day input', $form )

Let us know how it goes.

@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! 

@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.

@Chele

You need to change the dataFormId to 610e4329c1b8266a7c1d8569.

Let us know how it goes.

@creedonI see! It worked. Thank you! I was using the Section ID I think. Thank you very much!

is there any way to do this without having the premium plan? 

29 minutes ago, Shan1234 said:

is there any way to do this without having the premium plan?

No.

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?

I FINALLY found the ID!!! Progress!!!! Thanks

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!