Creating a custom text field

[RNSL]

I am trying to create a custom text field on the product page.
I have tried entering this snippet of code on various places:

<label for="Letter">
      Letter
      <br>
      <input
        required
        placeholder="Letter"
        form="{{ product_form_id }}"
        type="text"
        id="Letter"
        name="properties[Letter]"
      >
    </label>

The field shows, but whenever I enter a value, the input field gets cleared the moment I click away and the "Buy it now" button disappears on me.
I am using the Dawn Theme.

Any idea why that would happen?

[RNSL]

By way of update: this happens even with apps from the app store that I've attempted to use in this regard. Same problem: the interface glitches out.

[BernieHarding]

I was experiencing this issue too with the "Craft" theme, not sure if you still need a workaround but here's what I did to get round this;

1.) Add a "Custom HTML" / "Custom Liquid" section on your default product page template (within the drag drop style customise editor). It's important this sits below the "Variant picker " section.
2.) Insert a blank div with an ID descriptor, eg: 

<div class="product-form__item" id="personalisation-input"></div>

3.) Navigate out of the drag drop "customiser" to the "edit code" section
4.) Navigate to "snippets/product-variant-options.liquid" (or similar)
5.) Add content to your blank div using the following code, inserted at the end of this file (after all the code):

<script>
       
$(".product-form__input--pill label:contains(' Yes')").click(function(evt){  
     //this is based on a product variant within the product configuration called "Personalisation" with the options of "No" and "Yes". If the "Yes" option is clicked it will perform this function, filling the div with content

                            $('#personalisation-input').html('<p class="line-item-property__field"><legend class="form__label">Personalisation required:</legend><input required class="required" id="personalisation-required" type="text" form="{{ product_form_id }}" name="properties[Personalisation required]" maxlength="15"/><span>Max 15 characters including spaces</span></p>');

});

          $(".product-form__input--pill label:contains(' No')").click(function(evt){  
     //same principle here but If the "No" option is clicked it will perform this function, removing the content from the div

     $('#personalisation-input').empty();
  
});

                  </script>

   NOTE: this work around requires jquery to be enabled on your theme, within the "edit code" section navigate to "theme.liqiuid" and insert the following before the close head tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>​