Custom Contact Form Help

[ejunkins]

Hi,

I created the below custom contact form for my business, but I am not needing it to email me when a form is filled out and email the person filling out form a confirmation as well. Is this possible without using a third party?

<div style="text-align: center;">As much as we would like to accommodate large orders, we are a small team and require <span style="text-decoration: underline;"><strong>at least 24 hours notice</strong></span> for doughnut orders of&nbsp;<span style="text-decoration: underline;"><strong>4 dozen or more</strong></span>. Use the form below to request a special order. If you receive a confirmation email, your order will be ready at the date and time selected below. Payment will be due at pick up.&nbsp;</div>
<br>
<div style="text-align: center;"></div>
<div style="text-align: center;">
<p style="text-align: center;">For other special order questions, please email <a href="mailto:">--</a> or call us at&nbsp;<span aria-label="Call Phone Number (XXX) XXX-XXXX">(XXX) XXX-XXXX</span><span aria-label="Call Phone Number (XXX) XXX-XXXX">.</span></p>
</div>
<form>
<p>&nbsp;</p>
</form><form style="margin-top: 10px;">
<div class="form-row">
<div class="form-col"><label for="first-name">First Name *</label> <input required="" name="first-name" id="first-name" type="text"></div>
<div class="form-col"></div>
<br>
<div class="form-col"><label for="last-name">Last Name *</label> <input required="" name="last-name" id="last-name" type="text"></div>
</div>
<div class="form-row">
<div class="form-col"><label for="email">Email *</label> <input required="" name="email" id="email" type="email"></div>
<div class="form-col"></div>
<br>
<div class="form-col"><label for="phone">Phone Number *</label> <input required="" name="phone" id="phone" type="tel"></div>
</div>
<div class="form-row">
<div class="form-col"><label for="order">Product</label> <input readonly="readonly" value="Cinnamon Sugar Doughnuts" name="order" id="order" type="text"></div>
<br>
<div class="form-col"><label for="quantity">Quantity (in dozens)</label><select name="quantity" id="quantity">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><span style="font-size: 12px; color: red;" class="disclaimer">*For special orders, a minimum of 4 dozen cinnamon sugar doughnuts is required. Anything less can be purchased in store.</span></div>
</div>
<div class="form-row">
<div class="form-col"><label for="order">Product</label> <input readonly="readonly" value="Plain Doughnuts" name="order" id="order" type="text"></div>
<div class="form-col"></div>
<br>
<div class="form-col"><label for="quantity">Quantity (in dozens)</label><select name="quantity" id="quantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></div>
</div>
<div class="form-row">
<div class="form-col"><label for="date">Pick Up Date *</label> <input required="" min="" name="date" id="date" type="date"> <span style="display: none;" class="error-message" id="date-error"></span> <script>// <![CDATA[
// JavaScript code for error message
        var dateInput = document.getElementById('date');
        var dateError = document.getElementById('date-error');

        dateInput.addEventListener('input', function () {
          var selectedDate = new Date(this.value);
          var dayOfWeek = selectedDate.getUTCDay();
          if (dayOfWeek === 1 || dayOfWeek === 2) {
            dateError.style.display = 'block';
            dateError.textContent = "We're sorry for the inconvenience. We are closed on Mondays and Tuesdays. Please choose a different date for pick up.";
          } else {
            dateError.style.display = 'none';
            dateError.textContent = '';
          }
        });
// ]]></script></div>
<div class="form-col"></div>
<br>
<div class="form-col"><label for="time">Pick Up Time *</label><select required="" name="time" id="time">
<option selected="selected" disabled="disabled" value="">Select a time</option>
<option value="08:00">8:00 AM</option>
<option value="09:00">9:00 AM</option>
<option value="10:00">10:00 AM</option>
<option value="11:00">11:00 AM</option>
<option value="12:00">12:00 PM</option>
<option value="13:00">1:00 PM</option>
<option value="14:00">2:00 PM</option>
<option value="15:00">3:00 PM</option>
<option value="16:00">4:00 PM</option>
<option value="17:00">5:00 PM</option>
</select></div>
</div>
<div class="form-row"><button style="padding: 10px 20px; background-color: #000000; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;" type="submit">Submit</button></div>
</form>
<style><!--
form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
  }

  .form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
 .error-message {
    color: red;
    font-size: 12px;}

  .form-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  label {
    font-weight: bold;
  }
--></style>