webgonia

WordPressでブログにコンタクトフォームを設定する方法

WordPressでブログにコンタクトフォームを設定する方法

ワードプレスでお問い合わせを作ろう

お問い合わせ項目を作成するにはHTMLでタグ作成やCSSの装飾など簡単な項目を作成するだけでも時間がかかってしまいます。しかしContact Form 7プラグインを使用すると情報を入力するだけで簡単に項目を作成できコードを貼り付けるだけで表示してくれます。

では設定方法と実際にお問い合わせのフォーム作成方法を確認していきましょう。

Contact Form 7をインストール

まずはContact Form 7をインストールしていくので「プラグイン」から「新規追加」に進んでください。
「プラグインの検索」からContact Form 7を入力して検索すると表示されるので「いますぐインストール」をクリックしましょう。

※”Contact Form 7”で検索してもプラグインが表示されない場合は作成者の”Takayuki Miyoshi”で検索しましょう。
インストールできたらContact Form 7を「有効化」しましょう。

有効化が完了したら設定方法を確認していきましょう。

Contact Form 7の設定方法

有効化ができたら「お問い合わせ」から「新規追加」をクリックして始めて行きましょう。
“コンタクトフォームを追加”画面が表示されるので”言語を選択”とありますが「新規追加」をクリックしてコンタクトフォームを作成していきましょう。
ContactForm7では”フォーム”にお問い合わせページに表示させたい内容を記入して「保存」をクリックするとコードが作成されます。試しに保存するとこんなコードが作成されます。

[contact-form-7 404 "Not Found"]

このコードを投稿画面に挿入するだけで簡単にお問い合わせページが作成できます。

実際に投稿にコードを挿入して「プレビュー」するとブラウザ上ではこう表示されます。

次にオリジナルフォームを作成するために必要なタグについて見て行きましょう。

タグでフォームをかんたんに作成

“タグの作成”タブをクリックすると作成できるタグの一覧が表示されます。

タグの種類

  • テキスト項目|テキスト記入エリアを作成
  • メールアドレス|メールアドレス記入エリアを作成
  • URL|URL記入エリアを作成
  • 電話番号|電話番号入力エリアを作成
  • 数値(スピンボックス)|数値入力エリアを作成
  • 数値(スライダー)|数値スライダーバーを作成
  • 日付|日付入力エリアを作成
  • テキストエリア|テキスト記入エリアを作成
  • ドロップダウン・メニュー|ドロップダウン・メニューを表示
  • チェックボックス|チェックボックスを設置
  • ラジオボタン|ラジオボタンを設置
  • 承認の確認|承認の確認エリアを設置
  • クイズ|ボット防止のクイズエリアを表示
  • CAPTCHA|ボット防止のCAPTCHAを表示
  • ファイルのアップロード|アップロードボタンを設置
  • 送信ボタン|送信ボタンを設置

「タグの作成」から情報を入力するとコードを自動で作成してくれるので、そのコードをフォームにコピーしましょう。例としてテキスト項目を作成してみましょう。
「タグ作成」から「テキスト項目」をクリックすると詳細設定が表示されます。

  • 必須|項目の必須入力
  • 名前|テキスト項目の名前
  • id|id名
  • class|class名
  • size|テキストエリアのサイズ
  • maxlength|最大の文字入力数
  • Akismet|入力者の名前を要求
  • デフォルト値|ログインユーザーの情報
  • プレースホルダー|入力前に表示させる文章

詳細を入力後コードをコピーして”フォーム”に貼り付け保存すると投稿記事に挿入するコードが設定さるので確認してみましょう。

プレビューで表示が確認すると完了です。
カスタマイズ次第でECサイトの情報入力にも使用できますが情報サイトのコンタクトフォームとして使用するならデフォルトでも十分使えるので、お問い合わせを作成するときは使用してみましょう。


ブログにコンタクトフォームをワードプレスで作成する方法は以上になります。

最後までお読みいただきありがとうございます。

Return Top