追加デザイン

お問い合わせフォーム(ContactForm7)のデザイン追加

最近ではブログをすることによって知名度が上がり、ブログ経由でお仕事をいただいている方をちらほらと見かけます。

今後、そういった方がさらに増えるのではないかということでCARATではお問い合わせフォーム(Contact Form7)をCARAT仕様にリデザインしてみました。

お問い合わせデザインプラグインCARATをご利用頂き、ありがとうございます。 こちらはお問い合わせページです。下記内容をご参照の上、お困りごと...
りょうた
りょうた
CARATのお問い合わせ部分が今回リデザインしたものだよ!

CARAT仕様のお問い合わせフォームの使い方

プラグインをインストール

このお問い合わせフォームを使うには「Contact Form7」というプラグインが必要です。

WordPressの管理画面より「プラグイン」→「新規追加」をクリックし検索欄で「Contact Form7」と打ち込みましょう。

「今すぐインストール」をクリックし数秒すると「有効化」のボタンに切り替わるのでそれもクリックしてプラグインを有効化しましょう。

Contact Form7に以下をコピペ

無事にプラグインが有効化されているとWordPressの管理画面上に「お問い合わせ」と文字が出るのでそれをクリックし、以下のコードをそのままコピペします。

<ul class="clearfix carat">
	<li><p>お客様情報</p></li>
	<li>
		<table class="inquiry">
			<tr>
				<th>
					<span>お名前</span><span class="haveto">必須</span>
				</th>
				<td>
					[text* your-name class:textsp placeholder"田中 田中"]
				</td>
			</tr>
			<tr>
				<th>
					<span>メールアドレス</span><span class="haveto">必須</span>
				</th>
				<td>
					[email* your-email class:mailsp placeholder"aaa@carat.co.jp"]
				</td>
			</tr>
			<tr>
				<th>
					<span>電話番号</span>
				</th>
				<td>
					[tel your-tel class:tel placeholder"090-1111-2222"]
				</td>
				</tr>
				<tr>
					<th>
						<span>郵便番号</span><span class="haveto">必須</span>
					</th>
					<td>
						[text* your-postalcode class:p-postal-code placeholder"123-4567"]
					</td>
				</tr>
				<tr>
					<th>
						<span>都道府県</span><span class="haveto">必須</span>
					</th>
					<td>
						[text* your-prefectures class:p-region placeholder"◯◯県"]
					</td>
				</tr>
				<tr>
					<th>
						<span>ご住所</span><span class="haveto">必須</span>
					</th>
					<td>
						[text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]
					</td>
				</tr>
				<tr>
					<th>
						<span>日付</span><span class="haveto">必須</span>
					</th>
					<td>
						[date* date-960 placeholder class:datesp ]
					</td>
				</tr>

			</table>
	</li>
</ul>
<ul class="clearfix carat">
	<li><p>お問い合わせ内容</p></li>
	<li>
		<table class="inquiry">
				<tr>
					<th>
						<span>ドロップダウンメニュー</span><span class="haveto">必須</span>
					</th>
					<td>
						[select* dpmenu include_blank class:drop "サンプル1" "サンプル2" "サンプル3"]
					</td>
				</tr>
				<tr>
					<th>
						<span>チェックボックス</span>
					</th>
				<td>
					[checkbox checkbox-1 exclusive use_label_element default:1 class:check1 "サンプル4" "サンプル5" "サンプル6"]
				</td>
				</tr>
				<tr>
					<th>
						<span>ラジオボタン</span>
					</th>
					<td>
						[radio radio1 use_label_element default:1 class:radio_carat "サンプル16""サンプル17""サンプル18"]
					</td>
				</tr>
				<tr>
					<th>
						<span>お問い合わせ内容</span><span class="haveto">必須</span>
					</th>
					<td>
					[textarea* your-message class:content placeholder "1行以上のテキスト入力欄"]
					</td>
				</tr>
			</table>

	</li>
</ul>
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのチェックボックスにチェックを入れてから送信してください。
			[submit id:formbtn "上記の内容で送信する"]

 

必要な項目を選定し、随時テキストを変える

そのままだとよく分からないお問い合わせフォームになってしまうので、あなたのブログの必要事項に合わせ、サンプルのような「お客様情報」「お問い合わせ内容」等に項目を分けてあげるとユーザーにも使いやすいお問い合わせが出来上がるかと思います。

あなたのブログのデザインに合わせて組み合わせを変えてあげましょう!

ワンポイントカスタマイズ

ブログの配色によっては「必須」ボタンの色がデフォルトと合わない可能性もあります。

そういった時には以下のコードを使って自分好みの色に変えてカスタマイズしていきましょう!

WordPressの管理画面より「外観」→「カスタマイズ」→「追加CSS」に以下のコードを貼り付けましょう。

.carat li table .haveto{
	color: #ffb6c1;
}

その時に「#ffb6c1」を自分のブログに合わせたカラーコードに変えてみてください。

りょうた
りょうた
違和感がないようにサクッと色を変えちゃおう!

 

WordPressテーマ「JIN」専用デザインプラグイン『CARAT』

「CARAT」は大人可愛いを追求した女性向けデザインプラグインです。

WordPressテーマ「JIN」の機能性と「CARAT」のデザインでより読み手に感動を与えるプラグインを作りました。

「自分のブログが好き」

そんな人が1人でも増えてくれたらと心から願っています。