Add a "name" field to Debut theme's footer newsletter (Shopify)

footer.liquid

<style>
.site-footer__newsletter .input-group{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;

}

.site-footer__newsletter .input-group input{
    max-width: 50%; 
    width: 100%;
    margin: 0 !important;
}

.site-footer__newsletter .input-group button{
    margin-top: 15px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.input-group__btn{
    width: 100%;
}
</style>
<input type="text"
name="contact[first_name]"
id="{{ formId }}-first_name"
class="input-group__field{% if form.errors %} input--error{% endif %}"
value=""
placeholder="First name"
aria-label="First name"
aria-required="true"
autocorrect="off"
autocapitalize="off"
{% if form.errors %}
aria-invalid="true"
aria-describedby="{{ formId }}-first_name-error"
data-form-status
{% endif %}
>