yuichi.co

ゆういちのノートブック

3つの要素を取り入れたお問い合わせフォームにカスタマイズしてみた

 5138

3つの要素を取り入れた お問い合わせフォームにカスタマイズしてみた  トップ

@yuichico_です。お問い合わせフォームはStinger7にのみならずすべてのWordpressテーマでの実装が可能です。Contact Form 7(コンタクトフォーム7)の特徴はphpをイジらずに、クリックだけで問い合わせフォームが設置できるという優れたプラグインです。ブログを運営していくなかでも、なくてはならないものです。下の画像は完成図です。結論から言うと3つの要素とは必須項目と任意項目を設置し、1カラムにしました。なお、必須、任意項目はstinger7以外のテーマでもできますが、1カラムの仕方はstinger7以外のやり方は書いていませんので、ご了承ください。
コンタクトフォーム7 完成図



プラグイン

順に画像を使って説明します。

Contact Form 7をインストール

プラグイン→新規追加→検索バーに「 Contact Form 7 」でEnter

プラグイン 検索窓 Contact Form 7 と検索

今すぐインストール

Contactform7 今すぐインストール

プラグイン有効化

コンタクトフォーム7 プラグインを有効化

Contact Form 7の文字の下にある 設定

プラグイン コンタクトフォーム下 設定をクリック

コンタクトフォーム1

コンタクトフォームをクリック

コンタクトフォームを編集できる画面に移動するはずです。赤枠内がデフォルトの設定。

Stinger7 コンタクトフォーム7 編集

フォームを実装

先ほどのコンタクトフォームを編集できる画面の赤枠内に、以下をコピペしてください。

<p>お名前<span class="required2">必須</span>
[text* your-name akismet:author placeholder "例:Yuichi Sato"]</p>
<p>メールアドレス<span class="required2">必須</span>
[email* your-email akismet:author_email placeholder "例:abc@gmail.com"] </p>
<p>ブログ・サイト URL<span class="any">任意</span>
[url url akismet:author_url placeholder "例:https://yuichi.co"]</p>
<p>件名<span class="any">任意</span>
[text your-subject akismet:subject placeholder "例:Wordpressのカスタマイズについて"] </p>
<p>メッセージ本文
[textarea your-message x8 akismet:message placeholder "例:初めまして。Yuichiと申します。Wordpressに関して何点かお聞きしたいことがあります。"] </p>
<p>[submit "送信"]</p>

 

リンク Contact form 7のCSSデザインとカスタマイズ方法

右上ステータスの中にある保存をクリックします。

コンタクトフォーム 保存

固定ページへ投稿

ショートコードをコピーします。

コンタクトフォーム ショートコードをコピーする

固定ページ→新規追加

固定ページ 新規追加

タイトルを入力してショートコードを貼り付ける。また一言メッセージを入れるものいいでしょう。

タイトル入力 ショートコード貼り付け

カラム数の変更

右下のカラム変更で1カラムに変更するを選択しよう。右サイドバーがなくなってコンタクトフォームのみが表示されます。

1カラムに変更する ラジオボタンを選択

リンク 舐めちゃダメよ!売上アップするお問い合わせフォームの作り方

更新をクリック

コンタクトフォーム 公開

メニューへ設置

リンク 【Stinger7】メニューバーにFontawesomeを入れる簡単な方法

メニューへの入れ方は上のリンクとほとんど同じです。設置したら、ご自身の運営しているブログのコンタクトページへアクセスしてみてください。まだCSSはカスタマイズされていませんが、1カラムで反映されているはずです。

カスタマイズ

Stinger7子テーマの外観→テーマ編集→style.cssの一番下へコピペです。

.wpcf7 {
	margin: 96px 0;
}
.wpcf7 span.wpcf7-not-valid-tip {
	font-size: 80%;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
	background-color: #fff;
	color: #333;
	width: 95%;
	border: 1px solid #ddd;
	font-size: 100%;
	padding: 0.5em;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.1) inset;
        margin-top: 5px;
}
.wpcf7 input[type="submit"] {
	font-size: 100%;
	padding: 0.2em 0.4em;
	background: #eee;
	color: #333;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 0 1px rgba(0,0,0,.2);
	border: 1px solid #ccc;
	text-shadow: -1px 1px 0 rgba(255,255,255,1);
}
.wpcf7 input[type="submit"]:hover {
	box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}
div.wpcf7-validation-errors {
       border: 1px solid #3498db;
       padding: 5px 10px;
}

必須項目

任意項目より目立つことを意識して、背景を #3498db にして文字色を白にします。なぜ required2 かというと required だと コメント欄のアスタリスクに反映されてしまうからです。

span.required2 {
    margin: 0 0 0 5px;
    color: #fff;
    background: #3498db;
    padding: 2px 6px 2px 5px;
    border-radius: 5px;
}

任意項目

必須項目よりも目立たないようにして、背景を白に、文字色と外枠を #3498db の色にします。

span.any {
    margin: 0 0 0 5px;
    color: #3498db;
    background: #fff;
    border: 1px solid #3498db;
    padding: 2px 6px 2px 5px;
    border-radius: 5px;
}

まとめ

アスタリスクは、必須項目と同じ意味ですが、なんのマークかわからない人もいるそうです。必ず、必須項目と任意項目の文字をつけて装飾しましょう。

Web Wordpress