How can I insert a placeholder in a custom liquid textbox?

[ScanMe]

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?

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>

[PageFly-Richard]

Hi @ScanMe 

This is Richard from PageFly - Shopify Page Builder App

You will need to add the placeholder attribute to the input, to get this solved

To change the input like this

<input placeholder="Test Placeholder here..." 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>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[ScanMe]

It did not work,
the code 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 placeholder="Test Placeholder here..." 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>

[ssdc]

try a simple input field first. like

<input type="text" name="firstname" placeholder="First name">

see if that works

[Vinsinfo · Accepted solution]

Please use below code in style tag,

.field.custom input.field__input::placeholder {
    opacity: 1;
}

Please add placeholder attribute like below,

<input placeholder="Enter text here..." 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>

Please let me know whether it is useful for you.

[ScanMe]

you are a legend mate, thank you so much