How to create a custom contact form with mailto link and copy informations on the mail?

Question

I'm creating a simple contact form, with : name and object inputs + send button (which is a <a> inside a <div> the reason why i'm using an <a> tag is because i want to use the mailto)

I want to get the name and the object from my form to the mail (after entering the name and the object and click on "send").

How to perform that please?

This is Jsfiddle

And my snippet :

 p{ width:50%; color: #666; text-align: center; margin: 0 auto; } .name_input{ display:block; margin : 50px auto; padding-left:10px; border-radius:5px; border:2px solid rgb(255,194,0); width: 50%; height:30px; } .btn{ text-align:center; background-color:rgb(255,194,0); padding:10px; margin: 10px auto; width:30%; cursor :pointer; } .btn:hover{ background-color: #666; } a{ text-decoration:none; color:#FFF; } 

 <form> <p> Enter the object and your name, click on "send" the object will be on the email object, and your name will appears on the body of the email. </p> <input class="name_input" type="text" name="contact-object" id="contact-object" placeholder="The object"/> <input class="name_input" type="text" name="contact-name" id="contact-name" placeholder="Your name"/> <div class="btn"> <a href="mailto:www.myWebSite.com?subject=THE OBJECT DYNAMICALLY &body=THE NAME DYNAMICALLY">send</a> </div> </form> 

Answer 1

You can add mailto as a form's action attribute too, like this:

<form action="mailto:www.myWebSite.com" method="GET" enctype="text/plain">
  <p>
  Enter the object and your name, click on "send" the object will be on the email object, and your name will appears on the body of the email.
  </p>
   <input class="name_input" type="text" name="subject" id="contact-object" placeholder="The object"/>
  <input class="name_input" type="text" name="body" id="contact-name" placeholder="Your name"/>

  <div class="btn">
  <input type="submit" value="Submit" />

  </div>
</form>

Answer 2

This is going to require some javascript if you want it to open like normal mailto link.. First we need a function that will construct you're link.

function constructMailTo() {
    var contactObject = document.getElementById('contact-object').value;
    var contactName = document.getElementById('contact-name').value;

    var mailto = "mailto:myEmail@domain.com?Subject=Object: " + contactObject + "name: " + contactName;

    // URI escape the link
    return encodeURI(mailto);
}

And a function to insert it into the element

function insertMailto() {
    document.getElementById('mailto-element').href = constructMailTo();
}

And finally we need to trigger this whenever the inputs change.

<input class="name_input" type="text" name="contact-object" id="contact-object" placeholder="The object" onchange="insertMailTo();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange()/>

<input class="name_input" type="text" name="contact-name" id="contact-name" placeholder="Your name" onchange="insertMailTo();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange()/>;

Answer 3

You will need to use js for this task.

First thing you have to do - is to add proper href to <a> tag, something like that:

<a href="mailto:info@myWebSite.com?subject=Your Subject&body=Your Body>send</a>

So I would do something like this:

var mailButton = function mailButton(mailto, title, mailBody){
   var href = "mailto:"+mailto+"?subject="+title+"&body="+mailBody;
   var a = document.createElement(a);
   a.setAttribute('href', href);
   return a
}

Then add a function to handle form submission and clicking that <a> element

function fakesubmit(e){
   e.preventDefault();
   var title = document.getElementById('contact-object').value;
   var mailBody = document.getElementById('contact-name').value;
   var a = mailButton(info@myWebSite.com, title, mailBody);
   a.click();
}

And Last - your form:

<form onsubmit="fakesubmit(e)">
  <p>
  Enter the object and your name, click on "send" the object will be on the email object, and your name will appears on the body of the email.
  </p>
   <input class="name_input" type="text" name="contact-object" id="contact-object" placeholder="The object"/>
  <input class="name_input" type="text" name="contact-name" id="contact-name" placeholder="Your name"/>

  <input type="submit" class="btn" value="send"/>
</form>

Ask if you need further help.