Shopify themes, liquid, logos, and UX
Hi,
I'm having problems receiving messages from the custom contact form I created.
Would someone have a look and see what could be the issue? Thank you
{{ 'custom-contact.css' | asset_url | stylesheet_tag }}
{% form 'contact' %}
{% if form.posted_successfully? %}
<div class="successForm feedback note-success">
<p>{{ 'sections.contact_form.post_success' | t }}</p>
</div>
{% endif %}
{{ form.errors | default_errors }}
<div class="container-input-single">
<div class="contact-box-single">
<div class="right-single">
<div class="section-title lines desktop-12 tablet-6 mobile-3"><h3 class="right-title-single">BESPOKE ENQUIRY FORM</h3></div>
<div class="waiting-list-section">
<h5>WAITING LIST:</h5>
<p class="waiting-list-text">To request a custom piece, kindly complete the form provided below. As I can only accommodate a limited number of projects like yours each year, I have designed this form to be as detailed as possible. This will enable me to better understand your vision for the piece and determine if it aligns with my capabilities. Once we agree to collaborate, we can begin discussing the specifics of bringing your dream piece to life. I will reach out to you promptly to inform you about the next steps in the process.</p>
</div>
<p class="required-field">
Required Fields*</p>
<div class="first-name">
<input type="text" class="field" name="contact[fullname]" id="first-name" autocomplete="name" placeholder="Full Name*" required="required"/>
</div>
<div class="email">
<input type="email" class="field" name="contact[email]" id="email" autocomplete="email" placeholder="Email*" required="required"/>
</div>
<div class="phone">
<input type="text" class="field" name="contact[phone]" id="phone" autocomplete="tel" placeholder="Phone Number*" required="required"/>
</div>
<div class="country">
<input type="text" class="field" name="contact[country]" id="phone" placeholder="Country" required="required"/>
</div>
<div class="checkbox-section">
<label for="pieces">What kind of piece would you like me to make? *</label>
<label><input name="contact[pieces]" type="checkbox" /> Earrings</label>
<label><input name="contact[pieces]" type="checkbox" /> Ring</label>
<label
><input name="contact[pieces]" type="checkbox" /> Pendant/Necklaces</label
>
<label><input name="contact[pieces]" type="checkbox" /> Bangles</label>
<label class="other-label"
><input name="contact[social]" type="checkbox" class="other-checkbox"/> Other <textarea class="other-textbox" name="" id="" cols="30" rows="2"></textarea>
</div>
<div class="date-completion">
<label>
Date of Completion?*
</label>
<input type="date" class="field" name="contact[date]"/>
</div>
<div class="budget">
<label>Your budget
(bespoke pieces are available from £1,500)*
</label>
<input type="text" class="field" name="contact[budget]" id="phone" placeholder="e.g. £3500" required="required"/>
</div>
<div class="request-type">
<select id="contact-select" class="field" name="contact[request_type]">
<option value="">
Would you like to include gemstones?
</option>
<option value="gemstones">Yes</option>
<option value="gemstones">No</option>
</select>
</div>
<div class="request-type">
<select id="contact-select" class="field" name="contact[request_type]">
<option value="">What type of metal do you have in mind? *</option>
<option value="metal">14ct Gold</option>
<option value="metal">14ct Rose Gold</option>
<option value="metal">14ct White Gold</option>
<option value="metal">18ct Gold</option>
<option value="metal">18ct Yellow Gold</option>
<option value="metal">18ct Rose Gold</option>
<option value="metal">18ct White Gold</option>
<option value="metal">Platium</option>
</select>
</div>
<div class="request-type">
<select id="contact-select" class="field" name="contact[request_type]">
<option value="">
Do you have reference photos to send? *
</option>
<option value="references">Yes</option>
<option value="references">No</option>
</select>
</div>
<div class="file-upload">
<input type="file" class="file-upload" name="contact[filename]">
</div>
<div class="checkbox-section">
<label>Which appointment communication would you prefer*</label>
<label><input name="contact[appointment]" type="checkbox" /> via Email</label>
<label><input name="contact[appointment]" type="checkbox" /> Phone Call</label>
<label
><input name="contact[appointment]" type="checkbox" /> Video Call</label>
</div>
<div class="message">
<textarea class="field area" name="contact[body]" id="message" placeholder="Please provide us with any further details. Do you have a particular design in mind, or a preferred shape? " required="required"></textarea>
</div>
<div class="checkbox-section">
<label for="social">How did you find Lenique Louis *</label>
<label><input name="contact[social]" type="checkbox" /> Friends/Family</label>
<label><input name="contact[social]" type="checkbox" /> Instagram</label>
<label
><input name="contact[social]" type="checkbox" /> Pinterest</label
>
<label><input name="contact[social]" type="checkbox" /> TikTok</label>
<label
><input name="contact[social]" type="checkbox" /> Google</label>
<label
><input name="contact[social]" type="checkbox" /> Facebook</label>
<label class="other-label"
><input name="contact[social]" type="checkbox" class="other-checkbox"/> Other <textarea class="other-textbox" name="" id="" cols="30" rows="2"></textarea></label>
</div>
<div class="disclaimer-info">
<p class="disclaimer-title">Disclaimer</p>
<p class="disclaimer-text">
Lenique Louis needs the contact information you provide to us to contact you about our products and services. You may unsubscribe from these communications at any time. For information on how to unsubscribe, as well as our privacy practices and commitment to protecting your privacy, please review our <a href="https://www.leniquelouis.com/pages/privacy-policy" target="_blank">Privacy Policy.</a>
</p>
</div>
<div class="submit">
<input type="submit" class="btn-contact" value="Send" />
</div>
</div>
</div>
{% endform %}
To troubleshoot the problem with your custom contact form, you can consider the following steps:
Verify that the form code is placed correctly on your website. Ensure that the code snippet you provided is placed within a relevant template or section file, such as contact.liquid
or page.contact.liquid
.
Check the form configuration in your Shopify admin panel. Go to "Settings" > "Notifications" and make sure that the appropriate email address is set to receive the form submissions. Also, ensure that the form fields in the code correspond to the expected fields in the notification settings.
Confirm that the necessary form fields are present and correctly named in the form code. Ensure that the field names used in the name
attributes of the form inputs match the field names expected in the notification settings.
Test the form submission process. Fill out the form on your website and submit it to see if you receive the submission email. Check your spam or junk folder as well, as the email might be filtered there.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024