Why is my custom form not emailing all the information?

Technical Q&A
1

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.

{{ page.title }}

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

{{ page.content }}
{% endif %}
{%- assign formId = 'ContactForm' -%} {% form 'contact'%} {% include 'form-status', form_id: formId %}
{{ 'contact.form.name' | t }}
{{ 'contact.form.email' | t }} * {%- if form.errors contains 'email' -%} {% include 'icon-error' %} {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}. {%- endif -%}

Event Date

Type of Event

Date invitations are required by (date)

Number of guests

Quantity of invitations/sets required

Colour palette & theme of your wedding

Items you require? (select all that apply)

Invitations
RSVP Postcards
RSVP Cards + envelopes
Information Cards
Save The Date Cards + envelopes
Save The Date Magnets + envelopes
Thank You Cards + envelopes
On The Day Stationery (I will contact you if you select this option)

Optional extras (select all that apply)

Guest names on invitations
Envelope address printing
RSVP Envelope printing
Name tags
Twine wrapping
Custom drawn map
2-sided printing
Coloured Envelopes

On The Day Stationery (select all that apply)

Menus
Printed Place Cards
Hand-lettered Place Cards
Table numbers
Welcome Sign
Seating Chart

Print finish

Standard Digital Printing
White Ink Printing
Foiling
Letterpress
Blind Embossing

Upload any photos or inspiration that you like here

What is your budget?

What is your suburb & postcode? (for shipping calculation)

Any other further information you’d like us to take into account

{% if form.body %}{{ form.body }}{% endif %}

Where did you hear about us?

Would you like to be added to our mailing list?
<input type=“checkbox” id=“CustomFormEmail” name="custom[Email]"value=“Yes, please!”/ > Yes, please!

{% endform %}

** **
**

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”>

{{ page.title }}

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

{{ page.content }}
{% endif %}
{%- assign formId = 'ContactForm' -%} {% form 'contact', id: formId %} {% include 'form-status', form_id: formId %}
{{ 'contact.form.name' | t }}
{{ 'contact.form.email' | t }} * {%- if form.errors contains 'email' -%} {% include 'icon-error' %} {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}. {%- endif -%}

Order Number

Event Date + Time

Event Location + Address

Main invitation wording: include names, ceremony & reception details, dress code etc.

{% if form.body %}{{ form.body }}{% endif %}

RSVP Date

RSVP Requirements (select all that apply)

Dietary requirements
Song request
Email address
Wedding website
Other

How will your guests RSVP? Include your RSVP name, phone numbers, email or return postal address (whichever applies).

{% if form.body %}{{ form.body }}{% endif %}

Wording for Details card (if applicable)

{% if form.body %}{{ form.body }}{% endif %}

Please provide any other wording or requests here.

{% if form.body %}{{ form.body }}{% endif %}
Upload any photos or inspiration that you like here

{% endform %}

PLEASE AND THANK YOU :slightly_smiling_face:

2

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

3

Hi Alex @AlexHodzitsky

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

6D2381F7-F3DB-42B0-ABF8-CCDF4E6C4A0D.png
6D2381F7-F3DB-42B0-ABF8-CCDF4E6C4A0D.png2732×2048 350 KB

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:

{{ page.title }}

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

{{ page.content }}

{% endif %}

{%- assign formId = ‘ContactForm’ -%}

{% form ‘contact’%}

{% include ‘form-status’, form_id: formId %}

{{ ‘contact.form.name’ | t }}

{{ ‘contact.form.email’ | t }} *

<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’ -%}

{% include ‘icon-error’ %} {{ form.errors.translated_fields[‘email’] | capitalize }} {{ form.errors.messages[‘email’] }}.

{%- endif -%}

Event Date

Type of Event

Date invitations are required by

Number of guests

Quantity of invitations/sets required

Colour palette & theme of your wedding

Items you require? (select all that apply)

Invitations

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

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

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

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

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

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

Optional extras (select all that apply)

Guest names on invitations

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

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

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

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

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

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

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

On The Day Stationery (select all that apply)

Menus

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

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

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

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

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

Print finish

Standard Digital Printing

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

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

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

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

Upload any photos or inspiration that you like here

What is your budget?

What is your suburb & postcode? (for shipping calculation)

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

{% if form.FurtherInformation %}{{ form.FurtherInformation }}{% endif %}

Where did you hear about us?

Would you like to be added to our mailing list?

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

{% endform %}

4

  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-work/m-p/426155/highlight/true#M110397

  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

5

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

THANK YOU SO MUCH for all your help @AlexHodzitsky

:slightly_smiling_face: