Form fields title inside the field itself

Site URL: https://www.ajpgroup.com/contact-us

Hi, I'd like to know if its possible to have the form field titles show inside the fields themselves until your start typing as shown in the picture below. And if possible, can someone show me how i can do it. Thank you!

2 hours ago, AJPerformance said:

Site URL: https://www.ajpgroup.com/contact-us

Hi, I'd like to know if its possible to have the form field titles show inside the fields themselves until your start typing as shown in the picture below. And if possible, can someone show me how i can do it. Thank you!

I think we can achieve it with some Js code to set placeholder for input element

14 hours ago, bangank36 said:

I think we can achieve it with some Js code to set placeholder for input element

im not very versed with Js so if you dont mind, can you help me figure it out please? 

29 minutes ago, AJPerformance said:

im not very versed with Js so if you dont mind, can you help me figure it out please? 

You can try the following code in Home > Settings > Advanced > Code Injection, choose the footer

<script>
  (function() {
    window.addEventListener('DOMContentLoaded', () => {
      const placeholders = document.querySelectorAll('.field');
      if(placeholders.length) {
        placeholders.forEach(holder => {
          const inputEl = holder.querySelector('input, textarea.field-element');
          const labelEl = holder.querySelector('.caption-text, .title').innerText;
          if(inputEl && labelEl) {
            inputEl.setAttribute('placeholder', labelEl);
          }
        })
      }
    });
  })()
</script>

Let me know how it works on your site

My testing

2 hours ago, bangank36 said:

You can try the following code in Home > Settings > Advanced > Code Injection, choose the footer

<script>
  (function() {
    window.addEventListener('DOMContentLoaded', () => {
      const placeholders = document.querySelectorAll('.field');
      if(placeholders.length) {
        placeholders.forEach(holder => {
          const inputEl = holder.querySelector('input, textarea.field-element');
          const labelEl = holder.querySelector('.caption-text, .title').innerText;
          if(inputEl && labelEl) {
            inputEl.setAttribute('placeholder', labelEl);
          }
        })
      }
    });
  })()
</script>

Let me know how it works on your site

It works perfectly, thank you bangank :)))

I tried this but it still shows the fields above the box as well and not like the original image where the field description is only within the box. Is there a way to do this?
Is there also a way to show more of a landscape option similar to image below, rather than it being completely vertical?

On 4/5/2023 at 8:36 PM, MaureenC said:

I tried this but it still shows the fields above the box as well and not like the original image where the field description is only within the box. Is there a way to do this?
Is there also a way to show more of a landscape option similar to image below, rather than it being completely vertical?

Can you share link to this page? We can check easier

I used this script on expertsremodeling.com but for some reason it keeps getting stripped out.  Any ideas?

On 6/13/2024 at 9:35 PM, DanMorrissey said:

I used this script on expertsremodeling.com but for some reason it keeps getting stripped out.  Any ideas?

I see it already worked here, or you mean add space between (required) and text before it?