Not Receiving All Emails from Contact Form

kelem7
New Member
3 0 0

I've created a custom contact form to let customers request quotes from our website. For the most part, it seems to function, but when we're sending test emails, sometimes we only receive one or two of what we send in our inbox (they also aren't in our Spam or Junk folder). We're using a custom domain that links to Gmail, and passed an SPF check. I've tried whitelisting all of Shopify's email addresses.

Has anyone else had this problem or is anyone able to offer a solution? Obviously, we don't want to alienate customers by having their requests lost in the ether. Thank you so much for any help that you can offer!

Here's a link to the form: https://www.plumager.com/pages/request-a-quote

And the section code:

{% style %}

select {
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234D5055%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#ffffff 100%);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}

/* Hide arrow icon in IE browsers */
	select::-ms-expand {
    display: none;
}

{% endstyle %}
<section class="section section--page page section--{{ section.id }} section--no-bg" data-section-id="{{ section.id }}" data-section-type="page-contact">

    <div class="container container--tiny">
        <div class="section__title section__title--center">
            <h1 class="section__title-text h2">{{ page.title }}</h1>
            <p>* Denotes Required Fields</p>
        </div>

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

    {% if section.settings.show_map %}
        {% if section.blocks.size > 0 %}
        <div class="home-map js-map u-mt u-mb+ js-map--{{ section.id }}">

            <div class="container">

                <div class="home-map__content">
                    <div class="o-layout u-flex u-flex--middle">
                        
                        <div class="o-layout__item u-1/1 u-1/2@tab">
                            <div class="home-map__items">
                                {% for block in section.blocks %}
                                <a href="#map-info-{{ section.id }}-{{ forloop.index }}" class="home-map__title js-map-trigger">
                                    <h3 class="home-map__title-text">{{ block.settings.title | escape }}</h3>
                                    {% if section.blocks.size > 1 %}
                                        <span class="home-map__title-icon icon-fallback">
                                            <i class="icon icon--plus" aria-hidden="true"></i>
                                            <span class="icon-fallback__text">{{ 'sections.map.open' | t }}</span>
                                        </span>
                                    {% endif %}
                                </a>
                                <div id="map-info-{{ section.id }}-{{ forloop.index }}" class="home-map__item js-map-info" {{ block.shopify_attributes }}>
                                    <div class="home-map__item-wrap">
                                        <div class="o-layout">
                                            <div class="o-layout__item u-1/1 u-1/2@desk">
                                                <div class="home-map__text rte">
                                                    {{ block.settings.desc }}
                                                </div>
                                            </div>
                                            <div class="o-layout__item u-1/1 u-1/2@desk">
                                                <div class="home-map__sub-text u-small rte">
                                                    {{ block.settings.sub_desc }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="u-hidden@tab-up" data-set="map-replace-{{ section.id }}-{{ forloop.index }}"></div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="o-layout__item u-1/1 u-1/2@tab">
                            <div class="home-map__media js-lazy-map">
                                {% for block in section.blocks %}
                                <div class="home-map__media-map js-map-media{% if forloop.index == 1 %} home-map__media-map--first js-active{% endif %}" data-map-id="#map-info-{{ section.id }}-{{ forloop.index }}">
                                    <div class="u-hidden@tab-down" data-set="map-replace-{{ section.id }}-{{ forloop.index }}">
                                        <div class="home-map__media-replace js-map-replace">
                                            {% if section.settings.google_api_key == blank %} 
                                                {% if block.settings.map_image %}
                                                    <div class="home-map__media-canvas home-map__media-canvas--img">
                                                        <div class="home-map__media--cover u-bg-contain" style="background-image: url('{{ block.settings.map_image | img_url: '1x1' }}')"></div>
                                                        <div class="u-bg-cover img-lazyload lazyload js"
                                                            data-bgset="{% include 'bgset', image: block.settings.map_image %}"
                                                            data-sizes="auto"
                                                            data-parent-fit="cover"></div>
                                                        <noscript>
                                                            <div class="u-bg-cover"
                                                                style="background-image: url('{{ block.settings.map_image | img_url: '720x' }}');"></div>
                                                            </div>
                                                        </noscript>
                                                    </div>
                                                {% else %}
                                                    <div class="home-map__media-canvas home-map__media-canvas--placeholder">
                                                        <div class="u-bg-cover">
                                                            {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                                                            {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            {% else %}
                                                <div id="map-{{ section.id }}-{{ forloop.index }}"
                                                class="js-map-ids home-map__media-canvas" 
                                                data-map-id="map-{{ section.id }}-{{ forloop.index }}" 
                                                data-map-section="{{ section.id }}"
                                                data-map-address="{{ block.settings.address | escape }}"
                                                data-map-style="{{ section.settings.map_style }}"
                                                data-map-pin="{% if section.settings.map_style == 'dark' or section.settings.map_style == 'minimal_dark' %}mapPinLight{% else %}mapPinDark{% endif %}"></div>
                                            {% endif %}
                                            {% if section.settings.show_directions_btn %}
                                                <a href="https://maps.google.com?daddr={{ block.settings.address | escape }}" class="c-btn c-btn--primary c-btn--arrow home-map__media-btn" target="_blank">{{ 'sections.map.directions' | t }}</a>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
            <div class="placeholder-noblocks">
                {{ 'homepage.onboarding.no_content' | t }}
            </div>
        {% endif %}
    {% endif %}

    {% if section.settings.show_form %}
        <div class="page__contact-form" style="background: #fff;">
            <div class="container container--tiny container--mob-0">

                {% unless section.settings.form_title == blank %}
                <div class="section__title section__title--center">
                </div>
                {% endunless %}

                {% form 'contact' %}
                    {% if form.posted_successfully? %}
              			<script>
							window.location = "/pages/thank-you-for-contacting-us";
						</script>
                        
                    	
              	{% endif %}

                    {{ form.errors | default_errors }}
              
                  <label for="ContactFormName">{{ 'contact.form.name' | t }} *</label>
                    <input type="text" id="ContactFormName" placeholder="First Last" name="contact[name]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}" required/>

 
          
                  <!--Company information fields-->
                  <label for="Company">Company *</label>
                    <input type="text" id="Company" name="contact[Company]" required/>
                  <label for="Title">Title *</label>
                    <input type="text" id="Title" name="contact[Title]" required/>
                  <label for="Department">Department</label>
                    <input type="text" id="Department" name="contact[Department]"/>

                  <!--Address Fields-->
                  <label for="Address">Address</label>
                    <input type="text" id="Address" name="contact[AddressLine1]"/>
                  <input type="text" id="Address" name="contact[AddressLine2]"/>
                    <div class="o-layout">
                        <div class="o-layout__item u-1/1 u-1/3@tab">
                            <label for="City">City</label>
                            <input type="text" id="City" name="contact[City]"/>
                        </div>
                        <div class="o-layout__item u-1/1 u-1/3@tab">
                            <label for="Country">Country</label>
                            <input type="text" id="Country" name="contact[Country]"/>
                        </div>
                        <div class="o-layout__item u-1/1 u-1/3@tab">
                            <label for="ZipCode">Zip Or Mail Code</label>
                            <input type="text" id="ZipCode" name="contact[ZipCode]"/>
                        </div>
                    </div>
              
              		<!--Contact Information-->
                  <label for="Email" class="hidden-label">{{ 'contact.form.email' | t }} *</label>
                    <input type="email" name="contact[email]" id="Email" class="{% if form.errors contains 'email' %} error{% endif %}" {% if form.email %} value="{{ form.email }}"{% endif %} autocorrect="off" autocapitalize="off" required/>	
                  <label for="Phone">{{ 'contact.form.phone' | t }}</label>
                    <input type="tel" id="Phone" name="contact[phone]" pattern="[0-9\-\(\)\ ]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
                  <label for="Website">Company Website</label>
                    <input type="text" id="Website" name="contact[Website]"/>
				 
              		<!-- Questions About the Company-->
          		    <div class="o-layout" style="padding: 10px 0 20px 0;">
                    <div class="o-layout__item u-1/1 u-1/2@tab">
						          <label for="InHouseDesigners">Does your company have in house designers to edit artwork as needed? *</label>
                  	</div>
                  	<div class="o-layout__item u-1/1 u-1/2@tab" style="vertical-align: bottom">
                      &emsp;<input type="radio" id="InHouseDesignersYes" name="contact[InHouseDesigners]" value="Yes" required/>&nbsp;&nbsp;Yes
					            &emsp;<input type="radio" id="InHouseDesignersNo" name="contact[InHouseDesigners]" value="No" required/>&nbsp;&nbsp;No <br />
				          	</div>
				          </div>
            
                  <label for="Programs">What program(s) does the company use to edit artwork? *</label>
                    <input type="text" id="Programs" name="contact[Programs]" required/>
                  
                  <!--Project Information-->
      		        <h2 class="plumager_subheading" style="text-align: center; padding-top: 15px;">Project Information</h2>
              
                  <label for="ProjectTitle">Project Title *</label>
                    <input type="text" id="ProjectTitle" name="contact[ProjectTitle]" required/>
                  <label for="ProjectManager">Project Manager (if different from Contact)</label>
        		        <input type="text" name="contact[ProjectManager]" id="ProjectManager" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus/>
        
                  <label for="PM_Title">Title</label>
                    <input type="text" id="PM_Title" name="contact[PMTitle]"/>
                  <label for="PM_Department">Department</label>
                    <input type="text" id="PM_Department" name="contact[PM_Department]"/>
              	  <label for="PM_Email" class="hidden-label">{{ 'contact.form.email' | t }}</label>
                    <input type="email" id="PM_Email" name="contact[PM_Email]" class="{% if form.errors contains 'email' %} error{% endif %}" {% if form.email %} value="{{ form.email }}"{% endif %} autocorrect="off" autocapitalize="off"/>	
                  <label for="PM_Phone">Phone Number</label>
                    <input type="tel" id="PM_Phone" name="contact[PM_Phone]" pattern="[0-9\-\(\)\ ]*"/>
					
              	  <!--Project Questions-->
                  <div class="o-layout" style="padding-top: 5px;">
                      <div class="o-layout__item u-1/1 u-1/2@tab">
                        <label for="InspirationOrMood">Is there a print inspiration or mood board for this project? *</label>
                      </div>
                      <div class="o-layout__item u-1/1 u-1/2@tab" style="vertical-align: bottom">
                        &emsp;<input type="radio" id="InspirationOrMoodYes" name="contact[Inspiration_or_MoodBoard]" value="Yes" required/>&nbsp;&nbsp;Yes
                        &emsp;<input type="radio" id="InspirationOrMoodNo" name="contact[Inspiration_or_MoodBoard]" value="No" required/>&nbsp;&nbsp;No </br>
                      </div>
                  </div>
          
          			  <div class="o-layout">
                    <div class="o-layout__item u-1/1 u-1/2@tab">
                      <label for="ColorPalette">Is there a color palette for this project? *</label>
                    </div>
                    <div class="o-layout__item u-1/1 u-1/2@tab" style="vertical-align: bottom">
                      &emsp;<input type="radio" id="ColorPaletteYes" name="contact[ColorPalette]" value="Yes" required/>&nbsp;&nbsp;Yes
                      &emsp;<input type="radio" id="ColorPaletteNo" name="contact[ColorPalette]" value="No" required/>&nbsp;&nbsp;No </br>
                    </div>
                  </div>
          
					        <div class="o-layout" style="margin-bottom: 10px;">
                      <div class="o-layout__item u-1/1 u-1/2@tab" style="vertical-align: middle;">
                        <label for="NumberOfDesigns">Number of Designs Needed *</label>
                      </div>
                      <div class="o-layout__item u-1/1 u-1/2@tab" style="vertical-align: middle;">
                        &emsp;<select required class="required" id="NumberOfDesigns" style="width: 25%;" name="contact[Number_Of_Designs]">
  									              <option>1</option>
                                  <option>2</option>
                                  <option>3</option>
                            		  <option>4</option>
                            		  <option>5</option>
                                  <option>6</option>
                                  <option>7</option>
                            		  <option>8</option>
                            		  <option>9</option>
                            		  <option>10</option>
                            		  <option>11</option>
                                  <option>12</option>
                                  <option>13</option>
                            		  <option>14</option>
                            		  <option>15</option>
                                  <option>16</option>
                                  <option>17</option>
                            		  <option>18</option>
                            		  <option>19</option>
                            		  <option>20</option>
                            		  <option>20+</option>
                                </select>
                      </div>
                      <div class="Caret"></div>
                  </div>

			            <!--Technical Information-->
			            <h2 class="plumager_subheading" style="text-align: center; padding-top: 15px;">Technical Information</h2>
      		
				          <label for="SubstrateFabric">Substrate / Fabrics *</label>
                	  <input type="text" id="SubstrateFabric" name="contact[SubstrateFabric]" required/>
				
				          <div class="o-layout" style="padding-top: 10px;">
                    <div class="o-layout__item u-1/1 u-1/2@tab">
               			  <label for="ColorsSeparated">Colors Separated? *</label>
                    </div>
                    <div class="o-layout__item u-1/1 u-1/2@tab" style="vertical-align: bottom">
                        &emsp;<input type="radio" id="ColorsSeparatedYes" name="contact[ColorsSeparated]" value="Yes" required/>&nbsp;&nbsp;Yes
                        &emsp;<input type="radio" id="ColorsSeparatedNo" name="contact[ColorsSeparated]" value="No" required/>&nbsp;&nbsp;No <br />
                    </div>
                  </div>
        
                  <div class="o-layout" style="margin-bottom: 10px;">
                     <div class="o-layout__item u-1/1 u-1/2@tab" style="vertical-align: middle;">
                         <label for="NumberOfColors">Number of Colors</label>
                     </div>
                     <div class="o-layout__item u-1/1 u-1/2@tab" style="vertical-align: middle;">
                          &emsp;<select id="NumberOfColors" style="width: 25%;" name="contact[Number_Of_Colors]">
                       				      <option>-</option>
                       				      <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                            		    <option>4</option>
                            	    	<option>5</option>
                                    <option>6</option>
                                    <option>7</option>
                            	    	<option>8</option>
                            	    	<option>9</option>
                            	    	<option>10</option>
                            	    	<option>11</option>
                                    <option>12</option>
                                    <option>13</option>
                            		    <option>14</option>
                            		    <option>15</option>
                                    <option>16</option>
                                    <option>16+</option>
                                 </select>
                      </div>
                 </div>
        
                 <label for="PrintingMethod">Printing Method(s) *</label><br />
                    <div required class="o-layout required" style="padding-bottom: 15px">
                        <div class="o-layout__item u-1/1 u-1/2@tab">
                          &emsp;<input type="checkbox" id="PrintingMethod" name="contact[PrintMethod_1]" value="Digital"/>&emsp;Digital<br/>
                          &emsp;<input type="checkbox" id="PrintingMethod" name="contact[PrintMethod_2]" value="Screen-Printing"/>&emsp;Screen-Printing <br/>
                          &emsp;<input type="checkbox" id="PrintingMethod" name="contact[PrintMethod_3]" value="Sublimation"/>&emsp;Sublimation <br/>		
                        </div>
                        <div class="o-layout__item u-1/1 u-1/2@tab">
                          &emsp;<input type="checkbox" id="PrintingMethod" name="contact[PrintMethod_4]" value="Not Sure"/>&emsp;Not Sure <br/>
                          &emsp;<input type="checkbox" id="PrintingMethod" name="contact[PrintMethod_5]" value="Other"/>&emsp;Other (Please specify below.)<br/>
                          <input type="text" id="Other" name="contact[OtherPrintMethod]" />
                        </div>
                     </div>

				          <label for="FileFormats">File Format(s) Needed *</label></br>
                    <div required class="o-layout required" style="padding-bottom: 15px">
                       <div class="o-layout__item u-1/1 u-1/2@tab">
                          &emsp;<input type="checkbox" id="FileFormats" name="contact[FileFormats_1]" value="AI"/>&emsp;AI</br>
                          &emsp;<input type="checkbox" id="FileFormats" name="contact[FileFormats_2]" value="EPS"/>&emsp;EPS </br>
                          &emsp;<input type="checkbox" id="FileFormats" name="contact[FileFormats_3]" value="PDF"/>&emsp;PDF </br>	
								          &emsp;<input type="checkbox" id="FileFormats" name="contact[FileFormats_4]" value="TIFF"/>&emsp;TIFF </br>
								          &emsp;<input type="checkbox" id="FileFormats" name="contact[FileFormats_5]" value="PSD"/>&emsp;PSD </br>

                        </div>
                        <div class="o-layout__item u-1/1 u-1/2@tab">
                          &emsp;<input type="checkbox" id="FileFormats" name="contact[FileFormats_6]" value="PNG"/>&emsp;PNG </br>
                          &emsp;<input type="checkbox" id="FileFormats" name="contact[FileFormats_7]" value="JPEG"/>&emsp;JPEG</br>
                          &emsp;<input type="checkbox" id="FileFormats" name="contact[FileFormats_8]" value="Not Sure"/>&emsp;Not Sure </br>
                          &emsp;<input type="checkbox" id="FileFormats" name="contact[FileFormats_9]" value="Not Sure"/>&emsp;Other (Please specify below.) </br>
								          <input type="text"id="OtherFile" name="contact[OtherFileFormat]"/>
                        </div>
                      </div>

				          <label for="ScreenSize">Repeat/Screen Size (cm/in)</label>
                	    <div class="o-layout">
                        <div class="o-layout__item u-1/1 u-1/2@tab">
                          <label for="Vertical">Vertical</label>
                          <input type="text" name="contact[VerticalDimensions]" id="Vertical" />
                        </div>
                        <div class="o-layout__item u-1/1 u-1/2@tab">
                          <label for="Horizontal" class="hidden-label">Horizontal</label>
                          <input type="text" name="contact[PM_Last_Name]" id="Horizontal" />
                        </div>
				            	</div>

                  <label for="ContactFormMessage">{{ 'contact.form.message' | t }} *</label>
                    <textarea rows="5" id="ContactFormMessage" placeholder="Additional Notes" name="contact[body]" required>{% if form.body %}{{ form.body }}{% endif %}</textarea>

                  <input type="submit" class="c-btn c-btn--primary c-btn--center c-btn--full u-mt u-mb-" value="{{ 'contact.form.send' | t }}">
                {% endform %}
            </div>
        </div>
    {% endif %}

</section>

{% unless section.settings.google_api_key == blank %}
<script type="text/javascript">
theme.map = {
    key: {{ section.settings.google_api_key | json }}
};
</script>
{% endunless %}

{% schema %}
{
    "name": "Page contact",
    "class": "js-section__page-contact",
    "max_blocks": 3,
    "settings": [
        {
            "type": "header",
            "content": "Contact form"
        },
        {
            "type": "checkbox",
            "id": "show_form",
            "label": "Enable contact form",
            "default": true
        },
        {
            "id": "form_title",
            "type": "text",
            "label": "Heading",
            "default": "Send us an email"
        },
        {
            "type": "header",
            "content": "Map"
        },
        {
            "type": "checkbox",
            "id": "show_map",
            "label": "Enable map",
            "default": false
        },
        {
            "type": "checkbox",
            "id": "show_directions_btn",
            "label": "Show directions button",
            "default": false
        },
        {
            "type": "header",
            "content": "Google maps"
        },
        {
            "type": "text",
            "id": "google_api_key",
            "label": "API key",
            "info": "You’ll need to register a [Google Maps API Key](https://help.shopify.com/en/manual/using-themes/change-the-layout/theme-settings/map-section-api-key) to display Google map."
        },
        {
            "type": "select",
            "id": "map_style",
            "label": "Map style",
            "default": "light",
            "options": [
                {
                    "label": "Default",
                    "value": "default"
                },
                {
                    "label": "Blue water",
                    "value": "blue_water"
                },
                {
                    "label": "Clean cut",
                    "value": "clean_cut"
                },
                {
                    "label": "Dark",
                    "value": "dark"
                },
                {
                    "label": "Flat",
                    "value": "flat"
                },
                {
                    "label": "Light",
                    "value": "light"
                },
                {
                    "label": "Minimal dark",
                    "value": "minimal_dark"
                }
            ]
        }
    ],
    "blocks": [
        {
            "type": "map",
            "name": "Map",
            "settings": [
                {
                    "type": "text",
                    "id": "title",
                    "label": "Heading",
                    "default": "Map"
                },
                {
                    "type": "richtext",
                    "id": "desc",
                    "label": "Address",
                    "default": "<p>273 Street Lane<br/>San Francisco, CA 94102<br/>(415) 557-4400<br/>store@email.com</p>"
                },
                {
                    "type": "richtext",
                    "id": "sub_desc",
                    "label": "Hours",
                    "default": "<p>Monday - Thursday, 12:00 to 23:00<br/>Friday &amp; Saturday, 12:00 to 00:00<br/>Sunday, Closed</p>"
                },
                {
                    "type": "text",
                    "id": "address",
                    "label": "Map address",
                    "info": "Used for Google map and directions button",
                    "default": "100 Larkin St, San Francisco, CA 94102, USA"
                },
                {
                    "type": "image_picker",
                    "id": "map_image",
                    "label": "Image",
                    "info": "Displayed if Google map is not in use"
                }
            ]
        }
    ]
}
{% endschema %}

 

0 Likes
Ôsataï
Tourist
10 0 1

Hi, I have exaclty the same problem. Did you fixed it ? 

0 Likes
kelem7
New Member
3 0 0

Unfortunately, no, we ended up deciding to have our customers email us directly with quote requests for a more personal touch when we couldn't figure out why this was inconsistent. Wish I had a better answer for you! 

0 Likes
Ôsataï
Tourist
10 0 1

Thank you for your answer. 
Your probleme seemmed to be exactly the same as mine. If I fix it, I will contact you to let you know.

Thanks ! 

 

0 Likes
kelem7
New Member
3 0 0

Thank you so much, I'd really appreciate that! 

0 Likes
Ôsataï
Tourist
10 0 1

Hi !

Are you using a Gsuite adress ?

I finally solved my problem adding .test-google-a.com at the end of my contact email in Shopify General menu. 

Hope it will work for you ! 

0 Likes