21Oct
Contact Form 7で作ったメールフォームのテキストエリアサイズを変えてみる
だれでも簡単にワードプレス(wordpress)へメールフォームを設置することができるプラグイン「Contact Form 7」。今回はテキストエリアのサイズ変更など、メールフォームのカスタマイズ方法について解説します。
ワードプレス(wordpress)へメールフォームを設置するためのプラグイン「Contact Form 7」。
Contact Form 7には、様々な入力メニューが用意されているので、
企業での使用にも耐えうる本格的なメールフォームから、
必要最小限の機能だけを持つ簡単なメールフォームまで、
ブログの規模に適したメールフォームを誰でも簡単に作ることができます。
そんな守備範囲の広いContact Form 7には、
プラグインを有効化するだけで直ぐに使えるテンプレートがあらかじめ用意されています。
テンプレートには、メールアドレス、件名、本文といった
必要最低限の入力項目が盛り込まれているので、
このテンプレートを使うだけで「メッセージを送る」という目的は十分果たせます。
しかしメッセージを入力するテキストエリアが狭く使いにくかったり、
メールフォームがブログのデザインに溶け込んでいないなど、
若干の修正を加えたい場合がでてきます。
そこで今回は、Contact Form 7の入力フォームをより使いやすくするため、
デザインの変更方法についてご紹介致します。
メッセージ入力枠のサイズを変えてみる
私がブログのメールフォームを作るうえで一番気を付けたことは、
「メッセージ入力のしやすさ」です。
あなたも経験があるかも知れませんが、
メールフォームのメッセージを入力する枠が小さいと、
入力したメッセージの確認がとてもやり難いと思いませんか？
あらかじめ用意されているテンプレートは、
まさにメッセージを入力する枠が小さく、
長文メッセージを入力した後の確認がとてもやり難くいので、
まず最初にメッセージ入力枠のサイズを変更してみます。
ここからは、以前の続きになるので、
Contact Form 7プラグインのインストールが出来ていない方は、まず最初に
Contact Form 7プラグインを使ってブログにメールフォームを設置してみる
をご覧頂き、プラグインのダウンロードを行ってください。
それでは、メッセージを入力するテキストエリアの
サイズの変更方法について説明します。
テキストエリアのサイズ変更はとても簡単です。
まずは、左メニューの項目の「お問い合わせ」から「コンタクトフォーム」を開きます。
次に「コンタクトフォーム１」の編集画面を開いてみてください。
まずは「お問い合わせ」→「コンタクトフォーム」から、
「コンタクトフォーム１」の「編集」をクリックする。
すると「フォーム」と書かれたHTMLの編集画面が現れるので、
その画面から編集を行います。
ちなみに「コンタクトフォーム２」は、
ご覧のブログで使用しているオリジナルテンプレートなので、
プラグインインストール直後のリストにはありません。
編集をクリックするとメールフォームのHTMLタグが表示される。
こちらがコンタクトフォーム１のタグ。
では、実際にタグを編集してみます。
[textarea your-message]と書かれた「メッセージ本文」のタグに、
テキストエリアのサイズを指定する数字を追加するだけです。
ここでは、 [textarea your-message 74×20] と仮に追加入力してみましょう。
「x」は小文字のエックスです。
メッセージ本文のタグに入力エリアのサイズを追加入力する。
ここでは、仮に「74×20」と入力する。
数字の意味としては、最初の数字「74」は、一行あたりの半角での文字数になります。
すなわちここでは、「横方向に半角で74文字入力できる幅」という事になります。
次の「20」はテキストエリアの縦の行数になります。
ですから「20行はテキストエリアをスクロールさせなくても入力できる」ことになります。
数字の単位がpx（ピクセル）単位ではなく文字数なので注意してください。
ちなみに「74×20」というサイズは、このブログのメールフォームのサイズなので、
参考までにこちらからサイズを確認してみてください。
テキストエリアの横幅は半角74文字で、約620pxになります。
ただし基準となる文字サイズによるので、
あなたのブログにて現物合わせで確認を行ってください。
フォームの編集が終わったら、
右上にある「保存」ボタンをクリックして編集内容を保存します。
最後にショートコードをコピーして記事に貼り付ければ、変更した内容が反映されます。
フォームの内容を編集したら「保存」をクリックしたのち、
ショートコードをコピーして記事へ貼り付ける。
ショートコードを記事へ貼り付けてブラウザでプレビューした結果、
再度、テキストエリアのサイズを変更する場合、
再びコンタクトフォームを開いて入力した数値を変更します。
サイズを変更したのちに「保存」をクリックして編集した内容を保存しますが、
その際、ショートコードを再び貼りなおす必要はありません。
ショートコードを貼った記事を開きプレビューすると、
既に変更した内容が反映されているはずです。
ここまでが、テキストエリアサイズの変更方法となります。
数字を入力するだけなので簡単ですね！
ぜひチャレンジしてみて下さい。
【必須】の文字色を変えてみる
次に「お名前」と「メールアドレス」の後に記載されている【必須】の文字の色を変えてみます。
文字が目立つように、ここでは文字の色を赤へ変更してみます。
【必須】の前後にHTMLタグを追加します。
それでは先ほど編集した「コンタクトフォーム１」を開いてフォームの編集を行います。
文字の色を変えるには、文字色を指定するためのCSSタグを追加します。
ここではタグの意味の説明は省略しますが、
下記のように【必須】の前後を追加するCSSタグで挟んでください。
＃の後の半角英数6文字が「RGB16進数カラーコード」なので、
他の色を使いたい場合は、
＃の後のコードを変更することで、好みの色へ変えることができます。
ただし使いたい色のカラーコードが分からないと思います。
そんなときは、私が普段から利用している下記サイトを参考にして下さい。
色見本が豊富なので、好みの色が見つかるはずです。
原色大辞典 ⇒ http://www.colordic.org/
タグを入力したら先ほど同様に「保存」ボタンをクリックし、
ショートコードを貼り付けた記事をプレビューして、
ブラウザで表示の状態を確認してください。
メールフォームをもっと安全に運用するために
今回は、テキストエリアのサイズ変更と、
文字色の変更方法を紹介しましたがいかがでしたか？
そのままでは味気ないテンプレートも、
テキストエリアのサイズを変えることで使いやすく、
また文字の色を変えることで見やすくなりデザインも良くなります。
メールフォームを設置することでメールアドレスを収集される心配はなくなりました。
しかしメールフォームから自動的にスパムメッセージを送りつけてくる
悪質なアプリケーションに対してContact Form 7は脆弱です。
そこでContact Form 7に画像認証を設置するプラグイン「Really Simple CAPTCHA」を紹介します。
このReally Simple CAPTCHAを使うことで、
メッセージを送信する前に画像認証を要求されるので、
メールフォームからアプリケーションによるスパムの自動送信を防ぐことができます。
Contact Form 7を使ってメールフォームを設置したら、
あわせてReally Simple CAPTCHAによるスパム対策をお勧めします。
下記記事で紹介しているので、引き続きご覧ください。
Really Simple CAPTCHA で迷惑メールを元から遮断 ⇒ http://daichuu.biz/archives/1069
最後までご覧頂き、ありがとうございました。
いつもクリックありがとうございます。
[投稿日] 2014年9月20日
[最終更新日] 2015年12月13日
１位獲得！
AmazonのKindle本ベストセラーランキング全30万タイトル中で1位を獲得！アフィリエイトで１億円以上の報酬を手にして、30歳でセミリタイヤした元皿洗いが伝える、自由な人生を手に入れた方法のすべて。
通常価格1,000円が期間限定で、今なら無料でダウンロード頂けます。さらにセミナー映像をダウンロード特典として無料でプレゼント！お早めに！
関連記事
コメント
この記事へのトラックバックはありません。
テキストフォームの部分が狭いので広くしたいと思いました。
Contact Form 7の本家サイトでは、意味がわからず困っていました。
こちらの記事で簡単に出来てしまいました。
助かりました。ありがとうございます。