(2)やったことを書き残すだけのブログ。7(コンタクトフォーム7)」は、WordPressを利用したWebサイトで「お問い合わせページ」を作る時にとても便利なプラグインです。カスタマイズがかなり効くのですが、初心者の方からすると難しい点もいくつか見受けられるため、今回は簡単に設定できるテンプレートを用意しました。CSSのデザイン例も載せていますので、コピペですぐにお問い合わせフォームを作成できちゃいます。7」のインストールと有効化まずは、コンタクトフォームをインストールします。Form」と入力します。7」が出てくるので、「今すぐインストール」をクリックします。インストール完了後は、「有効化」をクリックします。「今すぐインストール」をクリック。「有効化」をクリック。「有効化」が完了すると、プラグイン一覧の画面に切り替わります。7」が動作しているのを確認し、「設定」をクリックします。コンタクトフォームの設定画面に移動します。デフォルトで、コンタクトフォームが作成されているので、こちらの設定を変更して仕上げちゃいましょう。「コンタクトフォーム1」をクリック。設定の変更画面が開きます。「フォーム」の設定デフォルトの記述を消して、コピペ。コードは以下の通りです。0;"><center>こちらのフォームに必要事項をご記入の上「送信」してください。<br>後ほど、担当よりメールにてご連絡を差し上げます。スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。"上記の内容で送信する"]</p><center><small>このサイトはreCAPTCHAによって保護されています。href="https://policies.google.com/terms">利用規約</a>が適用されます。</small></center></div>「メール」の設定メール1(管理者への自動通知)「メール」の設定をかけていきます。設定する項目は以下の通りです。「メッセージ本文|メール1(管理者への自動通知)」を参照)入力していきます。送信元の項目で、「サイトのドメインに属していないメールアドレスが送信元に設定されています。「[contact-menu]」がありました。お問い合わせ内容をご確認の上、ご対応をお願い致します。以下はお問い合わせの内容です。[_time]-------------------------------------------------------------こちらが入力できたら、次へ進みます。使用」にチェックを入れます。設定する項目は以下の通りです。「メッセージ本文|メール2(申込者への自動通知)」を参照)送信元の項目で、「サイトのドメインに属していないメールアドレスが送信元に設定されています。こちらは自動送信メールです。様お世話になっております。「[_site_title]」へお問い合わせ頂きまして、誠にありがとうございます。以下の内容で、お受け付け致しました。「2営業日」以内に担当者よりご連絡いたしますので、今しばらくお待ちくださいませ。以下はお問い合わせの内容です。[_time]-------------------------------------------------------------以上で、「メール」の設定は完了です。v3」を導入する方法は別の記事にまとめてあります!こちらの記事をご覧ください。コンタクトフォームを使って、設置してもスパムなどがたくさん届いてしまうことがありますよね。「reCAPTCHA」というスパム対策ツールを使って、簡単に阻止することがで...お問い合わせページに「フォーム」を設置あとは、お問い合わせページを作成し、「コンタクトフォーム」を設置するだけです。「固定ページ」の項目を開き、「新規追加」をクリックします。固定ページの「新規追加」画面が開くので、タイトルに「お問い合わせ」と入力。パーマリンク(URLの後ろの部分のこと)もわかりやすい名前に変更してあげます。お問い合わせを意味する「contact」を入力。form7」を設置していきます。画面左上の「+」マーク(ブロック挿入ツールを切り替え)をクリックします。タイトルに「お問い合わせ」と入力。パーマリンクに「contact」と入力。左上の「+」マークをクリック。7」があるので、一度クリック。7」のブロックが出現しました。先ほど作成した「コンタクトフォーム1」が選択されていることを確認して、画面右上の「公開」ボタンをクリックします。これで、お問い合わせページにフォームも埋め込まれた状態で、Webサイト上に公開されました。一応、公開ページも確認してみます。項目と入力欄だけが表示された、シンプルなお問合せフォームが表示されました。最後にデザインを追加していきます。最後にお問合せフォームのデザインを装飾します。WordPressのダッシュボードから「外観」>「カスタマイズ」を開きます。使用しているWordPressテーマによって多少異なりますが、カスタマイズに進むと以下のような項目が表示されます。今回は、「追加CSS」を開きます。その中の入力欄にCSSを貼り付け、右上の「公開」ボタンをクリックします。デザインを選ぶ・コードの適用フォームのデザインを選び、CSSコードをコピペするだけで簡単に反映が可能です。デザインの一覧とCSSコードについては以下の記事をご覧ください。フォームの基本構築はこちらを参考に進めてみてください。今回の記事では、最後に作業している「CSS」のコーディング部分をカスタマイズして、テンプレ...CSSのコードをこのまま貼り付けるだけで、すぐにフォームを利用可能です!別の記事にコードはまとめてありますので、ぜひ利用してください!CSSを貼り付けたら、「公開」ボタンをクリックして反映させます。「公開」ボタンをクリックするとCSSが即反映されます。【Excel】画像を簡単に挿入できる「工事写真台帳」を作りました。閉じるモバイルバージョンに。