先日、"メールアドレスを記入して実行すると、メーラーが立ち上がり送信先に先ほど記入したメールアドレス宛てに届くように記入されたものが立ち上がりますが、メールアドレスを入力フォームなどでホームページ使用者に記入してもらう方法はないのでしょうか?"
と質問させていただきました。
回答いただきましたが、再度追加で質問させていただきます。
回答いただいた内容は
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で質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- MySQL php テーブルを作れない 2 2022/11/17 18:22
- PHP php テーブルが作成できない 1 2022/11/17 23:41
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
submitの処理の後別の画面を表...
-
checkboxを「変更不可」にでき...
-
mailtoについて
-
1アクションでPOST・GET、両方...
-
HTMLのフォームタグの送信順に...
-
リロード時にも<input type="re...
-
リンクをクリックした時にform...
-
送信ボタン押下時に値が未入力...
-
フォーム要素以外にもname属性...
-
複数のフォームを一括で送信す...
-
【html】)パスワード認証フォー...
-
</form>タグを使用すると強制的...
-
UTF-8 コードでのmailtoの文字化け
-
HTML Formの属性actionは2つの...
-
submitをボタン以外にするには
-
INPUT TEXT内の文字位置を指定...
-
HTMLとPerl間のページ遷移につ...
-
フォームに入力した値をURLに付...
-
Ajax + Servlet のリクエスト...
-
input タグで「空白を含む変数...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
submitをボタン以外にするには
-
URL パラメータを使ってフォー...
-
複数のフォームを一括で送信す...
-
【html】)パスワード認証フォー...
-
フォーム要素以外にもname属性...
-
送信ボタン押下時に値が未入力...
-
checkboxを「変更不可」にでき...
-
1アクションでPOST・GET、両方...
-
メールフォームの送信ボタンが...
-
リンクをクリックした時にform...
-
type="hidden"を使って時刻を送信
-
GETをPOSTに変更したところ 送...
-
リロード時にも<input type="re...
-
<a href=**?***=***>をGET方式で
-
フォームに入力した値をURLに付...
-
長文のmailtoの使い方
-
mailtoについて
-
formタグのactionパラメータで...
-
送信フォームを2つ用意する方法
-
・フォームの送信先(action)...
おすすめ情報