mailtoの記入を入力フォームを使用して

質問

先日、"メールアドレスを記入して実行すると、メーラーが立ち上がり送信先に先ほど記入したメールアドレス宛てに届くように記入されたものが立ち上がりますが、メールアドレスを入力フォームなどでホームページ使用者に記入してもらう方法はないのでしょうか？"
と質問させていただきました。
回答いただきましたが、再度追加で質問させていただきます。

回答いただいた内容は

mailto の使用は、閲覧者の環境によって左右される問題がおきやすいので、
一般的にはサーバーが提供するメールフォーム機能等の利用をお勧めします

それでも mailto を使う必要があるならば

<form name=mailform>
<input name=to type=text value="info@example.com">へ<button type=submit>送信</button>
</form>

<script>window.addEventListener('load',function(ev){
document.forms['mailform'].addEventListener('submit',function(submitEv){
submitEv.preventDefault();
var form = submitEv.target;
var to = form.elements['to'].value;
if (!to) return;
var url = "mailto:" + to + "?subject=hello%20世界&body=it%20is%20mail%0Aよろしくね";
var a = form.appendChild(document.createElement('a'));
a.href = url;
a.click();
form.removeChild(a);
}, false);
}, false)</script>
という内容でありました。
var url = "mailto:" + to + "?subject=hello%20世界&body=it%20is%20mail%0Aよろしくね";
で記入されている部分も入力フォームで作成したいのですが、
どうすればよいでしょうか？

ご指導よろしくお願いします。

回答No.2

t_ohta · ベストアンサー

こんな感じで項目が増やせます。

<form name=mailform>
宛先：<input name=to type=text value="info@example.com"><br>
件名：<input name=subject type=text value="hello"><br>
お名前：<input name=name type=text value="namae"><br>
住所：<input name=addr type=text value="jyusyo"><br>
<button type=submit>送信</button>
</form>

<script>window.addEventListener('load',function(ev){
document.forms['mailform'].addEventListener('submit',function(submitEv){
submitEv.preventDefault();
var form = submitEv.target;
var to = form.elements['to'].value;
var subject = form.elements['subject'].value;
var name = form.elements['name'].value;
var addr = form.elements['addr'].value;
var body = "お名前："+ name + "%0D%0A住所：" + addr
if (!to) return;
var url = "mailto:" + to + "?subject=" + subject + "&body=" + body;
var a = form.appendChild(document.createElement('a'));
a.href = url;
a.click();
form.removeChild(a);
}, false);
}, false)</script>

お礼

ご報告が遅れました。
ご指導有難うございました。
教えていた通りに作業を進めまして、
うまく作成することができました。
今後、疑問が出た場合はまた新たに質問させていただきます。
ご指導有難うございました。

回答No.1

t_ohta

こんな感じですかね。
subjectやbodyはメールソフトによっては受け付けないので宛先しか入らない場合があります。
日本語を入力すると文字化けする場合があります。文字コード変換やエスケープ処理を入れれば多少改善できるでしょうが、OSやメールソフトによって受け付ける文字コードが異なりますので、一筋縄では行きません。

<form name=mailform>
宛先：<input name=to type=text value="info@example.com"><br>
件名：<input name=subject type=text value="hello"><br>
本文：<input name=body type=text value="Hi"><br>
<button type=submit>送信</button>
</form>

<script>window.addEventListener('load',function(ev){
document.forms['mailform'].addEventListener('submit',function(submitEv){
submitEv.preventDefault();
var form = submitEv.target;
var to = form.elements['to'].value;
var subject = form.elements['subject'].value;
var body = form.elements['body'].value;
if (!to) return;
var url = "mailto:" + to + "?subject=" + subject + "&body=" + body;
var a = form.appendChild(document.createElement('a'));
a.href = url;
a.click();
form.removeChild(a);
}, false);
}, false)</script>

お礼

ご回答有難うございます。
件名、本文も入力フォームを使用して作れるようになりました。
有難うございます。

本文の中にお名前、住所のように複数の入力フォームを作りたい場合は
どうすればよいかも教えていただけませんでしょうか。
お恥ずかしい話ですが、最初の質問で聞くべきでしたが、疑問は増えるばかりで
大変申し訳ありませんがよろしくお願い申し上げます。