AFFINGER

AFFINGER6でお問い合わせフォームを作る方法【3分でOK】

※PRを含みます
困ってる人
●AFFINGER6でお問い合わせフォームを設定したい。でも設定方法がわからない。

●AFFINGER6でお問い合わせフォームを作ってる人がいるけど、やり方がわからない。

 

今回はこんなお悩みにお答えします。

 

こんな方におすすめ

  • AFFINGER6でお問い合わせフォームを設定したい
  • AFFINGER6でお問い合わせフォームの作り方がわからない
  • AFFINGER6の操作方法がわからない

 

本記事の信頼性

当ブログもAFFINGER6を使用しており、月5桁収益化しています。アフィンガーでのお問い合わせフォームを設定する方法を解説できます。

 

お問合せフォームはブログ運営には欠かせない項目です。先に完成形のイメージをお見せすると以下のような感じ。

 

WordPressでお問合せフォームを作成する完成図

お問合せフォームの例

 

お問合せフォームはプラグイン『Contact Form7』を使えば簡単に作成できます。

 

しかしプラグインを使うと

  • サイトスピードが遅くなる
  • 他プラグインと干渉する可能性がある
  • プラグインの更新がめんどくさい

といったデメリットを引き起こす可能性も。なので出来ることなら使用するプラグインは少なく抑えたいものですよね。

 

今回はプラグインを使わないで、AFFINGER6でお問い合わせフォームを作る方法を解説します。

 

本記事を読めば、AFFINGER6でお問い合わせフォームを良い感じに設定できるので、ぜひ参考にしてみてください。

 

3分程度でサクッと設定できますので、順番に手順通り見ていきましょう。

 

なお、AFFINGER6をもっと使いこなしたい!という方は、AFFINGER6(アフィンガー6)の使い方はこれでOK【徹底解説します】を参考にどうぞ。

 

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

 

 

AFFINGER6でお問い合わせフォームを作成する方法

AFFINGER6でお問い合わせフォームを作成する方法

AFFINGER6でお問い合わせフォームを作成する方法

 

それではAFFINGER6でお問い合わせフォームを設置する方法を解説します。

 

下記5つの手順でOKです。

 

AFFINGER6でお問い合わせフォームを作る手順5つ

  • ①Googleフォームにアクセス
  • ②新規フォームを作成
  • ③お問合せフォームを編集
  • ④お問合せフォームのデザイン編集&送信
  • ⑤送信したHTMLコードをWordPressのテキストへ貼り付け

 

1つずつ見ていきましょう。

 

手順①:Googleフォームにアクセス

 

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

>>Googleフォーム公式サイトへ

 

Googleフォームとは

Googleが提供する無料のフォームです。プラグイン不要で簡単にお問い合わせフォームが作れます。

 

Googleフォームのログイン画面

Googleフォーム

 

アクセスすると上記画面になります。『Googleフォームを使ってみる』をクリックしてください。

 

手順②:新規フォームを作成

手順②:新規フォームを作成する

手順②:新規フォームを作成する

 

クリックすると上記画面に移ります。

 

『新しいフォームを作成』の空白をクリックします。

 

手順③:お問合せフォームを編集

 

新しいフォームを作成するとお問合せフォームが出てくるので、各項目を編集します。

 

Googleフォームのお問合せフォームを編集する

お問合せフォームの編集

 

  • 無題のフォーム⇒お問合せへ変更
  • 無題の質問⇒お名前へ変更
  • ラジオボタン⇒記述式へ変更

 

上記のように変更します。編集が終わると下記のような感じになります。

 

Googleフォーム(お問合せフォーム)編集方法

Googleフォーム(お問合せフォーム)編集方法

 

上記画像のように編集ができれば、右側にあるプラスのアイコンをクリックして質問を追加します。続いて同様にお問い合わせの種類を追加していきましょう。

 

AFFINGER6 お問い合わせフォームの作り方

AFFINGER6 お問い合わせフォームの作り方

 

上記のような感じですね。お問い合わせの種類の項目は3択の選択肢なので、ラジオボタンのままでOKです。

 

なお、必須で入力してほしい項目があれば、各質問のボックスにある『必須』にチェックを入れれば印が入りますよ。

 

手順④:お問合せフォームのデザイン編集&送信

 

入力ができたらデザインの編集をしましょう。

 

AFFINGER6 お問い合わせフォームのデザインを編集

