☰

Written by Manabu Bannai

【CodeIgniter】フォームの入力内容をメール送信する方法【フォームヘルパー利用】

CodeIgniter PROGRAMMING

当記事におけるページ構成の理解のため、事前に以下の記事をご確認ください。
【CodeIgniterの基礎】ビューの作成、複数ビューの読み込み設定

以下の手順で解説していきます

  1. コンタクトページとフォームの作成
  2. フォームのバリデーション設定
  3. フォームの入力内容をメール送信する設定

作成するフォームの仕様は以下のとおり。

  • 名前、Email、メッセージ内容が入力できる。
  • 送信ボタンをおすと、特定のアドレスにEmailが送信される。

それではまとめていきます。

１．CodeIgniterでコンタクトページとフォームを作成する方法

contactページのviewの読み込み設定をしていく

編集ファイル：application/controllers/site.php
以下を追記します。

public function contact(){
	$this->load->view("site_header");
	$this->load->view("site_nav");
	$this->load->view("content_contact");
	$this->load->view("site_footer");
}

content_conact.phpを作成する

ファイル作成場所：application/views/content_contact.php


	load->helper("form");
	//URLヘルパー、HTMLヘルパーは全ページで読み込むが、formヘルパーはformページのみの読み込みでOK
	echo form_open("site/send_email");	//フォームのaction先を指定する
	echo form_close();
	?>

上記を入力すると、HTMLは以下のように出力されます。

<form action="http://localhost:8888/basicsite/site/send_email" method="post" accept-charset="utf-8"></form>

フォームの名前ラベルを作成する

編集ファイル：application/views/content_contact.php

echo form_label("Name: ", "fullName");	//名前のラベルを作成

上記を入力すると、HTMLは以下のように出力されます。

<label for="fullName">Name: </label>

フォームに名前用のinput要素を作成する

編集ファイル：application/views/content_contact.php

data=array(
	"name" => "fullName",
	"id" => "fullName",
	"value" => ""
);
echo form_input($data);	//名前データのinput

上記を入力すると、HTMLは以下のように出力されます。

<input type="text" name="fullName" value="" id="fullName"  />

フォームにEmail用input要素を追加。

場所：application/views/content_contact.php
名前の部分を作成したフローと同じ

echo form_label("Email: ", "email");	//Emailラベルを作成
$data=array(
	"name" => "email",
	"id" => "email",
	"value" => ""
);
echo form_input($data);	//Emailデータのinput

フォームにテキストエリア用のinput要素を追加

編集ファイル：application/views/content_contact.php

echo form_label("Message: ", "message");	//テキストエリアを作成
$data=array(
	"name" => "message",
	"id" => "message",
	"value" => ""
);
echo form_textarea($data);	//テキストエリアデータのinput

ここまでで、以下のようなフォームができあがります。
form_no_styling

見づらいのでフォームにサクッとスタイリングします

編集ファイル：styles/style.css

#contact{
	width: 170px;
	min-height: 100%;
	margin: 0 auto;
	padding: 20px;
}

submitボタンを作る

編集ファイル：application/views/content_contact.php

echo form_submit("contactSubmit", "Send");

以上でフォームの作成が完了です。
つぎにフォームにバリデーションを加えていきます。

2. CodeIgniterを使ったフォームにバリデーション設定する方法

small__4653088356

フォームバリデーションライブラリを読み込む

編集ファイル：application/controllers/site.php

public function send_email(){
	$this->load->library("form_validation");
}

formバリデーションのルール設定を行なう

編集ファイル：application/controllers/site.php

public function send_email(){
	$this->load->library("form_validation");

	$this->form_validation->set_rules("fullName", "Full Name", "required");
	$this->form_validation->set_rules("email", "Email", "required");
	$this->form_validation->set_rules("message", "Message", "required");
}

文法は以下のとおり。
set_rules("value名", "エラーメッセージ用のフィールド", "条件");

バリデーションエラーの場合の処理を追記する

編集ファイル：application/controllers/site.php

public function send_email(){
	$this->load->library("form_validation");

	$this->form_validation->set_rules("fullName", "Full Name", "required");
	$this->form_validation->set_rules("email", "Email", "required");
	$this->form_validation->set_rules("message", "Message", "required");

	if($this->form_validation->run() == FALSE){	//バリデーションエラーの場合は、以下の処理を行なう
		$this->load->view("site_header");
		$this->load->view("site_nav");
		$this->load->view("content_contact");
		$this->load->view("site_footer");
	}
}

フォームの読み込み後にエラー表示用の関数を挿入

編集ファイル：application/views/content_contact.php

load->helper("form");
	echo validation_errors();	//バリデーションエラーの場合はメッセージを表示する

このタイミングで、バリデーションが動いているか確認します。
以下の写真のように表示されればOK。

form_validation_error

バリデーションエラーのない場合の処理を追記する

場所：application/views/content_contact.php

