【徹底解説！】AFFINGER（アフィンガー５）でお問い合わせフォームを作成する方法２つ

こんにちは、Kei（ケイ）（@KeiKei0815blog）です。

悩む人

アフィンガー５を使っているのですが、お問い合わせフォームをどうやって作るのか知りたい！

こんな悩みに答えます。

結論、アフィンガー５でお問い合わせフォームを作成するやり方は、２通りあります。

１つ目にプラグインをインストールするやり方と、もう一つがGoogleフォームを使って作成するやり方です。

それぞれ、簡単に設定できますので、少しの間お付き合い頂けますと幸いです。

それでは、早速始めていきます！

[toc]

AFFINGER5（アフィンガー５）お問い合わせフォームの作成方法

冒頭でも紹介しましたように、アフィンガー５でお問い合わせフォームを作成する方法は以下です。

お問い合わせフォームの作成方法

・プラグインを使う
・Googleフォームを使う

プラグインでお問い合わせフォームを作成

まずは、プラグインを使って、お問い合わせフォームを作成する方法です。

プラグインは、「Contact Form 7」を使います。

１つずつ順番に解説しますね。

step
1Contact Form 7をインストール

まずは、ワードプレス管理画面のサイドバー「プラグイン → 新規追加」をクリックして、Contact Form 7をインストールします。

入力ボックスに、「Contact Form 7」と入力しましたら、富士山のアイコンが出るので、こちらをインストールします。

インストールが完了しましたら、有効化にします。

step
2フォームのカスタマイズ

管理画面のサイドメニューに「お問い合わせ」の項目が追加されるので、「新規追加」をクリックします。

すると、以下の画面が表示されます。

氏名
メールアドレス
題名
メッセージ本文 (任意)

デフォルトでの入力項目は上記です。

その他に項目を付け足したい場合は、赤枠箇所でカスタマイズできます。

また、フォームの細かいカスタマイズ方法について、以下、バズ部の記事が参考になります！

【簡単】Contact Form 7の効果的なカスタム方法

タイトルを分かりやすく「お問い合わせ」と入力し「保存」をクリックします。

step
3コードをコピー&貼り付け

「保存」クリック後に、ショートコードが表示されますので、こちらをコピーします。

あとは、固定ページを開いてコピーしたコードを貼り付けるだけです。

①タイトル：「お問い合わせ」と入力します
②パーマリンク：「contact」などお問い合わせページであることがわかるローマ字にしておきましょう！

あとは、公開ボタンをクリックして完了です！

これで設定は終わりです！

お疲れ様でした！

KEI

Googleフォームでお問い合わせページを作成

続いて、Googleフォームを使ってお問い合わせフォームの作成方法について、紹介します。

プラグインを使いたくない方は、こちらの設定がオススメですよ！

Googleフォームにアクセス
フォームを作成
HTMLコードをコピー
HTMLコードを貼り付ける

HTMLを少しいじるのでプラグインより若干手間がかかりますが、画像付きで解説していますのでご安心ください！

KEI

step
1Googleフォームにアクセス

まずは、『Googleフォーム』にアクセスします。

左の『Googleフォームを使ってみる』をクリックします。

以下の画面が表示されましたら、「＋空白」をクリックします。

続いてフォームの細かい設定をしていきます！

step
2フォームを作成

フォームの項目は、お好みで設定してOKですが、今回は僕が設定している項目を参考に紹介していきますね。

お名前

『お名前』と入力
『記述式』を選択
『必須』を選択
『＋（質問を追加）』をクリック

メールアドレス

『メールアドレス』と入力
『記述式』を選択
『必須』を選択
『＋（質問を追加）』をクリック

お問い合わせの種類

『お問い合わせの種類』と入力
『ラジオボタン』を選択
『ご意見・ご相談』と入力
『その他』を追加
『必須』を選択
『＋（質問を追加）』をクリック

題名

『題名』と入力
『記述式』を選択
『＋（質問を追加）』をクリック

お問い合わせの内容

『お問い合わせの内容』と入力
『段落』を選択
『必須』を選択
『＋（質問を追加）』をクリック

これでフォームの項目作成は完了です！

もしフォームの背景色など変更したい際には、以下のアイコンからお好みで編集することができます。

あとは、タイトルを「お問い合わせ」と入力して、右上の「送信」をクリックすれば終わりです。

step
3HTMLコードをコピー

HTMLコードをコピーしていきます。

『<>』をクリック
HTMLをコピー

「幅」「高さ」はそのままでOKです。

step
4HTMLコードを貼り付ける

ワードプレスの管理画面から固定ページにいきます。

「テキスト」にタブを切り替えて、コピーしたコードを貼り付けます。

プレビューで問題なく表示されていれば、公開をクリックして完了です！

step
5送信できるか確認

念のため送信できているか確認してみましょう。

メールボックスに届いていましたら完了です！

KEI

設定お疲れ様でした！

まとめ：アフィンガー５でお問い合わせフォームを作成する方法

いかがでしたか？

今回は、アフィンガー５のお問い合わせフォーム作成方法について、２つのパターンを紹介しました。

自サイトに合わせてお好みの方法でフォーム作成をしてみてくださいね！

今回は以上です。

ここまで読んでいただき、ありがとうございました。