Customize contact form with new boxes in refresh theme

[skjoldet]

I want to customize the contact form. I have tried to go into the edit code section: section/contact.liquid, but I get somewhat lost. What should I do to make the contact form look like this below? I want all the fields besides the "subscribe to our newsletter" to be mandatory.

The goal is to make the section more like a signup form. Because we want the customer to fill out the contact form/signup, then they receive a mail with a code in it to unlock our product. Hope someone can help 🙂

[Small_Task_Help]

Hi,

You need to work on contact.liquid

Example code as per your requirements

<form method="post" action="/contact#contact_form" id="contact_form" class="contact-form">
  <input type="text" name="contact[name]" id="ContactName" placeholder="Name" required>
  <input type="email" name="contact[email]" id="ContactEmail" placeholder="Email" required>
  <textarea name="contact[body]" id="ContactMessage" placeholder="Message" required></textarea>
  <input type="checkbox" name="contact[newsletter]" id="ContactNewsletter">
  <label for="ContactNewsletter">Subscribe to our newsletter</label>
  <button type="submit">Send</button>
</form>

[BlackCro]

The current contact form code can be edited to provide the functionality you're looking for. Below is the code required for the checkbox field that can be added to the form via contact-form.liquid. Look for the <textarea> tag around line 122 and replace with the following: 

<div class="newsletter_field">
    <input type= checkbox id="ContactForm-Newsletter" value="Agreed" name="contact[signed up for newsletters]">
    <label for="ContactForm-Newsletter">Subscribe to our newsletter</label>
</div>

The other fields can be adjusted by altering their <label> names, and adding the 'required' tag will make them a necessary part of the form. 

For more information please see - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

If you're not comfortable adjusting the code yourself, we can certainly help you implement this. Feel free to PM to discuss further. 

Kind regards

Simon