先日、"メールアドレスを記入して実行すると、メーラーが立ち上がり送信先に先ほど記入したメールアドレス宛てに届くように記入されたものが立ち上がりますが、メールアドレスを入力フォームなどでホームページ使用者に記入してもらう方法はないのでしょうか?"
と質問させていただきました。
回答いただきましたが、再度追加で質問させていただきます。
回答いただいた内容は
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ベストアンサー
- 回答日時:
こんな感じで項目が増やせます。
<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
- 回答日時:
こんな感じですかね。
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>
ご回答有難うございます。
件名、本文も入力フォームを使用して作れるようになりました。
有難うございます。
本文の中にお名前、住所のように複数の入力フォームを作りたい場合は
どうすればよいかも教えていただけませんでしょうか。
お恥ずかしい話ですが、最初の質問で聞くべきでしたが、疑問は増えるばかりで
大変申し訳ありませんがよろしくお願い申し上げます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<a href=**?***=***>をGET方式で
-
submitをボタン以外にするには
-
1アクションでPOST・GET、両方...
-
■mailtoで文字化けする
-
FireFoxでも対応できるmailtoの...
-
プロトコルmailtoはサポートさ...
-
URL パラメータを使ってフォー...
-
HTMLのフォームタグの送信順に...
-
長文のmailtoの使い方
-
フォームをメールで送信できな...
-
<form>タグに2つのボタン
-
フォーム要素以外にもname属性...
-
mailtoについて
-
複数のフォームを一括で送信す...
-
HTMLのoptionタグ部分に画像を...
-
inputタグのclass名にコロン「:...
-
HB9のリストボックスにリンク
-
今日の日付をセットしたいのですが
-
チェックボックスにチェックで...
-
JavaScript の 「showDialog」
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
submitをボタン以外にするには
-
1アクションでPOST・GET、両方...
-
フォーム要素以外にもname属性...
-
複数のフォームを一括で送信す...
-
type="hidden"を使って時刻を送信
-
URL パラメータを使ってフォー...
-
リンクをクリックした時にform...
-
<a href=**?***=***>をGET方式で
-
送信ボタン押下時に値が未入力...
-
長文のmailtoの使い方
-
formなしでPOSTデータを送信・受信
-
送信フォームを2つ用意する方法
-
フォームの送信ボタンの位置
-
同じnameのhiddenで別々の内容...
-
フォームに入力した値をURLに付...
-
mailtoについて
-
HTMLからメーラーを起動し...
-
CGIを使わず、HTMLだけで作るメ...
-
チェックボックスにチェックを...
-
【html】)パスワード認証フォー...
おすすめ情報