Contact Form7をデザインする

WordPressでテーマの作成/17

以前『WordPressでコンタクトフォームの設置』で、コンタクトフォーム7の設置方法は、解説しましたが、今回はデザインの方法を解説したいと思います。

『Contact Form 7』をインストールして、有効化すると、左メニューに『お問い合わせ』という新しいメニューが追加されますので、それをクリックして、茶色の枠で囲まれたコードをコピーします。

次に、メニューの『固定ページ』→『新規追加』で新規固定ページを作成します。タイトルを『お問い合わせ』とし、本文にお問い合わせに関する文章を記述します。文章の次の段に先程コピーしたコードをペーストし、公開をクリックします。

『外観』→『メニュー』でカスタムメニューの設定画面を開き、ナビゲーションバーのリンクを管理している『topmenu』のリンクを開きます。固定ページの『お問い合わせ』にチェックを入れ、メニューに追加をクリックすると、『topmenu』に『お問い合わせ』のメニューバーが追加されますので、メニューを保存ボタンをクリックします。

尚、ドラッグして移動すれば、好きな順番に並べ替えることができます。

ブラウザで確認してみると、ホームの次に『お問い合わせ』のリンクが挿入されています。

リンクをクリックするとお問い合わせのページが開きます。

次に、ダッシュボードのメニューからお問い合わせをクリックし、フォームの下記の設定

<p>お名前 (必須)<br />
    [text* your-name] </p>
<p>メールアドレス (必須)<br />
    [email* your-email] </p>
<p>題名<br />
    [text your-subject] </p>
<p>メッセージ本文<br />
    [textarea your-message] </p>
<p>[submit "送信"]</p>

を、次のように変更します。

<p><label>お名前 又はニックネーム<span class="hissu">※必須</span><br />
    [text* your-name] </label></p>
<p><label>メールアドレス<span class="hissu">※必須</span><br />
    [email* your-email] </label></p>
<p><label>件名<br />
    [text your-subject] </label></p>
<p><label>お問い合わせ内容<br />
    [textarea your-message] </label></p>
<p class="submit">[submit "送信"]</p>

次に、『style.css』を開き、下記のコードを追加します。

/* お問い合わせ */
.wpcf7-form	{
	background-color: #3CF;	/*ボックスの背景色を青に指定*/
	padding: 20px;	/*ボックス内の余白を20pxに指定*/
	border-radius: 20px}	/*ボックスを角丸に指定*/

.wpcf7-form span.hissu	{
	color: #aa0000; /*必須の文字色を赤色に指定*/
	font-size: smaller}	/*文字サイズを一回り小さく*/

.wpcf7-form input	{width: 80%}	/*入力フィールド幅を80%に指定*/

.wpcf7-form textarea	{width: 100%}	/*テキストエリア幅を100%に指定*/

.wpcf7-form p.submit	{text-align: center}	/*送信ボタンを中央揃え*/

.wpcf7-form .wpcf7-submit	{width: 50%}/*送信ボタンの横幅を50%に指定*/

それでは、ブラウザで確認してみましょう。

本日は以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