通販：注文書（メール）

前のページ

メール送信機能を作成

注文の確認ができたらメールの送信を実行します。
確認画面の下に送信ボタンを用意して、メールのソフトを起動させます。

実例（p7-5.html）

フォームにボタンを追加

フォームの内側、注文確認画面の下に<div>タグを使ってボタンを配置します。

	</table>
	<div class="menutitle">注文確認</div>
	<textarea name="order_text" cols="90" rows="10" readonly id="order_text"></textarea>
	<div class="menutitle"><input type="button" value="メール" onClick="open_mail()"></div>
	</form>
</div>

menutitle（クラス）のCSSをそのまま利用してボタンを目立たせます。
ボタンをクリックするとユーザー関数open_mail()が呼び出されます。

スクリプトの追加

<script>タグ内にユーザー関数open_mail()を作ります。

その前に、初期設定の中に送信先となるメールアドレスを変数mailで用意しておきます。

//メールアドレス
mail = "dammy@dammy.com";

では、ユーザー関数を作りましょう。

function open_mail() {
	var t;
	
	t = document.order.order_text.value;

	if (t != "") {
		this.location.href = "mailto:" + mail + "?subject=注文書&body=【ご注文内容】" + t + "%0D%0A【お名前】%0D%0A【ご住所】%0D%0A【電話番号】%0D%0A【メールアドレス】";
	}
}

変数tには<textarea>で表示した内容が入ります。

「this.location.href」は<a>タグのリンクと同じで、ブラウザに指定のURLを開きます。
ここでは「http:」ではなく「mailto:」を使っていますので、メールを送信することを意味しています。ブラウザはメールのアプリを起動し、メールアドレスや指定の表題や本文を送ります。

メールの本文には、商品の注文内容の他に、名前、住所、電話番号、メールアドレスを書いてもらえるように見出しだけ表記しています。

メールのリンク形式の詳細はこちらを参照してください。

メールに送信するテキストの中に「%0D%0A」というコードがあります。これは改行を表すコードです。
16進数の表記ですので、「0」はゼロです。

次のページへ

戻る