if($this->form_validation->run() == FALSE){	//バリデーションエラーの場合は、以下の処理を行なう
	$this->load->view("site_header");
	$this->load->view("site_nav");
	$this->load->view("content_contact");
	$this->load->view("site_footer");
}else{							//バリデーションエラーのない場合は、以下の処理を行なう
	$data["message"] = "メッセージが送信されました。";

	$this->load->view("site_header");
	$this->load->view("site_nav");
	$this->load->view("content_contact", $data);
	$this->load->view("site_footer");
}

バリデーションのサクセスメッセージ表示用の関数を挿入する

場編集ファイル：application/views/content_contact.php

load->helper("form");
	echo $message;		//バリデーションエラーのない場合はサクセスメッセージを表示する
	echo validation_errors();	//バリデーションエラーの場合はメッセージを表示する

サクセスメッセージが誤って表示されないように設定する

変種ファイル：application/controllers/site.php

1つ目の編集場所

public function contact(){
	$data["message"] = "";
	
	$this->load->view("site_header");
	$this->load->view("site_nav");
	// $this->load->view("content_contact");
	$this->load->view("content_contact", $data);
	$this->load->view("site_footer");
}

2つ目の編集場所

if($this->form_validation->run() == FALSE){	//バリデーションエラーの場合は、以下の処理を行なう
	$data["message"] = "";

	$this->load->view("site_header");
	$this->load->view("site_nav");
	// $this->load->view("content_contact");
	$this->load->view("content_contact", $data);
	$this->load->view("site_footer");

メールのバリデーションを強化する

編集ファイル：application/controllers/site.php

//$this->form_validation->set_rules("email", "Email", "required");
$this->form_validation->set_rules("email", "Email", "required|valid_email");

●●@▲▲.■■
入力されたメールアドレスが上記のようなかたちでないと、エラーが表示されるようになります。

名前のバリデーションを強化する

編集ファイル：application/controllers/site.php

// $this->form_validation->set_rules("fullName", "Full Name", "required");
$this->form_validation->set_rules("fullName", "Full Name", "required|alpha");

名前がアルファベットじゃないとエラーが表示されるようになります。
※日本語のサイトだと使えないですね。。

クロスサイトスクリプティング対策を行なう

編集ファイル：application/controllers/site.php

public function send_email(){
	$this->load->library("form_validation");

	// $this->form_validation->set_rules("fullName", "Full Name", "required");
	// $this->form_validation->set_rules("fullName", "Full Name", "required|alpha");
	$this->form_validation->set_rules("fullName", "Full Name", "required|alpha|xss_clean");
	//$this->form_validation->set_rules("email", "Email", "required");
	// $this->form_validation->set_rules("email", "Email", "required|valid_email");
	$this->form_validation->set_rules("email", "Email", "required|valid_email|xss_clean");
	// $this->form_validation->set_rules("message", "Message", "required");
	$this->form_validation->set_rules("message", "Message", "required|xss_clean");

バリデーションエラーが起きた場合でも、フォームから値が消失しないようにする。

バリデーションエラーのたびに、入力フィールドがすべて空っぽになってしまうと、ユーザビリティが下がります。
それを解決するために以下を追記。
編集ファイル：application/views/content_contact.php

$data=array(
	"name" => "fullName",
	"id" => "fullName",
	// "value" => ""
	"value" => set_value("fullName")
);

その他のフィールドも同様に追記していきます。

$data=array(
	"name" => "email",
	"id" => "email",
	// "value" => ""
	"value" => set_value("email")
);

$data=array(
	"name" => "message",
	"id" => "message",
	// "value" => ""
	"value" => set_value("message")
);

以上でフォームのバリデーション設定が終わりました。
続いて、メール送信の設定方法です。

3. CodeIgniterを使ったフォームで入力内容をメール送信する方法

small__3887516326

フォームの入力内容をメール送信する

編集ファイル：application/controllers/site.php

$data["message"] = "メッセージが送信されました。";

$this->load->library("email");

$this->email->from(set_value("email"), set_value("fullName"))  //メールのFrom設定 
$this->email->to("[email protected]");			       //メールのTo設定 
$this->email->subject("フォームから送られたメッセージです");   //メールの件名 
$this->email->message(set_value("message"));	     	       //メールの内容

$this->email->send();			   	              //メールを送信する

メールの送信設定はこれだけです。
かんたんすぎる。。。

なにかエラーがおきた場合は、以下のようにデバッグしてみましょう。

メール送信のデバッグ情報を表示する

編集ファイル：application/controllers/site.php

$this->email->send();	//メールを送信する
echo $this->email->print_debugger();

以上となります( ՞ٹ՞)

スキル学習のまとめ記事（※有料記事を含む）

個人で稼ぎ、自由に生きる為の、Webマーケ入門教材【10年の知識】

MARKETING

ブログ型アフィリエイトの完全講義【ブログ歴６年の僕の集大成です】

Blog

アフィリエイト学習の完全マップ【知識ゼロ→月10万円を目指す方法】

Affiliate

SEO対策の完全マップ【入門・基礎・中級・上級：16記事で解説】

SEO

【完全初心者向け】プログラミング学習の始め方【３ヶ月で達成できる】

PROGRAMMING

【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

PROGRAMMING

HOME >  CodeIgniter >  【CodeIgniter】フォームの入力内容をメール送信する方法【フォームヘルパー利用】