How to add 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>

[Liquid_xPert_SJ]

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

[ScanMe]

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>