アフィリエイトを真剣にビジネスとして学びたい大人のためのアフィリエイト情報サイト
menu
アフィリエイトで自宅に居ながら給料を超える方法
WordPressテーマ「CUBEY (tcd023)」

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プラグインを使ってブログにメールフォームを設置してみる
をご覧頂き、プラグインのダウンロードを行ってください。

それでは、メッセージを入力するテキストエリアの
サイズの変更方法について説明します。

テキストエリアのサイズ変更はとても簡単です。

まずは、左メニューの項目の「お問い合わせ」から「コンタクトフォーム」を開きます。
次に「コンタクトフォーム1」の編集画面を開いてみてください。

コンタクトフォーム1を編集する

まずは「お問い合わせ」→「コンタクトフォーム」から、
「コンタクトフォーム1」の「編集」をクリックする。

すると「フォーム」と書かれたHTMLの編集画面が現れるので、
その画面から編集を行います。

ちなみに「コンタクトフォーム2」は、
ご覧のブログで使用しているオリジナルテンプレートなので、
プラグインインストール直後のリストにはありません。

コンタクトフォーム編集タグ

編集をクリックするとメールフォームのHTMLタグが表示される。
こちらがコンタクトフォーム1のタグ。

では、実際にタグを編集してみます。

[textarea your-message]と書かれた「メッセージ本文」のタグに、
テキストエリアのサイズを指定する数字を追加するだけです。
ここでは、 [textarea your-message 74×20] と仮に追加入力してみましょう。
「x」は小文字のエックスです。

メッセージ本文のサイズ入力

メッセージ本文のタグに入力エリアのサイズを追加入力する。
ここでは、仮に「74×20」と入力する。

数字の意味としては、最初の数字「74」は、一行あたりの半角での文字数になります。
すなわちここでは、「横方向に半角で74文字入力できる幅」という事になります。

次の「20」はテキストエリアの縦の行数になります。
ですから「20行はテキストエリアをスクロールさせなくても入力できる」ことになります。

数字の単位がpx(ピクセル)単位ではなく文字数なので注意してください。

テキストエリアの書式

ちなみに「74×20」というサイズは、このブログのメールフォームのサイズなので、
参考までにこちらからサイズを確認してみてください。

テキストエリアの横幅は半角74文字で、約620pxになります。
ただし基準となる文字サイズによるので、
あなたのブログにて現物合わせで確認を行ってください。

フォームの編集が終わったら、
右上にある「保存」ボタンをクリックして編集内容を保存します。

最後にショートコードをコピーして記事に貼り付ければ、変更した内容が反映されます。

フォームの編集が終わったら保存をクリック

フォームの内容を編集したら「保存」をクリックしたのち、
ショートコードをコピーして記事へ貼り付ける。

ショートコードを記事へ貼り付けてブラウザでプレビューした結果、
再度、テキストエリアのサイズを変更する場合、
再びコンタクトフォームを開いて入力した数値を変更します。

サイズを変更したのちに「保存」をクリックして編集した内容を保存しますが、
その際、ショートコードを再び貼りなおす必要はありません。
ショートコードを貼った記事を開きプレビューすると、
既に変更した内容が反映されているはずです。

ここまでが、テキストエリアサイズの変更方法となります。
数字を入力するだけなので簡単ですね!

ぜひチャレンジしてみて下さい。

【必須】の文字色を変えてみる

次に「お名前」と「メールアドレス」の後に記載されている【必須】の文字の色を変えてみます。
文字が目立つように、ここでは文字の色を赤へ変更してみます。

HTMLタグを追加する

【必須】の前後にHTMLタグを追加します。

それでは先ほど編集した「コンタクトフォーム1」を開いてフォームの編集を行います。
文字の色を変えるには、文字色を指定するためのCSSタグを追加します。
ここではタグの意味の説明は省略しますが、
下記のように【必須】の前後を追加するCSSタグで挟んでください。

sccタグの追加

#の後の半角英数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

