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:
Submit Return
.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 */
}
}