Tweet this

プラグイン不要のWordpress用コンタクトフォーム

プラグインを使わないコンタクトフォームを導入しました。これまでシンプルな設定とjQueryの動作が心地よいContactform7を使用していたのですが、Modalboxを使ってポップアップするようにテンプレートを変更したので、それに合わせてフォームの見直し。このフォームを選んだのは、なんといってもプラグインを使用していないという点。

WordPress & jQuery Contact Form without a Plugin

WordPress & jQuery Contact Form without a Plugin

WordPress & jQuery Contact Form without a Plugin

Wordpressといえばプラグインを使って機能を拡張していくのが特徴なんですが、制作者のTrevor Davis曰く、コンタクトフォームはシンプルでいいし、そのシンプルなフォームが公開されていなこと、それとフォームを設定するために装飾的なインターフェイスはいらないってことで、自分で作っちゃったそうです。

設置はいたって簡単。Source Filesというのをダウンロード。解凍するとcontact-form.phpとstyle.css、scriptファイルが同梱されているので、まずcontact-form.phpを編集してメールアドレスを自分のものに変更します。
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = 'me@somedomain.com';
$subject = 'Contact Form Submission from '.$name;
$sendCopy = trim($_POST['sendCopy']);
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

mail($emailTo, $subject, $body, $headers);
if($sendCopy == true) {
$subject = 'You emailed Your Name';
$headers = 'From: Your Name <noreply@somedomain.com>';
mail($email, $subject, $body, $headers);
}

これをサーバ上のテーマフォルダの中にアップロード。スタイルシートは使用中のテーマのcssの中に書き足してもいいし、リネームしてcontact-form.php内から別途呼び出しをかけてもいいです。

jQueryベースなので、使用中のテーマファイルがjQueryコードを呼び出す仕様になっていることが必要です。

アップロードが完了したら、コンタクトフォームようのページを新規で作成し、テンプレートのところでContact Formというのを選択します。

Form setting

Form setting

あとはスタイルシートで自分のサイトに合うように見た目をちょこっと変更すれば完了です。
スクリプトのコード自体も公開・解説されているので、プログラミングがわかる方であれば、機能を追加したりしてオリジナルにカスタマイズも可能です。

Related Posts

Tags: , , , ,

Leave a Reply