MENU

植物ブログを始めよう!Contact Form by WPForms

  • URLをコピーしました!

早速お問い合わせフォームを作成します。

インストールが終わったら

目次

Contact Form by WPFormsの使い方

シンプルなお問い合わせフォームを作ります。

WPFormsではHTMLやCSSの知識がなくても、簡単にお問い合わせフォームを作成できます。

カスタマイズは、ドラッグ&ドロップと文字の書き換えだけで完了します。

超簡単なので15分で作れますよ。

お問い合わせフォームの雛形を選択する

WPFormsには。お問い合わせフォームの雛形が用意されています。

まずは雛形を選びましょう。

お問い合わせフォーム入力画面を表示させる

ダッシュボードからWPFormsから展開して新規追加を選択します。

クリックするとお問い合わせフォームの一覧が表示されます

お問い合わせフォームの雛形の選択

簡単なお問い合わせフォームのテンプレートを使用をクリックします。

Contact Form by WPFormsでお問い合わせフォームをカスタマイズする

お問い合わせフォームの雛形は英語表記になっていますので

雛形を日本語表記にカスタマイズします。

お問い合わせフォームのカスタマイズはフィールド項目の一般画面から行います。

フィールド→フィールド設定→一般をクリック。

ラベルを変えたり(nameをお名前にかえたり)入力を必須にするかなど選べます。

また、新しい項目を増やしたいときは左のフィールドをドラッグして配置できます。

削除したいときは削除したいフィールドをクリックし右側のごみ箱マークをクリックします。

法しましょう。

送信ボタンも日本語にできます。

お問い合わせフォームのショートコードを固定ページに貼り付ける

先ほど作ったお問い合わせフォームのショートコードをコピーします。

お問い合わせフォームのショートコードをコピーする

ダッシュボードの固定ページ→新規固定ページを追加を選択します。

題名に「お問い合わせ」と入力し、お問い合わせフォームのショートコードを貼り付けます。

最後に右上の公開ボタンを押します。

お問い合わせフォームをグローバルメニューに設置する

お問い合わせフォームが設置されたトップページ

WPFormsで作ったお問い合わせフォームを、グローバルメニューに設置する方法を解説します。

お問い合わせフォームをグローバルメニューに設置する方法①

ダッシュボードの外観→メニューをひらいて画面↑の新しいメニューを作成しましょうをクリックします。

新しいページが開いたら、

メニュー名に「ヘッダーめにぃ

グローバルナビ(現在の設定:ヘッダー)にチェックを入れる

メニューの作成をクリック

を入力。

    メニュー作成ページが表示されます。

    固定ページの項目の【お問い合わせ】にチェックを入れる。

    メニューの追加をクリック

    お問い合わせがメニュー名に追加される

    メニュー設定の【グローバルナビ】にチェックを入れる

    メニューの保存をクリック

      お問い合わせフォームにreCAPTCHAを設定する

      Google reCAPTCHAにアクセスし、サイトキーとシークレットキーを入手

      reCAPTCHA設定方法①

      まずはGoogle reCAPTCHAにアクセスします。

      ⋙Google reCAPTCHAへ

      Wordfence Securityのときに使ったGoogleのアカウントでログインします。

      v3 Admin Consileをクリックします。

      reCAPTCHA設定方法②

      サイト登録する画面が表示されるので【+】をクリックします。

      reCAPTCHA設定方法③

      次にサイト情報を入力します。

      送信を押してサイト登録は完了です。

      reCAPTCHA設定方法④

      サイト登録が終わったら、サイトキーとシークレットキーが発行されます。

      両方ともコピーしましょう。

      Contact Form by WPFormsにサイトキーとシークレットキーを貼り付ける

      Word Pressのダッシュボードに戻ります。

      ダッシュボード→WPForm→設定でCAPTCHAタブをクリックします。

      reCAPTCHA設定方法⑤

      設定を保存をクリックすれば作業完了です。

      Contact Form by WPFormsにreCAPTCHAを反映させる

      WordPressダッシュボードから【WPForms】⇒【すべてのフォーム】をクリックします。

      作成したお問い合わせフォームをクリック

      作成したお問い合わせフォームをクリックしましょう。

      フィールド→フィールドを追加でreCAPTCHAをクリックします。

      reCAPTCHAの確認画面が表示されます。

      【OK】をクリックしてください。

      画面右上に「reCAPTCHA有効」と表示されたら設定完了です。

      設定が反映されているか確認する

      お問い合わせページを表示させます。

      画面右下にreCAPTCHA画像が表示されていれば、reCAPTCHA v3の設定が反映されています。

      この記事が気に入ったら
      フォローしてね!

      よかったらシェアしてね!
      • URLをコピーしました!
      目次