Custom Contact Form submissions not sending

[YSMF13]

Hi! I created a custom form but nothing actually happens when I click submit. I’m not receiving any emails. It’s odd because the Shopify contact form works just fine, but not my custom form. Can you help me figure out why? FYI, I am currently using the latest version of Dawn theme and I have the captcha turned off in my Shopify settings.

Below is the code I’m using:

<!-- Returns Form Template -->
<form method="post" action="/contact" enctype="multipart/form-data" class="contact-form return-form">
<!-- Customer Information -->
<div class="form__input-wrapper">
<input type="text" id="name" name="name" class="form__input" placeholder="Name" required>
</div>

<div class="form__input-wrapper">
<input type="email" id="email" name="email" class="form__input" placeholder="Email" required>
</div>

<div class="form__input-wrapper">
<input type="text" id="order-number" name="order-number" class="form__input" placeholder="Order Number" required>
</div>

<!-- Reason for Return (Dropdown) -->
<div class="form__input-wrapper">
<select id="reason-dropdown" name="reason-dropdown" class="form__input" required>
<option value="" disabled selected>Reason for Return</option>
<option value="defective">Defective/Misprint/Damage</option>
<option value="never_received">Never Received</option>
<option value="invalid_address">Invalid Address</option>
</select>
</div>

<!-- Additional Explanation for Return -->
<div class="form__input-wrapper">
<textarea id="reason" name="reason" class="form__input" placeholder="Additional Explanation (Optional)" required></textarea>
</div>

<!-- Image Upload -->
<div class="form__input-wrapper">
<input type="file" id="file" name="file" class="form__input" accept="image/*" required>
</div>

<!-- Submit Button -->
<div class="form__input-wrapper">
<button type="submit" class="form__submit button">Submit Return</button>
</div>
</form>

<!-- Custom CSS for Rectangular Fields, Responsiveness, and Text Styling -->
<style>
.return-form {
width: 60%; /* Set the form width to 60% */
max-width: 100%; /* Ensure it doesn't exceed 100% on very small screens */
margin: 0 auto; /* Center the form horizontally */
}

.return-form .form__input {
width: 100%; /* Make the input fields responsive */
padding: 10px; /* Padding inside the input */
border-radius: 0px; /* Rectangular shape */
border: 1px solid #ccc; /* Light border */
box-sizing: border-box; /* Ensure padding does not affect width */
margin-bottom: 15px; /* Space between fields */
color: #000; /* Black text inside the input fields */
font-size: 16px; /* Slightly bigger font size */
}

/* Placeholder Styling */
.return-form .form__input::placeholder {
color: #000; /* Set placeholder (field names) text to black */
font-size: 16px; /* Adjust placeholder font size */
}

.return-form textarea.form__input {
height: 150px; /* Set a default height for the textarea */
resize: vertical; /* Allow users to resize vertically */
color: #000; /* Black text inside the textarea */
font-size: 16px; /* Slightly bigger font size */
}

.return-form select.form__input {
appearance: none; /* Remove default dropdown styles */
-webkit-appearance: none; /* Remove Safari default dropdown styles */
-moz-appearance: none; /* Remove Firefox default dropdown styles */
padding: 10px;
background-color: #fff;
font-size: 16px;
}

.return-form .form__submit {
width: 100%; /* Make the submit button full width */
padding: 10px; /* Padding for the button */
border-radius: 0px; /* Rectangular shape for button */
background-color: #000; /* Customize your button background */
color: #fff; /* Button text color */
border: none; /* Remove border for button */
font-size: 16px; /* Slightly bigger font size for button */
}

/* Media Query for Mobile Adjustments */
@media (max-width: 768px) {
.return-form {
width: 60%; /* Set the form width to 60% for mobile as well */
}
}
</style>

[Small_Task_Help]

Hi,

Hope following solutions will help you

• First try with submitting a basic contact form with only the name, email, and message fields, all are working well or not.
• Update form by including necessary hidden fields for Shopify’s contact form

<form method="post" action="/contact" enctype="multipart/form-data" class="contact-form return-form">
  <!-- Required Hidden Inputs -->
  <input type="hidden" name="form_type" value="contact">
  <input type="hidden" name="utf8" value="✓">

  <!-- Customer Information -->
  <div class="form__input-wrapper">
    <input type="text" id="name" name="contact[name]" class="form__input" placeholder="Name" required>
  </div>

  <div class="form__input-wrapper">
    <input type="email" id="email" name="contact[email]" class="form__input" placeholder="Email" required>
  </div>

  <div class="form__input-wrapper">
    <input type="text" id="order-number" name="order_number" class="form__input" placeholder="Order Number" required>
  </div>

  <!-- Reason for Return (Dropdown) -->
  <div class="form__input-wrapper">
    <select id="reason-dropdown" name="reason" class="form__input" required>
      <option value="" disabled selected>Reason for Return</option>
      <option value="defective">Defective/Misprint/Damage</option>
      <option value="never_received">Never Received</option>
      <option value="invalid_address">Invalid Address</option>
    </select>
  </div>

  <!-- Additional Explanation for Return -->
  <div class="form__input-wrapper">
    <textarea id="reason" name="contact[body]" class="form__input" placeholder="Additional Explanation (Optional)" required></textarea>
  </div>

  <!-- Image Upload -->
  <div class="form__input-wrapper">
    <input type="file" id="file" name="file" class="form__input" accept="image/*">
  </div>

  <!-- Submit Button -->
  <div class="form__input-wrapper">
    <button type="submit" class="form__submit button">Submit Return</button>
  </div>
</form>

Ensure there are correct name attributes in the form