Angular JS

コンタクトフォームの入力データをPHPに送信する方法

2015年5月18日

コンタクトフォームの実装がangularJSを使うととても簡単にできます。
今回は、コンタクトフォームに入力されたデータをangularJSを経由してPHPに送信する方法をまとめます。

※コンタクトフォームのデータをangularJSでバリデートする方法はこちらのページを参照ください。
※PHPによるメール送信プログラムの記述方法はこちらのページを参照ください。

$htmlサービスを利用

angularJSで用意されているサービス「$html」を利用して実現します。

フォームデータを$scope.formdataに格納したとしましょう。
そのデータを$htmlサービスを利用して、PHPに送信します。

contactController.js
var myApp = angular.module('myApp', []);
myApp.controller('contactController',function($scope, $http){
	$scope.submitContact = function(){
		$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';	//(a)
		$http.post('php/sendmail.php',$scope.formdata)	//(b)
			.success(function(data, status, headers, config){
				//dataで、phpの出力値を取得し、その値を用いて何かしらの作業を実行
			});
	}
})

contact.html
<form class="formContact" name="formContact" ng-controller="contactController">
	<label>お名前</label>
	<input class="inputText" name="name" ng-model="formdata.name" type="text" />
	<label>コメント</label>
	<textarea name="comment" ng-model="formdata.comment" ></textarea>
	<button ng-click="submitContact()" >送信する</button>
</form>

sendmail.php
<?php
	$postdata	=	file_get_contents("php://input");	//(c-1)
	$postdata	=	json_decode($postdata);			//(c-2)
	$name		=	$postdata->name;			//(c-3)
	$comment	=	$postdata->comment;			//(c-3)
	//取得したデータを用いてメール送信
?>

(a) : 決まり文句

このように記述することでデータをPHPに送信できるようになります。

(b) : post形式でデータの送信

$http.post(送信先ロケーション,送信するデータ);

(c) : PHPでデータ受け取り、抽出

(c-1)は決まり文句で、こうすることでangularJSで送信したデータを受け取れる。
(c-2)で受け取ったデータをPHPで使える形式にデコードする。
(c-3)で各データを抽出する。

 
これでhtml ⇔ angularJS ⇔ PHPでのデータのやり取りができるようになります。

まとめ

今回は実例としてコンタクトフォームで入力したデータをPHPでメール送信するプログラムをangularJSをかませて実現しました。
これは、メール送信だけ可能になるのではありません。
PHPからmySQLデータベースにデータを格納したり、逆にデータを取得してhtmlに渡す、ということも可能になります。

html + angularJS + phpでプログラムをコーディングしていると、それぞれのファイルが劇的に読みやすくなるので、非常におすすめな方法です。

お問い合わせやコメント

ウェブサイト制作の依頼やこの投稿へのコメントなど、なんでもいいのでお問い合わせ待っています!ウェブデザインのチューターもしているのでそういったことへの依頼も受け付けています。

送信完了しました。 お問い合わせ確認用メールを上記のメールアドレス宛てに送信しましたのでご確認ください。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信完了しました。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信に失敗しました。お手数ですが入力内容をご確認の上、再度送信ボタンをクリックしてください。