How can I add a destination email to my custom contact form?

[xnyjyh]

Hello, I have created a custom contact form for dawn theme as i didn't like the default one. Im stuck on "submit"

and do not how to add the destination email address. 

<input type="submit" class="button" value="Send message">

How do I do this? Thanks in advance! 🙂

[Liquid_xPert_SJ]

Hi @xnyjyh 

You must need to wrap your custom form into the form tags like example below

{%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
Your form code 
<input type="submit" class="button" value="Send message">
{%- endform -%}

Thanks

[xnyjyh]

it did not work. I must be missing something

[Liquid_xPert_SJ]

@xnyjyh 

Can you please show me your entire code block?

Thanks

[xnyjyh]

this is the whole code which includes the link slide-out modal:

<div class="box">

            <a class="pop-button" href="#popup2">Contact us</a>

</div>

    <div id="popup2" class="overlay">

            <div class="popup">

                        <a class="close" href="#a">&times;</a>

                        <div class="content">

    <style>

body {font-family: Work Sans;}

* {box-sizing: border-box;}

input[type=text], select, textarea {

  font-family: Work Sans;

  font-size: 14px;

  width: 100%;

  padding: 12px;

  padding-left:0px;

  border: 1px solid transparent;

  border-bottom: 1px solid black!important;

  box-sizing: border-box;

  margin-top: 6px;

  margin-bottom: 16px;

  resize: vertical;

}

input[type=text], select, textarea:focus{

    outline: none;

    box-shadow: none!important;

}

input[type=submit] {

  width: 100%;

  font-size: 14px;

  font-family: Work Sans;

  background-color: transparent;

   border: 1px solid black;

  color: black;

  padding: 12px 20px;

  cursor: pointer;

  font-weight:500!important;

}

.contact-container {

  background-color: none;

  padding: 20px;

}

::placeholder {

  color: black;

  opacity: 1; /* Firefox */

}

input[type=checkbox] {

  margin-top: 26px;

  accent-color:black;

}

      .popup-header {

        padding:20px;

      }

</style>

<div class="popup-header">

<h4 style="font-weight:500;">Contact</h4>

<h5>Have you checked our frequently asked questions?</h5>

<h5><a style="color:black; text-underline-offset:4px;"href="https://www.howahoriginals.com/pages/frequently-asked-questions">Go to the FAQs</a></h5>

<br>

<h5>E-mail:&nbsp;<a style="color:black; text-underline-offset:4px;"href="mailto:[email protected]">[email protected]</a></h5>

<br>

<h4 style="font-weight:500;">Send message</h4>

<p style="font-size:12px; font-weight:400;">All fields marked with an * are mandatory</p>

</div>

<div class="contact-container">

  <form action="/action_page.php">

        <select type="select" required id="title" name="Title*">

         <option value="usa">Title*</option>

      <option value="canada">Mr.</option>

      <option value="usa">Mrs.</option>

      <option value="usa">-</option>

    </select>

    <input type="text"  required name="firstname" placeholder="First name*">

    <input type="text" required name="lastname" placeholder="Last name*">

    <input type="text" required name="email" placeholder="Email address*">

    <select type="subject" name="Subject*">

      <option value="Topic">Subject*</option>

      <option value="Product information">Product information</option>

      <option value="Order status">Order status</option>

      <option value="Returns">Returns</option>

      <option value="Order status">Order status</option>

      <option value="My account">My account</option>

      <option value="other">Other</option>

    </select>

    <textarea name="message" placeholder="Your message*" style="height:44px"></textarea>

 <h5><label>

      <input type="checkbox" name="subscribe"> Subscribe to receive Howah Newsletter

    </label></h5>

    <br>

<input type="submit" class="button" value="Send message">

  </form>

  <br><br>

  <p style="font-size:12px; color:black; font-weight:400;">By submitting this form, you confirm that you have read and understood the <a style="color:black; text-underline-offset:4px;"href="https://www.howahoriginals.com/pages/privacy-policy">Privacy Policy</a> and acknowledge that your personal information will be used to respond to, and manage your request</p>

</div>   

                        </div>

            </div>

</div>

    <style>

      .overlay .popup {

  transform: translateX(100%);

  transition: all 1s;

}

.overlay:target .popup {

  transform: translateX(0%);

}

.payment {

  max-width: 200px;

}

.pop-button {

  padding-left: 0px!important;

  font-family: work sans!important;

  font-weight: 600!important;

  font-size: 14px!important;

  padding: 10px;

  color: #000!important;

  text-decoration: underline;

  text-underline-offset: 4px;

  cursor: pointer;

  transition: all 0.3s ease-out;

}

.pop-button:hover {

  text-decoration: none;

}

.overlay {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(245, 245, 245, 0.85)!important;

  transition: opacity 500ms;

  visibility: hidden;

  z-index:9999;

}

.overlay:target {

  visibility: visible;

  opacity: 1;

}

.popup {

  margin: 70px auto;

  padding: 20px;

  background: #fff;

  width: 40%;

  position: relative;

  transition: all 5s ease-in-out;

  z-index: 10000!important;

  opacity: 1;

}

.popup h2 {

  margin-top: 40px;

  color: #000;

  font-family: work sans;

}

.popup .close {

  position: absolute;

  top: 0px;

  right: 50px;

  transition: all 200ms;

  font-size: 30px;

  font-weight: 100;

  text-decoration: none;

  color: #000;

}

.popup .content {

  max-height: 30%;

  overflow: auto;

}

.free-secure{font-size:14px!important;font-weight:500;color:black;}

.default-text{font-size:14px!important;font-weight:300;color:black;}

    .popup {

   margin: 0 !important;

   padding: 20px;

   background: #fff;

   width: 50% !important;

   position: absolute !important;

   transition: all 5s ease-in-out;

   z-index: 10000!important;

   right: 0 !important;

   height: 100vh!important;

 }

 .popup .content {

   max-height: 100% !important;

   overflow: auto;

 }

 @media only screen and (max-width: 768px) {

   .popup {

   width: 100% !important;

   overflow:auto!important;

}

}

</style>

[Liquid_xPert_SJ]

@xnyjyh 

if you want to submit form to your custom php file then you have to place that php file to the external server because the path you are indicating in the /action_page.php is not accessable thats why the form is not working.

Thanks

[xnyjyh]

thats just the way the code was before i customized the CSS. Its been changed many times to onclick() to external FormSubmit etc etc in ,<form = srcXXXXXXXXXXXXXXXXXXXXXXX.... etc> and nothing works. Watch many tuts and followed to a T, and nothing works. I was wanting to somehow integrate shopifys send code to my form button. How?