Custom form not emailing to me in full

[JemmaBearAvenue]

Hi everyone. 

I am having some trouble with my custom forms. I created two forms from the page.contact.liquid (Debut theme). The forms aren’t fully submitting. When I receive the emails, I only receive information in one of the boxes. I need the forms to email me information and photos from every box. What’s wrong with my code???

CUSTOM DESIGN QUESTIONNAIRE - https://bearavenue.com.au/pages/custom-design

With this page, I filled out the whole questionnaire and when I received the email, I only received the words from the “Any other further information you'd like us to take into account” box. Why didn’t I receive all of it???

Here’s the code.

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

{% if page.content.size > 0 %}
<div class="rte">
{{ page.content }}
</div>
{% endif %}

<div class="contact-form form-vertical">
{%- assign formId = 'ContactForm' -%}
{% form 'contact'%}
{% include 'form-status', form_id: formId %}

<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
<input type="text" id="{{ formId }}-name" name="contact[name]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
<input
type="email"
id="{{ formId }}-email"
name="contact[email]"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{%- if form.errors contains 'email' -%}
class="input--error"
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
{%- endif -%}
>
{%- if form.errors contains 'email' -%}
<span id="{{ formId}}-email-error" class="input-error-message">{% include 'icon-error' %} {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
{%- endif -%}
</div>
</div>

<label for="EventDate">Event Date</label>
<input type="text" id="CustomFormEventDate" name="customform[EventDate]" placeholder="">
<label for="EventType">Type of Event</label>
<input type="text" id="CustomFormEventType" name="customform[EventType]" placeholder="Wedding, Engagement, Birthday, Bridal Shower etc">
<label for="RequiredBy">Date invitations are required by (date)</label>
<input type="text" id="CustomFormDueDate" name="customform[DueDate]" placeholder="">
<label for="Guestnumber">Number of guests</label>
<input type="text" id="CustomFormGuestnumber" name="customform[Guestnumber]" placeholder="">
<label for="Invitationnumber">Quantity of invitations/sets required</label>
<input type="text" id="CustomFormInvitationnumber" name="customform[Invitationnumber]" placeholder="">
<label for="ThemeDescription">Colour palette & theme of your wedding</label>
<input type="text" id="CustomFormDescription" name="customform[Description]" placeholder="">

<label for="items">Items you require? (select all that apply)</label>
<p><input type="checkbox" id="CustomFormitems" name="custom[items]"value="Invitations"/ > Invitations<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="RSVP Postcards"/ > RSVP Postcards<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="RSVP Cards + envelopes"/ > RSVP Cards + envelopes<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Information Cards"/ > Information Cards<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Save The Date Cards + envelopes"/ > Save The Date Cards + envelopes<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Save The Date Magnets + envelopes"/ > Save The Date Magnets + envelopes<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Thank You Cards + envelopes"/ > Thank You Cards + envelopes<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Om The Day Stationery"/ > On The Day Stationery (I will contact you if you select this option)<br>
<p><label for="items">Optional extras (select all that apply)</label>
<p><input type="checkbox" id="CustomFormitems" name="custom[items]"value="Guest names on invitations"/ > Guest names on invitations<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Envelope address printing"/ > Envelope address printing<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="RSVP Envelope printing"/ > RSVP Envelope printing<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Name tags"/ > Name tags<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Twine wrapping"/ > Twine wrapping<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Custom drawn map"/ > Custom drawn map<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="2-sided printing"/ > 2-sided printing<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Coloured Envelopes"/ > Coloured Envelopes<br>

<p><label for="items">On The Day Stationery (select all that apply)</label>
<p><input type="checkbox" id="CustomFormitems" name="custom[items]"value="Menus"/ > Menus<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Printed Place Cards"/ > Printed Place Cards<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Hand-lettered Place Cards"/ > Hand-lettered Place Cards<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Table numbers"/ > Table numbers<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Welcome Sign"/ > Welcome Sign<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Seating Chart"/ > Seating Chart<br>

<p><label for="items">Print finish</label>
<p><input type="checkbox" id="CustomFormitems" name="custom[items]"value="Standard Digital Printing"/ > Standard Digital Printing<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="White Ink Printing"/ > White Ink Printing<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Foiling"/ > Foiling<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Letterpress"/ > Letterpress<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Blind Embossing"/ > Blind Embossing<br>

<div class="product-form__item product-form__item--logo">
<label for="custom_photo">Upload any photos or inspiration that you like here</label>
<input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">
<input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">
<input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">
<input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">
</div>

<label for="Budget">What is your budget?</label>
<input type="text" id="CustomFormBudget" name="customform[Budget]" placeholder="">
<label for="Location">What is your suburb & postcode? (for shipping calculation)</label>
<input type="text" id="CustomFormLocation" name="customform[Location]" placeholder="Suburb & State">

<label for="further">Any other further information you'd like us to take into account</label>
<textarea rows="4" id="{{ formId }}-message" name="contact[body]" >{% if form.body %}{{ form.body }}{% endif %}</textarea>

<label for="Market">Where did you hear about us?</label>
<input type="text" id="CustomFormMarket" name="customform[Market]" placeholder="Facebook, Instagram, Facebook Wedding Group, Google, Word of Mouth etc">
<label for="email">Would you like to be added to our mailing list?</label>
<input type="checkbox" id="CustomFormEmail" name="custom[Email]"value="Yes, please!"/ > Yes, please!<br>

</div>

<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

{% endform %}
</div>
</div>
</div>

STATIONERY WORDING - https://bearavenue.com.au/pages/stationery-wording

This form only submits words in the “Please provide any other wording or requests here.” box. Whyyyyyy?!?!?!?!?!

Here’s the code.

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

{% if page.content.size > 0 %}
<div class="rte">
{{ page.content }}
</div>
{% endif %}

<div class="contact-form form-vertical">
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form_id: formId %}

