「Contact form 7のテンプレートの種類は？」
「Contact form 7でお問い合わせフォームを設定する方法は？」
上記のような疑問を抱えているメディア運用者もいるのではないでしょうか？
サイトへの流入があるのに成果が出ない場合、フォームのページビュー数とコンバージョン数に差があることが考えられ、入力フォームの改善を検討する必要があります。
とはいえ、どのようなフォームに改善すればいいか悩むこともあるでしょう。
そこで本記事では、contact form 7を活用したテンプレートの種類を踏まえた上で、設定方法を詳しく解説します。ぜひ、本記事を参考にして自分にあったテンプレートを選んで設定しましょう。
また、formrunとcontact form7の違いについても紹介しながら解説します。
詳細について知りたい方は下記の記事も合わせてご覧ください。
>> formrunとcontact form7の違い
なお、formrunでフォームを作成することで、以下のメリットがあります。
- プログラミング不要
- ワンクリックでrecaptcha設定可能
- マウス操作でデザイン設定可能 お問い合わせ管理、メール対応も可能
- 自動メールやchatworkなどツール通知までついている
また、ノーコードのテンプレートも120種類以上あり、フロントエンド開発だけでフォームを作れるヘッドレスフォームも提供しております。 上記は全て基本料金無料で対応できるため、気になる方はぜひ以下からお問い合わせください。
目次
contact form 7（コンタクトフォーム7）のテンプレートの種類
contact form 7（コンタクトフォーム7）のテンプレートの種類は、主に以下5通りです。
- デフォルトフォーム
- 商品・サービスのお問い合わせフォーム
- 採用のお問い合わせフォーム
- 資料請求用のお問い合わせフォーム
- コーポレートサイトでよくあるフォーム
▼シンプルでわかりやすいフォームを作るならformrunがおすすめです。formrunのテンプレートを利用すればたったの6ステップでフォームが完成します。
デフォルトフォーム
デフォルトフォームとは、一般的なお問い合わせフォームの仕様です。
ユーザーがすぐに利用を開始できるように設計されています。
具体的には、名前、メールアドレス、件名、メッセージ本文などの標準的なフィールドが含まれています。
これらのデフォルトフォームは、設定の手間を省き、素早くフォームを導入したいユーザーにとって便利です。 なお、コードは以下の通りです。
Your Name (required)
[text* your-name]
Your Email (required)
[email* your-email]
Subject
[text your-subject]
Your Message
[textarea your-message]
[submit "Send"]商品・サービスのお問い合わせフォーム
商品・サービスのお問い合わせフォームは、ECサイトやランディングページなどを制作する方に適したテンプレートです。
ユーザーの名前、連絡先（通常はメールアドレス）、お問い合わせの内容を入力するフィールドが含まれます。
具体的には、ユーザー名を入力するテキストフィールド、メールアドレスを入力するための専用フィールド、お問い合わせ内容を入力するテキストエリアが標準的に設置されています。
さらに、このフォームは商品やサービスに特化しているため、関連情報を追加で収集するためのフィールドが含まれていることが一般的です。
例えば、お問い合わせ対象の商品名やサービス名を選択するためのドロップダウンメニューや、購入日や注文番号を入力するためのテキストフィールドなどが設置されることが多い傾向があります。
下記に商品・サービスのお問い合わせフォームコードを記載するので、ぜひ参考にしてみてください。
Your Name (required)
[text* your-name]
Your Email (required)
[email* your-email]
Product or Service
[text your-product-service]
Order Number
[text your-order-number]
Inquiry Type
[radio inquiry-type use-label-element "General Inquiry" "Product Support" "Billing" "Returns"]
Message
[textarea your-message]
[submit "Send"]▼formrunの製品・サービスの問い合わせフォームのテンプレートはこちら
採用のお問い合わせフォーム
採用のお問い合わせフォームは、企業が求職者からの情報を効率的に収集し、採用プロセスをスムーズに進めるために設計されたフォームです。
このフォームは、基本的なコンタクト情報の収集に加えて、求職者に特有の情報を取得するためのフィールドを含んでいます。
まず、名前やメールアドレスなどの基本的な連絡先情報を収集するフィールドが設置されています。これにより、企業は求職者と迅速に連絡を取ることが可能になるでしょう。
下記に採用のお問い合わせフォームコードを記載するので、ぜひ参考にしてみてください。
Your Name (required)
[text* your-name]
Your Email (required)
[email* your-email]
Phone Number
[tel your-phone]
Position Applied For (required)
[text* your-position]
Cover Letter
[textarea your-cover-letter]
Upload Resume
[file your-resume]
Upload Portfolio (optional)
[file your-portfolio]
Work Experience
[textarea your-experience]
Education
[textarea your-education]
[submit "Submit Application"]▼formrunの採用のお問い合わせフォームのテンプレートはこちら
資料請求用のお問い合わせフォーム
資料請求用のお問い合わせフォームは、ユーザーが企業の提供する製品やサービスに関する詳細な資料を請求するために使用するフォームです。
資料請求用のお問い合わせフォームは、ユーザーが必要とする情報を効率的に収集し、企業が迅速に対応できるように設計されています。
具体的には、ユーザーの名前やメールアドレス、電話番号などの入力フィールドが含まれています。
これにより、企業は資料送付先の情報を正確に把握できます。 次に、このフォームは、ユーザーがどの製品やサービスに関する資料を請求しているのかを明確にするためのフィールドを設置しています。
例えば、ドロップダウンメニューやチェックボックスを使用して、複数の製品やサービスの中から選択できるようにすることが一般的です。
下記に採用のお問い合わせフォームコードを記載するので、ぜひ参考にしてみてください。
Your Name (required)
[text* your-name]
Your Email (required)
[email* your-email]
Your Phone Number
[tel your-phone]
Company Name
[text your-company]
Postal Address
[text your-address]
City
[text your-city]
State/Province
[text your-state]
Zip/Postal Code
[text your-zip]
Country
[text your-country]
Requested Materials (required)
[checkbox* requested-materials use_label_element "Product Brochure" "Service Guide" "Case Studies" "Pricing Information"]
Additional Information or Requests
[textarea your-additional-info]
[submit "Request Information"]▼formrunの資料請求フォームのテンプレートはこちら
説明会の情報入力フォーム
参加者の名前やメールアドレス、電話番号などの基本情報は、説明会の出席者リストを作成するために必要不可欠です。
Contact Form 7では、これらのフィールドをテキストフィールドやメールアドレスフィールドとして簡単に設定できます。
下記に説明会の情報入力フォームコードを記載するので、ぜひ参考にしてみてください。
<label> お名前
[text* your-name]
</label>
<label> メールアドレス
[email* your-email]
</label>
<label> 電話番号
[tel your-phone]
</label>
<label> 参加希望日時
[select* event-date "2023-07-01" "2023-07-08" "2023-07-15"]
</label>
<label> 質問や要望
[textarea your-message]
</label>
[submit "送信"]▼formrunのイベント申込フォームのテンプレートはこちら
contact form 7（コンタクトフォーム7）でお問い合わせを設置する方法
contact form 7（コンタクトフォーム7）でお問い合わせを設置する方法は、主に以下5つです。
- お問い合わせフォームのデザインをコードで作成する
- プラグインで「ContactFrom7」をインストールする
- ContactForm 7にデザインを実装する
- ショートコードを貼り付ける
- ContactFrom 7を設定する
- 詳しく解説します。
お問い合わせフォームのデザインをコードで作成する
WordPressでお問い合わせフォームを作成する際には、一般的に「Contact Form 7」が使用されますが、そのデフォルトデザインは見栄えがあまり良くありません。
HTMLコードとCSSコードを用いてデザインするのがおすすめです。
<form action="/your-server-endpoint" method="post" class="contact-form">
<p>
<label for="your-name">お名前 (必須)<br>
<input type="text" id="your-name" name="your-name" value="" size="40" required></label>
</p>
<p>
<label for="your-email">メールアドレス (必須)<br>
<input type="email" id="your-email" name="your-email" value="" size="40" required></label>
</p>
<p>
<label for="your-phone">電話番号<br>
<input type="tel" id="your-phone" name="your-phone" value="" size="40"></label>
</p>
<p>
<label for="your-message">メッセージ<br>
<textarea id="your-message" name="your-message" cols="40" rows="10"></textarea></label>
</p>
<p>
<input type="submit" value="送信">
</p>
</form>
.wpcf7-form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.wpcf7-form input[type="submit"] {
background-color: #0073aa;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 3px;
}
.wpcf7-form input[type="submit"]:hover {
background-color: #005177;
}プラグインで「ContactFrom7」をインストールする
WordPressでお問い合わせフォームを設置する際に役立つのが「Contact Form 7（コンタクトフォーム7）」というプラグインです。
まず、WordPressの管理画面にログインします。ログイン後、左側のメニューから「プラグイン」を選択し、「新規追加」をクリックしてください。
すると、プラグインを検索できる画面が表示されるので、検索バーに「Contact Form 7」と入力します。
検索結果に「Contact Form 7」が表示されるので、そのプラグインの「今すぐインストール」ボタンをクリックします。インストールが完了すると「有効化」ボタンが表示されるので、これをクリックしてプラグインを有効にしましょう。 次に、プラグインが有効化された状態で、WordPress管理画面の左側メニューに「Contact」という新しいメニューが追加されていることを確認します。
この「Contact」メニューをクリックし、「コンタクトフォーム」というページに移動します。ここでは、すでに作成されたフォームの一覧が表示されますが、新しくフォームを作成するには「新規追加」ボタンをクリックしてください。
ContactForm 7にデザインを実装する
次にContactForm7にHTML、CSSのデザインを実装する必要があります。
Contact Form 7をインストールして有効化したら、管理画面の「Contact」をクリックし、「Contact Form 1」を選択します。
「Contact Form 1」にアクセスすると以下の画面に移行するので、まず、「Contact Form 1」と書かれているタイトルを自分の好みに合わせて修正してください。
その後は、デフォルトで設定されているコードを削除し、貼り付けます。
CSSの適用箇所は、「子テーマ」または、「カスタマイズ＞追加CSS」に貼り付けましょう。
ショートコードを貼り付ける
作成したコンタクトフォームを保存し、ショートコードをコピーして任意のページに貼り付けます。
貼り付ける場所は特に決めておりませんが、固定ページか投稿ページがおすすめです。
投稿ページ内のブロックエディターで「ショートコード」ブロックを選択し、コピーしたショートコードをペーストすれば完了です。
ContactFrom 7を設定する
最後に、ContactFrom 7の設定が必要です。
まず、管理画面から「Contact」をクリックし、先ほど作成したフォームのタイトルを選択します。 Contact Form 7のフォーム画面で「メール」タブをクリックします。
送信先の[_site_adomin_email]はWordPress管理画面の設定で指定されているメールアドレスがデフォルトで使用されており、複数の送信先を指定する場合は、カンマで区切ってメールアドレスを直接入力してください。
送信元は[_site_title]wordpress@nino-create.comとなり、サイト名が表示され、その後サイトのURLから送信されます。
contact form 7（コンタクトフォーム7）でお問い合わせフォームをシンプルでおしゃれにカスタマイズする方法
contact form 7（コンタクトフォーム7）でお問い合わせフォームをシンプルでおしゃれにカスタマイズする方法は、以下2通りです。
- お問い合わせフォームを編集する
- CSSに追加し編集する
詳しく解説します。
お問い合わせフォームを編集する
Contact Form 7を使って初めてお問い合わせフォームを作成する際、「コンタクトフォーム名」の入力画面が表示されます。
そこには、わかりやすいタイトルを入力してください。
お問い合わせフォームを編集する方法は、以下4通りです。
- フォームの編集
- メールの編集
- メッセージの編集
- その他の設定の編集
フォームのフィールドを追加したり、削除したりして、必要な項目を揃えましょう。
CSSに追加し編集する
お問い合わせフォームをシンプルでおしゃれにカスタマイズするためには、CSSのカスタマイズが不可欠です。
デフォルトのスタイルシートではシンプルなデザインしか提供されないため、自分のサイトに合ったスタイルに変更します。
まず、Contact Form 7のショートコードを使ってフォームをページや投稿に挿入します。
その後、カスタムCSSを追加して、フォームの外観を調整してください。 例えば、入力フィールドの幅やボタンの色、フォントのスタイルなどを変更することで、全体のデザインを統一感のあるものにできるでしょう。
contact form 7（コンタクトフォーム7）に関するよくある質問
最後に、contact form 7（コンタクトフォーム7）に関するよくある質問の回答を行います。
事前に疑問点を解決しておき、使いこなせるようにしましょう。
Contact Form 7で作ったフォームにCSSが効かない時の対処法は？
Contact Form 7で作ったフォームにCSSが効かない場合は、テスト環境と本番環境を間違えている可能性があります。
CSSはHTMLファイル内に記述することもできますが、通常はCSSファイルを外部に作成し、HTMLファイルで以下の形式のようにCSSファイルを読み込む設定を行います。
CSSファイルへのリンクが正しいかどうか確認しましょう。
Contact Form 7にphpを埋め込みたいけどどうすればいい？
以下の手順で埋め込みます。
- コンタクトフォームを新規作成：中身は不要
- 動作確認を行うためにindex.phpで作成：コンタクトフォームのショートコードを反映させる
- 「cf7-component.php」をindex.phpと同じ階層に新規作成
- 「cf7-component.php」に記載したフォームを表示させるためにコードを記述
- PHPのコードを追加
- 表示を確認
Contact Form 7で送信ボタンを中央寄せしたい場合はどうすればいい？
中央寄せにしたい場合は、CSSを追加する必要があります。
メッセージボックスのテキスト欄の高さを変更し、送信ボタンを中央寄りにします。
お問い合わせフォームの設置は「formrun」もおすすめ
formrunは、簡単に使えるお問い合わせフォーム作成ツールとして人気があります。このツールの最大の魅力は、非エンジニアでも直感的にフォームを作成できる点です。
まず、豊富なテンプレートが用意されており、ビジネスニーズに応じて選べるため、初めてのユーザーでも迷わずに使い始めることができます。
さらに、ドラッグ＆ドロップのインターフェースを採用しており、必要な項目を簡単に追加・編集することが可能です。
カスタマイズ性も高く、フォームのデザインや入力フィールドを細かく設定できるため、自社のブランドイメージに合ったフォームを作成できます。 フ
フォーム作成ツール「formrun」を検討してみるのもおすすめです。無料での利用もできるため、ぜひ一度試してみてはいかがでしょうか。
contact form 7のお問い合わせフォームの設置はテンプレートの活用も検討しよう
contact form 7を活用したテンプレートの種類は豊富であり、サイトの目的によってフォームを決める必要があります。
そうすることで、ユーザビリティが向上し、フォームのページビュー数とコンバージョン数の差を軽減できるようになります。
プラグインを入れるだけではおしゃれなフォームは設定できないため、デザインにこだわりたい方は、CSSで追加記述する必要があるでしょう。
本記事を参考にして自分にあったテンプレートを選んで設定してみてください。
▼フォーム作成ツール「formrun」を検討してみるのもおすすめです。無料での利用もできるため、ぜひ一度試してみてはいかがでしょうか。
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
