2 flat logo on transparent 256
2019-02-05

WordPress(ワードプレス)で問い合わせフォームを作成する

Of71xx0

WordPress(ワードプレス)で問い合わせフォームを設定する場合は、プラグインのContactForm7が設定がしやすく簡単なので オススメです。

プログラミング初心者で設定方法がわからない方でも 簡単に設定が可能です

ContactForm7をダウンロードする

左のメニューのプラグインを選択し 新規追加を選択し、検索フォームへContactForm7を入力しインストールします。

ContactForm7をダウンロードする

プログラミング初心者向けcssの配色の基本解説記事 もう迷わない!WEBサイト配色の3ステップ

ContactForm7インストール完了後

ContactForm7のインストールが完了すると左側のメニューに お問い合わせというメニューが表示され、こちらのコンタクトフォームを選択すると新規追加メニューなどが表示されます

ContactForm7をダウンロードする2

新規追加を選択すると下記のようなメニューが表示されます。

ContactForm7をダウンロードする3

ContactForm7設定例

フォーム欄の上部にお問い合わせフォームで入力する テキストタイプが表示されています。

ContactForm7をダウンロードする4

例えばテキストを選択すると下記のように 入力必須項目やデフォルト項目を選択できます。 名前の text-189は任意で設定できます。

ここで[your-email]と変更してメールアドレスの入力欄に設定し保存します。

その他の項目は以下のサンプルコードなどを御覧ください

ContactForm7をダウンロードする5

サンプルコード

<p> お名前 (必須)</p>
<p>[text* your-name] </p>

<p> メールアドレス (必須)</p>
<p>[email* your-email] </p>

<p> お電話番号 (必須)</p>
<p>[tel* tel-95]</p>

<p> お問い合せの件名 (必須)</p>
<p>[text* your-subject]</p>

<p> 住所(必須)</p>
<p>[text* text-984 placeholder "例:〇〇"]</p>

<p> お問い合わせ種類</p>
<p>[radio radio-709 default:1 "資料請求" "見積り" "その他"] </p>

<p> お問い合わせ内容</p>
<p>[textarea your-message] </p>

[submit]

登録フォームでサンキューメールを設定する

メール欄を選択すると、問い合わせした方向けの自動応答メールを選択できます。

先程設定した [your-email] を選択すると送信先及び文章にも 問い合わせした方のメールへ自動で差し替えます

ContactForm7をダウンロードする5

メッセージについて

メッセージ欄は入力不備や登録完了時のメッセージを変更する事が可能です

ContactForm7をダウンロードする5

設定したContactForm7を設定する

ContactForm7を保存するとショートコードが設定されます。

今回設定したお問い合わせフォームのショートコードは

[contact-form-7 id="150" title="お問い合わせ"]

となるので、こちらを固定ページなどを問い合わせ用に新規作成し、新規作成した固定ページへこのコードを貼り付けて新規保存します。

ContactForm7をダウンロードする5

新規作成した固定ページのパーマリンクがお問い合わせフォームへのリンクURLとなります。

送信元がWordPressとなる場合

送信元がWordPressという風に表示される場合あ

コンタクトフォームの送信元を

社名 <メールアドレス>

と記載すれば変更されます。

その他関連記事

MacでSpring Bootをダウンロードして Hellow Wordを表示する

AWSのLinuxサーバーでJava8を利用する

Android Studio3をWindowsへインストールする

お名前.comの共用サーバーでWordPress(ワードプレス)を無料でSSL化する

エックスサーバーへWordPress(ワードプレス)の簡単インストールを行う

ツイッターのタイムラインを自身のサイトへ埋め込む方法

Python3初心者向け|無料で使えるIDE PyCharmの紹介

前の記事
次の記事
人気記事
カテゴリーから記事を探す