副業・在宅ワークアフィリエイトWordPressでメールフォーム作成!

イクメンパパです。

アフィリエイト運営ブログで、閲覧者との問い合わせを受けるためにメールフォームを設置すると便利です。WordPressでは、メールフォームもプラグインで簡単に作成することができます。単純にメールフォームを作成するだけではなく、問い合わせのメール送信完了画面も表示させることができます。今日紹介するプラグインは、「Contact Form 7」です。

WordPressプラグインContact Form 7とは

「Contact Form 7」は、日本人が開発したプラグインです。総ダウンロード数は、2,000万ダウンロードを超え人気もあり安全性についても問題ありません。WordPressのプラグインの中でも、トップクラスになり世界中で愛用されているプラグインになります。

WordPressプラグインContact Form 7ダウンロード

早速、Contact Form 7のダウンロード方法に入ります。WordPressの管理画面から、「プラグイン」⇒「新規追加」⇒「Contact Form 7」で検索してください。インストール後、プラグインを有効にします。インストール完了後、管理画面に「お問い合わせ」が表示されます。「お問い合わせ」⇒「コンタクトフォーム」をクリックすると、コンタクトフォーム一覧が表示されます。

ショートコードを埋め込む

Contact Form 7をインストールした直後は、「コンタクトフォーム1」が登録されています。その隣に「ショートコード」が表示された1列を確認することができます。

ショートコードというのは、WordPress特有の[]で囲まれた文字列の表記法です。ショートコードで定義をあらかじめ設定しておくことで、WordPressがHTMLに変換し表示します。定義以外にも、属性を設定することもできます。属性はパーミッションとも言われ、許可や認可を意味します。

「コンタクトフォーム1」で表記されている、[contact-form-7 id=”数値” title=”コンタクトフォーム1″]をコピーしてください。

「お問い合わせ」ページにショートコードを貼り付ける

Contact Form 7のショートコードを貼り付けるためには、先に固定ページで「お問い合わせ」ページを作成しておく必要があります。作成した「お問い合わせ」ページを開き、編集画面の本文入力欄にコピーしたショートコードを貼り付けます。貼り付けたら「更新」ボタンをクリックしてください。「変更をプレビュー」で実際の表示ページを確認してみます。フォームが表示されていれば成功です。

念の為、実際に機能するか確認します。「送信」ボタンをクリックした後に、「あなたのメッセージは送信されました。ありがとうございました。」と表示された場合は成功です。メールの送信先は、WordPressをインストールした時に入力したアドレスになります。

お問い合わせフォームデザインカスタマイズ

Contact Form 7の初期フォーマットでは、少しデザインが物足りません。独自のHTMLを入力することでカスタマイズが可能です。独自のHTMLを入力するには、「お問い合わせ」⇒「コンタクトフォーム」を表示し「コンタクトフォーム1」をクリックしてください。編集画面が表示されます。「フォーム」テキストエリアにHTMLが記述されています。テキストエリアのHTMLを編集することで、お問い合わせフォームをカスタマイズすることができます。このページのHTMLには、フォーム作成に必要なinputタグがありません。inputタグの代わりに、「text* your-name」などが記述されています。Contact Form 7のフォームは、これらのショートコードを利用しHTMLを作成しています。

Contact Form 7カスタマイズ方法

上記ページ右側に、「タグの作成」ボタンがあります。このボタンで表示される内容でカスタマイズ可能です。「タグ作成」ボタンをクリックすると、作成可能な入力欄が表示されます。

  • テキスト項目 ⇒ [text your-text]
  • メールアドレス ⇒ [email your-email]
  • URL ⇒ [url your-url]
  • 電話番号 ⇒ [tel your-tel]
  • 数値(スピンボックス) ⇒ [number your-number]
  • 数値(スライダー) ⇒ [range your-range]
  • 日付 ⇒ [date your-date]
  • テキストエリア ⇒ [textarea your-textarea]
  • ドロップダウン・メニュー ⇒ [select your-menu ”選択肢A” “選択肢B” “選択肢C”]
  • チェックボックス ⇒ [checkbox your-checkbox “選択肢A” “選択肢B”]
  • ラジオボタン ⇒ [radio radio-100 “ラジオボタンA” “ラジオボタンB”]
  • 承諾の確認 ⇒ [acceptance your-acceptance]
  • クイズ ⇒
  • CAPTCHA※ ⇒ 画像:[captcha your-captcha] 入力項目:[captcha your-captcha]
  • ファイルのアップロード ⇒ [file your-file]
  • 送信ボタン ⇒ [submit]

※「Really Simple CAPTCHA」プラグインのインストールも必須

項目の選択

上記であげた項目を選択すると、入力画面が表示されます。この中で選択するケースが多いものは5種類です。

「必須入力項目ですか?」、これは入力項目を必須にする場合にチェックをします。必須項目にアスタリスク(*)がショートコードにつきます。例としてあげると、「text* your-name」のようになります。

「名前」は、入力項目を判断するための文字列になります。nameなど半角英数を使用します。

「id(オプション)とclass(クラス)」は、表示されるHTMLのIDとクラスを入力することができ、<input id=”入力した文字列” class=”入力した文字列”>のように表示されます。

「このコードをコピーして、左のフォーム内にペーストしてください。」で表示されているコードをコピーして、左側のHTMLの中に貼り付けます。

「それから、このコードを下のメールの項目中に置いてください。」は、送信されるメールの本文を編集する時に使います。

メール送信完了画面の表示

Contact Form 7は、メール送信完了画面が表示されません。送信完了画面を先に作成してください。メール送信完了画面を表示するためには、JabaScriptのコードを記述する必要があります。Contact Form 7の設定画面の一番下に、「その他の設定」があります。ここに、on_set_ok: ‘location.replace(“送信完了画面URL”)と入力し保存すると、送信完了画面が表示されます。

以上、イクメンパパでした。

アフィリエイトおすすめ一覧 WordPressプラグイン記事一覧

 

HOME