如何創建帶有mailto鏈接的自定義聯系表單，並在郵件上復制信息？

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添加為表單的action屬性 ，如下所示：

<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

如果您希望像正常的mailto鏈接一樣打開它，這將需要一些javascript。首先，我們需要一個可構造您鏈接的函數。

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來完成此任務。

您要做的第一件事-是在<a>標記中添加適當的href ，如下所示：

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

詢問是否需要進一步的幫助。