-
WordPress
- form
- WordPress
【WordPress】お問い合わせフォームを簡単に作る方法(カスタムのやり方まで解説)
![【WordPress】お問い合わせフォームを簡単に作る方法(カスタムのやり方まで解説)](https://wp-load.in/wp-content/uploads/2021/01/fikret-tozak-Zk-Ydz2IAs-unsplash.jpg)
WordPressでサイトをつくったものの、「お問い合わせフォームはどうやってつくればいいのか…」と思ったことはありませんか?
「でもやり方がわからない…。」そんな人に役に立つ記事となっています!
WordPressでは、お問い合わせフォームを簡単につくれるツールが配信されています。
お問い合わせフォームはどうやってつくるの?
結論からいうと、プラグインを用いることですぐにお問い合わせフォームをつくることができます。
プラグインとは便利ツールのようなものです。
ここでは「Contact Form 7」というプラグインを紹介します。
このプラグインを使用すると、お問い合わせフォームを楽に作成することができます。
プラグイン【Contact Form 7】のインストール方法
それでは実際に、プラグインをインストールしていきましょう。
まず、管理画面にアクセスし、「プラグイン」のページを開いてください。
次にプラグインの文字の横にある「新規追加」を押します。
![](https://wp-load.in/wp-content/uploads/2022/04/image-323-1024x643.jpeg)
検索画面が表示されますので、「Contact Form 7」と入力します。
![](https://wp-load.in/wp-content/uploads/2022/04/image-324-1024x639.jpeg)
「今すぐインストール」を押して、プラグインをインストールしてください。
「今すぐインストール」の文字が「有効化」に変わったら、インストールは完了です。
以上が「Contact Form 7 」をインストールする手順となります。
プラグイン【Contact Form 7】でお問い合わせフォームをつくる
先ほどインストールした「Contact Form 7」を利用して、お問い合わせフォームを構築していきましょう。
まずは、先ほどインストールした「Contact Form 7」のプラグインを有効化します。
「Contact Form 7」の文字 の下に「有効化」と表示されているので、そこを押してプラグインを有効化してください。
![](https://wp-load.in/wp-content/uploads/2022/04/image-325-1024x637.jpeg)
有効化されると、メニューの一覧に「お問い合わせ」という選択肢が追加されます。
![](https://wp-load.in/wp-content/uploads/2022/04/image-326-1024x639.jpeg)
次に、先ほどメニューに表示された「お問い合わせ」の項目をクリックします。
「お問い合わせ」のページに表示される「コンタクトフォーム1」のショートコードをコピーして下さい。
![](https://wp-load.in/wp-content/uploads/2022/04/image-327-1024x797.jpeg)
ショートコードをコピーしたら、お問い合わせフォームをつくたいページの編集画面へ移動します。
コピーしたショートコードを、お問い合わせフォームを追加したい箇所にペーストします。
ペーストすると以下のようなブロックが表示されます。
![](https://wp-load.in/wp-content/uploads/2022/04/image-328-1024x636.jpeg)
最後に右上の「更新」をクリックします。
実際のページにアクセスしてください。
すると、フォームが追加されているのが分かります。
![](https://wp-load.in/wp-content/uploads/2022/04/image-329-1024x703.jpeg)
以上の手順を踏まえると、プラグインを用いてお問い合わせフォームをすぐに作ることができます。
お問い合わせフォームをカスタムするには
先ほどはプラグインを利用してお問い合わせフォームを作成しました。
「Contact Form 7」では、お問い合わせフォームの機能をカスタムすることもできます。
まず、管理画面の「お問い合わせ」を開きます。
その次に「コンタクトフォーム1」を押します。
![](https://wp-load.in/wp-content/uploads/2022/04/image-330-1024x797.jpeg)
すると、以下のような編集フォームが表示されます。
![](https://wp-load.in/wp-content/uploads/2022/04/image-331-1024x637.jpeg)
編集スペースにはHTMLのコードが表示されています。
この画面で、お問い合わせフォームの機能の変更を行います。
白いフォームの上に、青字で「テキスト」「メールアドレス」「URL」…などのタグが表示されているのが分かります。
今回は「電話番号」のタグを選択します。
タグを選択すると以下のような画面が表示されます。
![](https://wp-load.in/wp-content/uploads/2022/04/image-332-1024x643.jpeg)
下の欄に、電話番号のフォームのショートコードが表示されているのが分かります。
右にある「タグの挿入」をクリックしてください。
すると、下のように編集スペースにタグのコードが挿入されます。
![](https://wp-load.in/wp-content/uploads/2022/04/image-333-1024x703.jpeg)
上の画像のようでは正しく反映されませんので、電話番号のフォームが正しく表示されるようにコードを整えます。
![](https://wp-load.in/wp-content/uploads/2022/04/image-334-1024x703.jpeg)
整えたら、「保存」をクリックして実際のページを見てみましょう。
![](https://wp-load.in/wp-content/uploads/2022/04/image-335-1024x703.jpeg)
電話番号を入力するフォームが、反映されているのがわかりますね。
ここで、プレースホルダーを挿入する場合についてみてみましょう。
タグの挿入時に「デフォルト値」を入力する欄があります。
下のチェックボックスにチェックを入れ、デフォルト値を入力してください。
![](https://wp-load.in/wp-content/uploads/2022/04/image-336-1024x706.jpeg)
「タグの挿入」→「保存」をクリックして更新すると以下のようになります。
![](https://wp-load.in/wp-content/uploads/2022/04/image-337-1024x705.jpeg)
フォームの中にプレースホルダーテキストが挿入されているのがわかりますね。
以上のように、お問い合わせフォームの機能を変えたい時は、タグのショートコードを使って、手軽に機能を追加していくことができます。
まとめ
いかかがでしたでしょうか?
WordPressではプラグインを使うことで、簡単にお問い合わせフォームを作れることが分かりましたね。
また、フォームの編集を行うこともできます。タグのショートコードを使えば、簡単に変更することができます。