I'm wanting to add a first and last name field to a newsletter pop up in Modular Theme

[Foodie22]

Hi everyone, 

I've looked through all the other questions in the community, however I havent quite managed to find the answer and I'm hoping its an easy one to sort out. I have practically no coding skills, so I am unable to tweak other code from other site themes here on Shopify. 

Essentially I am just wanting to add a field into the popup that allows customers to add in their first and last names. 

This is our code currently, and I realise that if I probably just tweak where it says hidden, that the inputs might show up on the pop up, but I'm too scared that I'll break the code (ha!). I've highlighted these bits. I want the customer to be able to enter their names, not for it to auto populate as 'Subscriber'!

{%- capture form_id -%}NewsletterForm--{{ section.id }}{%- endcapture -%}
{%- form 'customer', id: form_id -%}
<div class="js-signUp-form signUp-form">
<input type="hidden" id="contact_tags" name="contact[tags]" value="newsletter"/>
<div class="inputGroup mc-field-group">
<label for="mce-EMAIL" class="accessible-label">{{ 'general.slide_out_navigation.search_label' | t }}</label>
<input class="signUp-input required email" type="email" value="" name="contact[email]" id="mce-EMAIL" placeholder="{{ 'general.newsletter_signup.email_placeholder' | t }}" required>
<input type="hidden" id="newsletter-first-name" name="contact[first_name]" value="Newsletter" />
<input type="hidden" id="newsletter-last-name" name="contact[last_name]" value="Subscriber" />
<button type="submit" class="signUp-submit" name="subscribe" id="mc-embedded-subscribe" aria-label="{{ 'general.accessibility.submit' | t }}">
{%- render 'icon-submit' -%}
</button>
</div>
</div>
{%- if form.posted_successfully? -%}
<div class="signUp-confirmation p">{{ 'general.newsletter_signup.success_message' | t }}</div>
{%- elsif form.errors -%}
{{ form.errors | default_errors }}
{%- endif -%}
{%- endform -%}

Thank you so much in advance