Как создать пользовательскую форму контакта с почтовым сообщением и скопировать информацию по почте?

Question

Я создаю простую форму контакта с: именем и объект вход + отправить кнопку (которая является <a> внутри <div> причиной, почему я использую <a> tag потому, что я хочу использовать MailTo)

Я хочу получить имя и объект из моей формы в почту (после ввода имени и объекта и нажмите «отправить»).

Как это выполнить, пожалуйста?

Это Jsfiddle

И мой сниппет:

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

Вы можете добавить mailto как атрибут действие по формы в тоже, как это:

<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

Для этого потребуется некоторый javascript, если вы хотите, чтобы он был открыт, как обычная ссылка mailto. Сначала нам нужна функция, которая построит вашу ссылку.

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); 
} 

И функция, чтобы вставить его в элемент

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

И, наконец, нам нужно, чтобы вызвать это всякий раз, когда менять входы.

<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

Для выполнения этой задачи вам понадобится js.

Первое, что нужно сделать - это добавить собственно href к <a> тегов, что-то вроде этого:

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

Так что я хотел бы сделать что-то вроде этого:

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 
} 

Затем добавить функцию для обработки отправки формы и нажатия на нее <a> элемент

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(); 
} 

и последнее - ваша форма:

<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> 

Спросите, если вам нужна дополнительная помощь.