How can I customize a contact form to include additional customer questions?

[meganjennifer]

I am looking to customize a contact form on my site to include additional questions for customers to answer when submitting on this page: https://www.localnomadshop.com/pages/group-gifting

I would like to add lines such as "event date", "approximate # of people", "budget", etc.

Is there any way to do this via the new custom CSS feature? Thank you!

[EBOOST]

Hi @meganjennifer 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Sections/contact-form.liquid
3. add code below before {%- endform -%} and button

<div class="field">
          <input
            class="field__input"
            autocomplete="name"
            type="date"
            id="ContactForm-eventdate"
            name="contact[event date]"
            placeholder="event date"
          >
          <label class="field__label" for="ContactForm-eventdate">Event date</label>
        </div>
<div class="field">
          <input
            class="field__input"
            autocomplete="name"
            type="text"
            id="ContactForm-approximate"
            name="contact[approximate of people]"
            placeholder="approximate # of people"
          >
          <label class="field__label" for="ContactForm-approximate">approximate # of people</label>
        </div>
<div class="field">
          <input
            class="field__input"
            autocomplete="name"
            type="text"
            id="ContactForm-budget"
            name="contact[budget]"
            placeholder="budget"
          >
          <label class="field__label" for="ContactForm-budget">budget</label>
        </div>

4. Follow code above to create a new field

[meganjennifer]

Will this work just to change the contact form on a specific page, not all contact forms on my website?

[EBOOST]

Hi @meganjennifer 

It will apply all templates that used Sections/contact-form.liquid. If you don't want apply all forms .You can create a new section base on Sections/contact-form.liquid and a new template  after that insert new fields to new section and new template use new section. After that you can apply new template to specific page.

[meganjennifer]

Thank you for your reply! I am not the best at coding so I have no idea how to go about doing what you mentioned above as far as sections go, but thank you all the same! I was hoping there was a simpler way to do it in the new custom CSS feature within the theme editor but maybe I will just have to wait!

[EBOOST]

Hi,

If you use a file after that it will apply  all. If you use multiple files. You need update all files.

[Dev441]

Hii , I have tried this date new field , it is working fine response also getting. I want image field added image input but in response getting just image name. Any idea how to get image in response? Here's the screenshot of response. https://prnt.sc/0PcHslx-sklR

[Dwalker-BTA]

Hi @meganjennifer,

You could BookThatApp's "Appointment" widget to collect that information for you on your "Group Fitting" page. The app's support team can assist you with the setup without you having to lift a finger.

Cheers!