<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
<input type="text" id="{{ formId }}-name" name="contact[name]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
<input
type="email"
id="{{ formId }}-email"
name="contact[email]"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{%- if form.errors contains 'email' -%}
class="input--error"
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
{%- endif -%}
>
{%- if form.errors contains 'email' -%}
<span id="{{ formId}}-email-error" class="input-error-message">{% include 'icon-error' %} {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
{%- endif -%}
</div>
</div>

<label for="OrderNumber">Order Number</label>
<input type="text" id="CustomFormOrderNumber" name="customform[OrderNumber]" placeholder="">
<label for="EventDate">Event Date + Time</label>
<input type="text" id="CustomFormEventDate" name="customform[EventDate]" placeholder="">

<label for="Eventlocation">Event Location + Address</label>
<input type="text" id="CustomFormEventDate" name="customform[EventDate]" placeholder="">

<label for="maininvite">Main invitation wording: include names, ceremony & reception details, dress code etc.</label>
<textarea rows="6" id="{{ formId }}-message" name="contact[body]" >{% if form.body %}{{ form.body }}{% endif %}</textarea>

<label for="RSVPDate">RSVP Date</label>
<input type="text" id="CustomFormEventDate" name="customform[EventDate]" placeholder="">
<label for="rsvp">RSVP Requirements (select all that apply)</label>
<p><input type="checkbox" id="CustomFormitems" name="custom[items]"value="Dietary requirements"/ > Dietary requirements<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Song request"/ > Song request<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Email address"/ > Email address<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Wedding website"/ > Wedding website<br>
<input type="checkbox" id="CustomFormitems" name="custom[items]"value="Other"/ > Other<br>

<label for="rsvphow">How will your guests RSVP? Include your RSVP name, phone numbers, email or return postal address (whichever applies).</label>
<textarea rows="4" id="{{ formId }}-message" name="contact[body]" >{% if form.body %}{{ form.body }}{% endif %}</textarea>
<label for="infodetails">Wording for Details card (if applicable)</label>
<textarea rows="4" id="{{ formId }}-message" name="contact[body]" >{% if form.body %}{{ form.body }}{% endif %}</textarea>
<label for="otherdetails">Please provide any other wording or requests here.</label>
<textarea rows="4" id="{{ formId }}-message" name="contact[body]" >{% if form.body %}{{ form.body }}{% endif %}</textarea>

<div class="product-form__item product-form__item--logo">
<label for="custom_photo">Upload any photos or inspiration that you like here</label>
<input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">
<input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">
<input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">
<input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">
</div>


</div>

<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

{% endform %}
</div>
</div>
</div>
</div>

PLEASE AND THANK YOU 🙂

</div>

[AlexHodzitsky · Accepted solution]

Hi! Hope you are doing well!

If I understood you correctly, then your problem is easy to solve, since you simply incorrectly added the "name" attribute to the additional fields. You should write through the contact object, and not come up with your own names, for example - https://prnt.sc/12h9m8s. For reference: https://shopify.dev/tutorials/customize-theme-add-fields-to-your-contact-form 

Alex

[AlexHodzitsky · Accepted solution]

Hi! Hope you are doing well!

If I understood you correctly, then your problem is easy to solve, since you simply incorrectly added the "name" attribute to the additional fields. You should write through the contact object, and not come up with your own names, for example - https://prnt.sc/12h9m8s. For reference: https://shopify.dev/tutorials/customize-theme-add-fields-to-your-contact-form 

Alex

[JemmaBearAvenue]

Hi Alex @AlexHodzitsky 

Thank you for your reply. I fixed all the “name” attributes

and it’s looking better. 

Couple of issues still:

1) I tried it again and in the check box questions, I ticked every single checkbox. But when I look at the email, only a couple are listed.

