AFFINGER(アフィンガー)

【徹底解説!】AFFINGER(アフィンガー5)でお問い合わせフォームを作成する方法2つ

2020年12月16日

 

こんにちは、Kei(ケイ)(@KeiKei0815blog)です。

 

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

 

こんな悩みに答えます。

 

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

 

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

 

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

 

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

 

 

AFFINGER5(アフィンガー5)お問い合わせフォームの作成方法

AFFINGER5(アフィンガー5)お問い合わせフォームの作成方法

 

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

 

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

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

 

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

 

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

 

 

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

 

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

 

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

 

 

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

 

 

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

 

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

 

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

 

お疲れ様でした!
KEI

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

 

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

 

step
2
フォームを作成

 

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

 

 

お名前

  1. 『お名前』と入力
  2. 『記述式』を選択
  3. 『必須』を選択
  4. 『+(質問を追加)』をクリック

 

 

メールアドレス

  1. 『メールアドレス』と入力
  2. 『記述式』を選択
  3. 『必須』を選択
  4. 『+(質問を追加)』をクリック

 

 

お問い合わせの種類

  1. 『お問い合わせの種類』と入力
  2. 『ラジオボタン』を選択
  3. 『ご意見・ご相談』と入力
  4. 『その他』を追加
  5. 『必須』を選択
  6. 『+(質問を追加)』をクリック

 

 

題名

  1. 『題名』と入力
  2. 『記述式』を選択
  3. 『+(質問を追加)』をクリック

 

 

お問い合わせの内容

  1. 『お問い合わせの内容』と入力
  2. 『段落』を選択
  3. 『必須』を選択
  4. 『+(質問を追加)』をクリック

 

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

 

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

 

 

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

 

 

step
3
HTMLコードをコピー

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

step
5
送信できるか確認

 

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

 

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

 

設定お疲れ様でした!

 

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

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

 

いかがでしたか?

 

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

 

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

 

今回は以上です。

 

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

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)