会社に雇われず起業した人の成功事例
自由な人生を手に入れる教科書
Amazon電子書籍ランキング
1位獲得!
おすすめ度

AmazonのKindle本ベストセラーランキング全30万タイトル中で1位を獲得!アフィリエイトで1億円以上の報酬を手にして、30歳でセミリタイヤした元皿洗いが伝える、自由な人生を手に入れた方法のすべて。

通常価格1,000円が期間限定で、今なら無料でダウンロード頂けます。さらにセミナー映像をダウンロード特典として無料でプレゼント!お早めに!

  • このエントリーをはてなブックマークに追加

関連記事

    • 大山勘太郎
    • 2017年 4月 21日

    テキストフォームの部分が狭いので広くしたいと思いました。
    Contact Form 7の本家サイトでは、意味がわからず困っていました。

    こちらの記事で簡単に出来てしまいました。
    助かりました。ありがとうございます。

  1. この記事へのトラックバックはありません。

算数の計算を解くと投稿できます 【漢数字が出てきます】 *

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

おすすめアフィリエイト教材

アンリミテッドアフィリエイトNEO

アンリミテッドアフィリエイトNEO
たった一人で1億2,000万円!の
アフィリエイト報酬を生み出した
No.1アフィリエイト教材!
おすすめ度

圧倒的な情報量と徹底的な解説!
アフィリエイトの王道教材!

たった一人で1億2,000万円ものアフィリエイト報酬を手にしたアフィリエイターを生み出した業界No.1アフィリエイト教材。新たな技術が生まれたり、SEO技術が変化しても、常に最新のノウハウがテキストに盛り込まれ、メンバーズページから最新版のテキストをいつでもダウンロードすることができます!アフィリエイトを志すのであれば必ず手に入れるべきノウハウ教材です。

扇動マーケティング

扇動マーケティング
コピーライティングを上回る
購入誘導術!その効果、
まさに悪用厳禁レベル!
おすすめ度

誰もが気付いていない商品の売り方を
長時間動画で徹底解説!

ブログやメルマガの記事を一生懸命書いてるのに商品が全く売れない・・・。それは、もしかしてコピーライティングのテクニックを駆使して、商品を売っていませんか?本来コピーライティングは、セールスの効果がとても弱いものです。だからトップアフィリエイターと呼ばれる人たちは、コピーライティングとは全く別のテクニックを駆使して商品を売っています。「あなたから買えてうれしい。」とまで言わせるその危険な稼ぎ方を、アフィリエイトで1億円以上稼いだ、トップアフィリエイターが解説します。

ディスカバリーアカデミー

ディスカバリーアカデミー
音声と分かりやすい解説動画で
じっくり基礎から学びたい方に
お勧めなアフィリエイト教材!
おすすめ度

一週間毎に課題を進める動画教材。
丁寧な動画解説が分かりやすい!

アンリミテッドアフィリエイト同様に、アフィリエイトで収益を上げるための、インターネットを活用した稼ぎの構造作りを学ぶための教材。アンリミテッドアフィリエイトがPFD教材に対して、ディスカバリーアカデミーは解説動画で学ぶ教材になっています。自宅のパソコンでじっくり学びたい方に適したアフィリエイト教材です。

アフィリエイトコンサル

無料メールマガジン


無料メールマガジン
私が実践しているアフィリエイトノウハウ全20項目を、20日間毎日お伝えします。

※いつでも配信停止することができます。
※ご登録頂いたアドレスが他へ渡ることはありません。

Tweet

会社に雇われず起業した人の成功事例
自由な人生を手に入れる教科書
Amazon電子書籍ランキング1位獲得!

AmazonのKindle本ベストセラーランキング全30万タイトル中で1位を獲得!アフィリエイトで1億円以上の報酬を手にして、30歳でセミリタイヤした元皿洗いが伝える、自由な人生を手に入れる教科書。

通常価格1,000円が期間限定で、今なら無料でダウンロード頂けます。さらにセミナー映像をダウンロード特典として無料でプレゼント!お早めに!