Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Lightbox form: How to add form field placeholders?


mahpotofu

Question

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 by mahpotofu
Removed additional request
Link to comment

19 answers to this question

Recommended Posts

  • 2

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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
  • 0
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
  • 0

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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 by Verosie
Link to comment
  • 0

@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

Create an account or sign in to comment

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

×
×
  • Create New...