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

xnyjyh
Explorer
200 0 9

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! 🙂
Replies 6 (6)

Liqiud_xPert_SJ
Shopify Partner
723 92 112

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

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
xnyjyh
Explorer
200 0 9

it did not work. I must be missing something

Liqiud_xPert_SJ
Shopify Partner
723 92 112

@xnyjyh 

 

Can you please show me your entire code block?

 

Thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
xnyjyh
Explorer
200 0 9

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:tansi@howahoriginals.com">tansi@howahoriginals.com</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>

Liqiud_xPert_SJ
Shopify Partner
723 92 112

@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

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
xnyjyh
Explorer
200 0 9

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?