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
Go to solution Solved by creedon,

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 post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 followi

Creedon sir, it works marvelously! Much gratitude for your magic.   Thank you all for your time!

6 answers to this question

Recommended Posts

  • 1

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

Create an account or sign in to comment

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


×
×
  • Create New...