2) The photo I uploaded still isn’t coming through.

Here’s the new and improved code:

<div class="page-width">

  <div class="grid">

    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">

      <div class="section-header text-center">

        <h1>{{ page.title }}</h1>

      </div>

      {% if page.content.size > 0 %}

        <div class="rte">

          {{ page.content }}

        </div>

      {% endif %}

      <div class="contact-form form-vertical">

        {%- assign formId = 'ContactForm' -%}

        {% form 'contact'%}

          {% include 'form-status', form_id: formId %}

          <div class="grid grid--half-gutters">

            <div class="grid__item medium-up--one-half">

              <label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>

              <input type="text" id="{{ formId }}-name" name="contact[name]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">

            </div>

            <div class="grid__item medium-up--one-half">

              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>

              <input

                type="email"

                id="{{ formId }}-email"

                name="contact[email]"

                autocorrect="off"

                autocapitalize="off"

                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"

                aria-required="true"

                {%- if form.errors contains 'email' -%}

                  class="input--error"

                  aria-invalid="true"

                  aria-describedby="{{ formId }}-email-error"

                {%- endif -%}

                >

              {%- if form.errors contains 'email' -%}

                <span id="{{ formId}}-email-error" class="input-error-message">{% include 'icon-error' %} {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>

              {%- endif -%}

            </div>

          </div>

          <label for="EventDate">Event Date</label>

<input type="text" id="ContactFormFormEventDate" name="contact[EventDate]" placeholder="">

        <label for="EventType">Type of Event</label>

<input type="text" id="ContactFormEventType" name="contact[EventType]" placeholder="Wedding, Engagement, Birthday, Bridal Shower etc">

        <label for="InvitationsDueBy">Date invitations are required by</label>

<input type="text" id="ContactFormDateInvitationsDueBy" name="contact[InvitationsDueBy]" placeholder="">

        <label for="NumberOfGuests">Number of guests</label>

<input type="text" id="ContactFormNumberOfGuests" name="contact[NumberOfGuests]" placeholder="">

        <label for="NumberOfInvitations">Quantity of invitations/sets required</label>

<input type="text" id="ContactFormNumberOfInvitations" name="contact[NumberOfInvitations]" placeholder="">

        <label for="Description">Colour palette & theme of your wedding</label>

<input type="text" id="ContactFormDescription" name="contact[Description]" placeholder="">

          <label for="Stationery">Items you require? (select all that apply)</label>

<p><input type="checkbox" id="ContactFormStationery" name="contact[Stationery]"value="Invitations"/ > Invitations<br>

<input type="checkbox" id=" ContactFormStationery" name="contact[Stationery]"value="RSVP Postcards"/ > RSVP Postcards<br>

<input type="checkbox" id=" ContactFormStationery" name="contact[Stationery]"value="RSVP Cards + envelopes"/ > RSVP Cards + envelopes<br>

<input type="checkbox" id=" ContactFormStationery" name="contact[stationery]"value="Information Cards"/ > Information Cards<br>

<input type="checkbox" id=" ContactFormStationery" name="contact[stationery]"value="Save The Date Cards + envelopes"/ > Save The Date Cards + envelopes<br>

<input type="checkbox" id=" ContactFormStationery" name="contact[stationery]"value="Save The Date Magnets + envelopes"/ > Save The Date Magnets + envelopes<br>

<input type="checkbox" id=" ContactFormStationery" name="contact[stationery]"value="Thank You Cards + envelopes"/ > Thank You Cards + envelopes<br>

        <p><label for="Upgrades">Optional extras (select all that apply)</label>

<p><input type="checkbox" id="ContactFormUpgrades" name="contact[Upgrades]"value="Guest names on invitations"/ > Guest names on invitations<br>

<input type="checkbox" id=" ContactFormUpgrades" name="contact[Upgrades]"value="Envelope address printing"/ > Envelope address printing<br>

<input type="checkbox" id=" ContactFormUpgrades" name="contact[Upgrades]"value="RSVP Envelope printing"/ > RSVP Envelope printing<br>

<input type="checkbox" id=" ContactFormUpgrades" name="contact[Upgrades]"value="Name tags"/ > Name tags<br>

<input type="checkbox" id=" ContactFormUpgrades" name="contact[Upgrades]"value="Twine wrapping"/ > Twine wrapping<br>

<input type="checkbox" id=" ContactFormUpgrades" name="contact[Upgrades]"value="Custom drawn map"/ > Custom drawn map<br>

<input type="checkbox" id=" ContactFormUpgrades" name="contact[Upgrades]"value="2-sided printing"/ > 2-sided printing<br>

<input type="checkbox" id=" ContactFormUpgrades" name="contact[Upgrades]"value="Coloured Envelopes"/ > Coloured Envelopes<br>       

        <p><label for="OnTheDayStationery">On The Day Stationery (select all that apply)</label>

<p><input type="checkbox" id="ContactFormOnTheDayStationery" name="contact[OnTheDayStationery]"value="Menus"/ > Menus<br>

<input type="checkbox" id=" ContactFormOnTheDayStationery" name="contact[OnTheDayStationery]"value="Printed Place Cards"/ > Printed Place Cards<br>

<input type="checkbox" id=" ContactFormOnTheDayStationery" name="contact[OnTheDayStationery]"value="Hand-lettered Place Cards"/ > Hand-lettered Place Cards<br> 

<input type="checkbox" id=" ContactFormOnTheDayStationery" name="contact[OnTheDayStationery]"value="Table numbers"/ > Table numbers<br>

<input type="checkbox" id=" ContactFormOnTheDayStationery" name="contact[OnTheDayStationery]"value="Welcome Sign"/ > Welcome Sign<br>

<input type="checkbox" id=" ContactFormOnTheDayStationery" name="contact[OnTheDayStationery]"value="Seating Chart"/ > Seating Chart<br>        

        <p><label for="PrintFinish">Print finish</label>

<p><input type="checkbox" id="ContactFormPrintFinish" name="contact[PrintFinish]"value="Standard Digital Printing"/ > Standard Digital Printing<br>

<input type="checkbox" id="ContactFormPrintFinish" name="contact[PrintFinish]"value="White Ink Printing"/ > White Ink Printing<br>

<input type="checkbox" id="ContactFormPrintFinish" name="contact[PrintFinish]"value="Foiling"/ > Foiling<br> 

<input type="checkbox" id="ContactFormPrintFinish" name="contact[PrintFinish]"value="Letterpress"/ > Letterpress<br>

<input type="checkbox" id="ContactFormPrintFinish" name="contact[PrintFinish]"value="Blind Embossing"/ > Blind Embossing<br>       

        <div class="product-form__item product-form__item--logo">           

   <label for="custom_photo">Upload any photos or inspiration that you like here</label>

   <input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">

   <input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">

   <input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">

   <input id="custom_photo" type="file" name="properties[Logo]" class="product-form__input">      

</div> 

  <label for="Budget">What is your budget?</label>

<input type="text" id="ContactFormBudget" name="contact[Budget]" placeholder="">

        <label for="Location">What is your suburb & postcode? (for shipping calculation)</label>

<input type="text" id="ContactFormLocation" name="contact[Location]" placeholder="Suburb & State">

        <label for=“FurtherInformation">Any other further information you'd like us to take into account</label>

          <textarea rows="4" id="{{ formId }}-message" name="contact[FurtherInformation]" >{% if form.FurtherInformation %}{{ form.FurtherInformation }}{% endif %}</textarea>

        <label for="WhereDidYouHearAboutUs">Where did you hear about us?</label>

<input type="text" id="ContactFormWhereDidYouHearAboutUs" name="contact[WhereDidYouHearAboutUs]" placeholder="Facebook, Instagram, Facebook Wedding Group, Google, Word of Mouth etc">

        <label for="email">Would you like to be added to our mailing list?</label>

<input type="checkbox" id="ContactFormEmail" name="contact[Email]"value="Yes, please!"/ > Yes, please!<br>

      </div>   

          <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

        {% endform %}

      </div>

    </div>

  </div>

</div>

[AlexHodzitsky · Accepted solution]

1) If you want to use multi-selection in the form of checkboxes, then the name attribute should be different for everyone. For reference: https://community.shopify.com/c/Shopify-Design/contact-liquid-with-multiple-choice-checkbox-doesn-t-... 

2) You will not be able to implement the upload of photos in the usual contact form, since you have no place to store the pictures. To do this, you need to use the App.

Hope this helps.

Alex

[JemmaBearAvenue]

Wow this is all so helpful!! My forms are now working perfectly. 

THANK YOU SO MUCH for all your help @AlexHodzitsky 

🙂