WordPressでサイトを運営されている方で、様々な理由でサイト内にお問い合わせフォームを設置したい方もいらっしゃるのでは無いでしょうか？
今回の記事はお問い合わせフォームを簡単に追加できる「Contact Form 7（コンタクトフォーム7）」に関しての導入から初期設定までの流れをご紹介させていただきたいと思います。
「まずは触ってみよう！」精神で初心者の方向けの記事となっておりますので参考になればと思います。
Contact Form 7（コンタクトフォーム7）とは
Contact Form 7は、シンプルで使いやすいフォームビルダーで、複数のフォームフィールドを追加し、ユーザーからの情報を収集できます。フォームの設計は、テキストフィールド、ドロップダウンメニュー、ラジオボタン、チェックボックス、ファイルアップロードなどのさまざまな種類のフィールドを自由に組み合わせて作成できます。
HTMLやCSSの知識があれば、デザインをカスタマイズすることもできます。また、メールの自動返信設定や、CAPTCHAなどのスパム対策機能も標準で備えています。
また、Contact Form 7はWordPressの他のプラグインとの互換性も高く、多くのサードパーティ製プラグインと連携することができます。WordPressサイトのお問い合わせフォームを作成する場合、Contact Form 7は非常に便利で使いやすいプラグインです。
Contact Form 7のインストール方法
WordPress Contact Form 7は、WordPressの公式プラグインリポジトリから無料でダウンロードできます。以下の手順に従って、WordPressにContact Form 7をインストールしてください。
WordPressの管理画面にログインし、左側のメニューから「プラグイン」をクリックします。
新規追加」をクリックし、検索バーに「Contact Form 7」と入力します。
検索結果で「Contact Form 7」というプラグインが表示されたら、「今すぐインストール」ボタンをクリックします。
ダウンロードが完了すると、プラグインを有効化するかどうかを尋ねるメッセージが表示されます。有効化するには「有効化」をクリックします。
これで、WordPress Contact Form 7がインストールされ、使用する準備が整いました。管理画面の左側に「お問い合わせ」が追加され、そこからフォームを設定できます。
Contact Form 7の設定方法
新しいコンタクトフォームの作成
WordPressの管理画面から「お問い合わせ」を選択。
「新規追加」をクリックします。
新しいコンタクトフォームを作成するためのページが表示されます。
まずは、新規作成したフォームにタイトルを入力して分かりやすくしておきましょう。
フォームの設定
フォームを設定するために、必要なフィールドを追加します。
通常は名前、メールアドレス、メッセージなどのフィールドが必要です。
フィールドを追加するには、必要なフィールドを選択し、フォームエディターに追加します。
また、必要に応じて、送信ボタンのテキスト、送信後のメッセージなどを設定することができます。
メールの設定
フォームから送信されたメールの送信先を設定します。
設定方法には、単一のメールアドレス、複数のメールアドレス、またはフォームに入力されたメールアドレスに送信する方法があります。
フォームの設置
フォームを設置するには、作成したフォームのショートコードをコピーして、投稿またはページに貼り付けます。または、ウィジェットを使用してサイドバーに設置することもできます。
ショートコードの貼付け方法
ショートコードを貼り付けるには、ブロック挿入から「ショートコード」を選択し作成したフォームのショートコードを貼付けます。
[contact-form-7 id="0000" title="hogehogehoge"]確認
ショートコードを貼り付け後、一度プレビューなどで確認しましょう。
下記画像の様に該当ページに制作したフォームが表示されればOKです。
以上が、Contact Form 7の設定方法です。
必要に応じて、さまざまなオプションを設定することができます。
また、WordPressのテーマによっては、フォームが正しく表示されない場合があるため、テーマのデザインに合わせてカスタマイズすることもできます。
まとめ
以上がContact Form 7のインストールとフォームの制作ｍ設置の方法になります。
Contact Form 7は多くのサードパーティ製プラグインと連携することができますし、他にも様々な機能がございます。
HTMLとCSSの知識があればデザインも変更することが出来ますので興味がある方はお試しください。
近々Contact Form 7を使ってのカスタマイズ記事も投稿させていただきたいと思いますので今しばらくお待ち下さい。
カスタマイズ内容はContact Form 7のデフォルト機能の「インテグレーション」を利用しての「reCAPTCHA」の設定方法を予定しておりますので、今しばらくお待ち下さい。