AFFINGER6 お問い合わせフォームのデザインを編集

 

上記のような感じで、色の変更が自由にできます。サイトカラーに合った色を選択してみてください。

 

カラー選択ができたら、『送信』をクリックします。

 

手順⑤:送信したHTMLコードをWordPressのテキストへ貼り付け

 

後は送信した画面からHTMLコードをコピーしましょう。

 

後はコピーしたコードをWordpressに貼り付けるだけでOK。

 

AFFINGER6 お問い合わせフォームの続き

AFFINGER6 お問い合わせフォームの続き

 

送信をクリックしたら上記のような画面に移るので、コピーをクリックします。コピーできたら固定ページを作成して、投稿内のテキストへ貼り付けばOKです。

 

 

上記のような感じですね。貼り付けたらプレビューでうまくいってるか確認してください。

 

AFFINGER6 お問い合わせフォームの完成

AFFINGER6 お問い合わせフォームの完成

 

これでお問合せフォームの作成は完了です。

 

後はウィジェットなどを使ってお好みでサイドバーやフッターに表示してみてください。

 

AFFINGER6 お問い合わせフォームの改善方法

AFFINGER6 お問い合わせフォームの改善方法

AFFINGER6 お問い合わせフォームの改善方法

 

続いてお問い合わせフォームをもう一段階改善する方法を簡単に解説します。

 

AFFINGER6 お問い合わせフォームの例

AFFINGER6 お問い合わせフォームの例

 

上記は当ブログのお問い合わせフォームですが、フォームの上にTwitterアカウントを記載しています。

 

というのも、お問い合わせフォームだけだと案外見逃してしまうことが多いからです。SNSをやってる方は、どちらでも連絡を取れるように注意書きしておくのがおすすめ。

 

投稿画面の例

 

先ほど作成質お問い合わせフォームの上に上記のような感じで、記載しておけばOKです。

 

AFFINGER6でお問い合わせフォームができたらチェックしよう

AFFINGER6でお問い合わせフォームができたらチェックしよう

AFFINGER6でお問い合わせフォームができたらチェックしよう

 

最後にAFFINGER6でお問合せフォームを設置出来たらちゃんと動作しているか確認しましょう。

 

適当にお問合せフォームに名前を記入して自分で問い合わせを送信してみてください。

 

AFFINGER6 お問い合わせフォームができたかチェックする

 

上記のような感じで自分が作成したフォームの回答タブにお問い合わせがきていればOKです。

 

表示されない方は、回答を受付中にチェックが入っていないかコードを貼り付ける時にミスっている可能性があるので確認しましょう。

 

上記のようにブログ運営をしていると企業や個人様からお問い合わせが結構来ます。きちんと設定してチャンスを逃さないようにしてください。

 

まとめ:アフィンガー6でお問い合わせフォームの作り方は超簡単です

まとめ:アフィンガー6でお問い合わせフォームの作り方は超簡単です

まとめ:アフィンガー6でお問い合わせフォームの作り方は超簡単です

 

今回はプラグインを使わないで、AFFINGER6でお問い合わせフォームを作る方法を解説しました。

 

お問い合わせフォームはプラグインを使っても作れますが、Googleフォームで十分なので、このやり方が一番だと思います。

 

サイトスピードを下げずにお問い合わせフォームを作りたい方は参考にしてみてください。

 

本記事が参考になれば、幸いです。最後まで読んで頂きありがとうございました。

 

それでは本日はこの辺りで!

>>AFFINGER6のカスタマイズ方法まとめに戻る

 

 

なお、AFFINGER6を購入するか迷ってる方に朗報です。当サイト経由でAFFINGER6を購入頂いた方に限定特典10個を無料でプレゼントしています。これからご購入を考えてる方は、ぜひお得にゲットしてみてください。

 

\ブロガー人気No.1有料テーマ/

AFFINGER6の詳細はコチラ

※クリックすると公式サイトへアクセスします

 

さらに当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、収益がグンと伸びました。収益をさらに伸ばしたい方は、参考に以下もどうぞ。

関連記事
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】

続きを見る

 

 

関連記事AFFINGER6の特典10個付きレビュー!評判やメリット・デメリットを徹底解説

 

関連記事AFFINGER6に必須のおすすめプラグイン10個・不要プラグイン3個を徹底解説

 

-AFFINGER