カテゴリー別アーカイブ: 問い合わせページを作る

3.デザインの修正

フォームの修正

ダッシュボード→「問合せ」→「コンタクトフォーム」で「コンタクトフォーム1」の編集画面を開きます。
022

フォームのタブにidを追加し「style.css」にスタイルを定義することも出来ますし、「style=”…”」で直接スタイルを定義することも出来ます。
018

また「*」を付けると必須項目にすることが出来ます。
019

「style.css」の例はこんな感じに追加します。

#text01{
background:url("./images/text01.png");
-moz-background-size:100% 100%;
background-size:100% 100%;
}
#text02{
background:url("./images/text02.png");
-moz-background-size:100% 100%;
background-size:100% 100%;
}
#text03{
background:url("./images/text03.png");
-moz-background-size:100% 100%;
background-size:100% 100%;
width: 325px;
ime-mode: active;
}
かんぱに☆ガールズ オンラインゲーム

2.入力項目を追加する

例として住所を追加してみます。

フォームに追加

ダッシュボード→「問合せ」→「コンタクトフォーム」で「コンタクトフォーム1」の編集画面を開きます。
022

今回はテキストボックスを追加しますので「テキスト」をクリックします。
025

名前は半角英文字で入力、必要に応じてID、クラスも入力します。
026

お問い合わせページに住所の項目が追加されます。
027

メールに追加項目を反映

コンタクトフォームの修正画面でメールのほうにも項目を追加しましょう。
028

かんぱに☆ガールズ オンラインゲーム

1.プラグインの設置

お問い合わせフォームを作るのにお勧めのプラグインは「Contact Form 7」です。
簡単に設置でき、デザインのカスタマイズも可能です。

「Contact Form 7」のインストール

ダッシュボード→「プラグイン」→「新規追加」で「Contact Form 7」を検索してインストールします。(詳細は省きます)

インストール後にダッシュボードに「お問い合わせ」が追加されます。
018

Contact Form 7の設定

ダッシュボード→「お問い合わせ」→「コンタクトフォーム」」→「コンタクトフォーム1」の編集で設定画面を開きます。
022

メールタブの中に送信先のメールアドレスを指定する欄がありますので、設定します。
その他の項目もお好みで設定して下さい。
024

ショートコードがありますので、こちらの文字列をクリップボードにコピーしましょう。
019

先程、コピーしたショートコードを「お問い合わせ」を表示したいページに貼り付けます。
020

実際の表示は、こんな感じです。
021

かんぱに☆ガールズ オンラインゲーム