How to add a placeholder in a custom liquid textbox?

How to add a placeholder in a custom liquid textbox?

ScanMe
Shopify Partner
15 0 1

Hi, i have a section with this custom liquid code to add a textbox, but I want to put a placeholder in the textbox and I can't. Can anyone help me?

 

ScanMe_0-1705982994874.png

 

 

custom liquid code: 
<style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style>
<label class="form__label custom" for="insert-a-link-to-connect-to-your-qr-code:">Insert a link to connect to your QR-Code:</label>
<div class="field custom">
<input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="insert-a-link-to-connect-to-your-qr-code:" name="properties[Insert a link to connect to your QR-Code:]" required>
<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>
</div>

 

Replies 2 (2)

Liquid_xPert_SJ
Shopify Partner
1045 126 156

Hi @ScanMe 

 

please update  your code by adding placeholder property into your input field 

 

<input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="insert-a-link-to-connect-to-your-qr-code:" name="properties[Insert a link to connect to your QR-Code:]" required placeholder="your placeholder">

 

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
ScanMe
Shopify Partner
15 0 1

Thanks but i dont think it worked, it should be like this right?

<style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style> 

<label class="form__label custom" for="insert-a-link-to-connect-to-your-qr-code:">Insert a link to connect to your QR-Code:</label>

<div class="field custom">

    <input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="insert-a-link-to-connect-to-your-qr-code:" name="properties[Insert a link to connect to your QR-Code:]" required>

<input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="insert-a-link-to-connect-to-your-qr-code:" name="properties[Insert a link to connect to your QR-Code:]" required placeholder="your placeholder">

    <script>

    document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})

    </script>

</div>