tetoblog 初心者にもわかるブログデザインレシピ

SWELL｜Contact Form 7で作るお問い合わせフォームデザイン３選

広告
ブログデザインレシピ
プラグイン
SWELL｜Contact Form 7で作るお問い合わせフォームデザイン３選

「SWELLを使ってるけど、お問い合わせフォームのデザインがいまいち…」「もっと問い合わせが増えるフォームを作りたい…」そんなお悩みはありませんか？

コピペ可能なので簡単に実装できますよ！

この記事では、余計な解説は省いて、Contact Form ７の導入方法、設置方法と魅力的なお問い合わせフォームのソースを公開しています。

この記事でわかること
  • プラグイン「Contact Form 7」の導入方法
  • フォームの設置方法
  • コピペOK！お問い合わせフォームデザイン３選
テト

さっそく見ていきましょう！

目次

SWELLでお問い合わせフォームをデザインする準備

お問い合わせフォームを作るために必要なことは、以下２つです。

  1. フォームの項目を考える
  2. プラグインをダウンロードする

フォームの項目は、例えば「名前・ふりがな・電話番号・メールアドレス・選択項目・問い合わせ内容」など。必須か任意かも決めましょう。

この記事で解説するお問い合わせフォームの作り方だと「Contact Form ７」というプラグインのダウンロードがかならず必要になります。

おすすめのプラグインは「Contact Form ７」

おすすめのプラグインは、誰でも簡単にお問い合わせフォームを作れる「Contact Form７」です。

このプラグインはとても人気でSWELLとの相性も良いので、迷ってる方がいたら是非使ってみてください。

ちなみに無料で使えます。

Contact Form７の導入方法｜SWELL お問い合わせフォームデザイン

早速ですが、Contact Form ７の導入方法を解説してゆきます。

手順はぜんぶで５つです。

５STEPS

STEP１　プラグインを探す

STEP２　Contact Form７を確認

STEP３　「今すぐインストール」をクリック

STEP４　「有効化」をクリック

STEP５　「お問い合わせ」が追加される

順に進めてゆきましょう！

STEP
プラグインを探す

WordPress管理画面→プラグイン→新規プラグインを追加→プラグインの検索に「Contact Form 7」と入力

STEP
Contact Form７を確認

富士山のイラストアイコンです。

STEP
「今すぐインストール」をクリック
STEP
「有効化」をクリック
STEP
管理画面に「お問い合わせ」が追加される

無事にインストールして有効化が出来ていれば管理画面の右側に「お問い合わせ」が追加されます。

これで「Contact Form７」の導入は完了です。

つづいて、お問い合わせフォームの新規作成方法を解説します。

新規作成方法｜SWELL お問い合わせフォームデザイン

無事に導入できた「Contact Form ７」を使って、お問い合わせフォームを新規作成します。

手順はたった３つです。

３STEPS

STEP１　お問い合わせ→新規追加

STEP２　タイトルを入力

STEP３　「保存」

順に進めてゆきましょう！

STEP
「新規追加」とクリック

「お問い合わせ」→「新規追加」

または、「お問い合わせ」→コンタクトフォーム隣の「新規追加」

STEP
タイトルを入力

自分が分かりやすいタイトルをつけます。

例：お問い合わせフォーム１　等

STEP
「保存」をクリック

「コンタクトフォームが保存されました。」と表示されたらOKです。

フォームの設置方法｜SWELL お問い合わせフォームデザイン

新規作成ができたら、お問い合わせフォームが今どんなデザインになっているか一度確認してみましょう。

設置にはショートコードを使います。

ショートコードの確認方法

ショートコードは２箇所で確認できます。

１箇所目は、新規追加したフォームの編集画面のタイトル直下に青帯で表示されているコードです。

２箇所目は、WordPress管理画面→お問い合わせを開くとショートコード欄から確認できます。

まったく同じコードなので、どっちを使っても問題ありません。

テト

次のステップで使うので［ から ］までをコピー（Ctrl + C）しておきましょう。

フォームの設置方法

SWELLの設置方法はとても簡単です。

STEP
ショートコードをコピー（Ctrl + C）

前の章で確認したショートコードをコピー（Ctrl + C）しておきます

STEP
設置したい編集ページを開く

お問い合わせフォームを設置したい編集ページを開きます。

例

僕の場合、お問い合わせフォーム用のページを作っているので、WordPress管理画面→固定ページ→お問い合わせフォームが設置したいページになります。

STEP
「ショートコード」を選択する

編集ページを開いたら＋マーク→「ショートコード」と検索窓に打つ→出てきたショートコードを選択する

STEP
ショートコードをペースト（Ctrl + V）
STEP
「下書き保存」→「公開」
STEP
固定ページを表示して確認

このアイコンをクリックするとページを表示できます

STEP
フォームを確認

デザインで手を加えていない初期設定の状態が確認できました。

テト

ここから、このフォームにデザインを加えます。

ちなみにですが、テトブログのお問い合わせフォームは、少ししか手を加えていないシンプルなものです。

テトブログのフォームデザインはこちら↓

ソース公開↓

お問い合わせフォームは（必須）を足しただけで初期設定のままです。

<label> 氏名（必須）
    [text* your-name autocomplete:name] </label>

<label> メールアドレス（必須）
    [email* your-email autocomplete:email] </label>

<label> 題名（必須）
    [text* your-subject]  </label>

<label> メッセージ本文
    [textarea your-message] </label>

[submit "送信"]

追加CSSに下記を記述しています。

CSS
button, input, select, textarea {
  background-color: #f7f7f7;
  border: 1px solid hsla(0, 0%, 78%, .5);
  border-radius: 0;
  color: #333;
  padding: .25em .5em;
}

おしゃれなデザインに｜SWELL お問い合わせフォームデザイン３選

お問い合わせフォームをおしゃれなデザインにするためのソースを公開します。

すべてレスポンシブ対応してるのでスマホで見ても綺麗です。

全デザインに共通するHTML

<div>
<dl class="cf-area">
	<dt><p>会社名</p></dt>
	<dd><p>[text your-company]</p></dd>
</dl>
<dl class="cf-area">
	<dt><p>お名前 <span class="cf-required">必須</span></p></dt>
	<dd><p>[text* your-name]</p></dd>
</dl>
<dl class="cf-area">
	<dt><p>フリガナ <span class="cf-required">必須</span></p></dt>
	<dd><p>[text* your-furigana]</p></dd>
</dl>
<dl class="cf-area">
	<dt><p>メールアドレス <span class="cf-required">必須</span></p></dt>
	<dd><p>[email* your-email]</p></dd>
</dl>
<dl class="cf-area">
	<dt><p>件名 <span class="cf-required">必須</span></p></dt>
	<dd class="checkbox"><p>[checkbox* checkbox-778 use_label_element "選択肢1" "選択肢2" "選択肢3" "選択肢4"]</p></dd>
</dl>
<dl class="cf-area">
	<dt><p>メッセージ本文 <span class="cf-required">必須</span></p></dt>
	<dd><p>[textarea* your-message]</p></dd>
</dl>

<div class="cf-send">
	[submit "送信する"]
</div>
</div>

項目を追加したい場合は<dl>~</dl>を足します。

必須項目の場合はこちらを使う↓

<dl class="cf-area">
	<dt><p>項目名 <span class="cf-required">必須</span></p></dt>
	<dd><p>フォームタグを入力</p></dd>
</dl>

任意項目の場合はこちらを使う↓

<dl class="cf-area">
	<dt><p>項目名</p></dt>
	<dd><p>フォームタグを入力</p></dd>
</dl>
フォームタグとは

黄色枠をクリックすると自動生成されるタグのこと

例：［email* your-email］

全デザインに共通するCSS

コピペして使ってくださいね！

CSS
.cf-area {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2em 0;
	transition: all .3s;
}
.cf-area:last-child {
	border-bottom: none;
}
.cf-area dt {
  width: 180px;
  padding-right: 30px;
  text-align: left;
	line-height:1.5em;
}
.cf-area dd {
  flex: 1;
}
.cf-area input, .cf-area textarea {
  width: 100%;
  padding: 0.5em;
  border: none;
  background-color: #EBEBEB;
  font-size: 15px;
	resize: vertical;
	transition: all .3s;
}
.checkbox {
	display: flex;
  align-items: center;
}
.wpcf7-checkbox input {
	width:auto !important;
}
.cf-area input:focus,.cf-area textarea:focus {
　outline: none;
　background: #dde2e9;
}
.cf-required {
	background: orange;
	color: #fff;
	font-size: 0.8em;
	padding: 2px 5px;
	border-radius: 0;
}
.cf-send input {
	display: block;
	background: #2271B1;
	width: 300px;
	height: 44px;
	margin: 30px auto 0;
	border: none;
	border-radius: 0px;
	color: #fff;
  font-size: 15px;
  font-weight: normal;
  transition: all .3s;
  letter-spacing: 0.25em;
}
.cf-send input:hover {
	filter: brightness(1.25);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	background-color: #EBEBEB;
	border: none;
	text-align: left;
}
.wpcf7 form .wpcf7-response-output {
	font-size:15px;
}
@media screen and (max-width:768px){
.cf-area {
	display: block;
	padding: 1em 0;
	}
.cf-area dt {
  width: 100%;
	margin-bottom: 5px;
  padding-right: 0;
  text-align: left;
	line-height:1.5em;
	}
}

おしゃれなフォームデザイン Ver.１

上記の共通HTMLと共通CSSで完成するフォームデザインです。

おしゃれなフォームデザイン Ver.２

No.1のデザインに点線と項目ごとのスペースを足しました。

共通CSSに以下を反映しています。

  • 5行目　2emを1emに変更
  • 6行目　border-bottom: 1px dashed #ccc;を追加

反映済CSSコード↓

CSS
.cf-area {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2em 0;
	transition: all .3s;
	border-bottom: 1px dashed #ccc;
}
.cf-area:last-child {
	border-bottom: none;
}
.cf-area dt {
  width: 180px;
  padding-right: 30px;
  text-align: left;
	line-height:1.5em;
}
.cf-area dd {
  flex: 1;
}
.cf-area input, .cf-area textarea {
  width: 100%;
  padding: 0.5em;
  border: none;
  background-color: #EBEBEB;
  font-size: 15px;
	resize: vertical;
	transition: all .3s;
}
.checkbox {
	display: flex;
  align-items: center;
}
.wpcf7-checkbox input {
	width:auto !important;
}
.cf-area input:focus,.cf-area textarea:focus {
　outline: none;
　background: #dde2e9;
}
.cf-required {
	background: orange;
	color: #fff;
	font-size: 0.8em;
	padding: 2px 5px;
	border-radius: 0;
}
.cf-send input {
	display: block;
	background: #2271B1;
	width: 300px;
	height: 44px;
	margin: 30px auto 0;
	border: none;
	border-radius: 0px;
	color: #fff;
  font-size: 15px;
  font-weight: normal;
  transition: all .3s;
  letter-spacing: 0.25em;
}
.cf-send input:hover {
	filter: brightness(1.25);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	background-color: #EBEBEB;
	border: none;
	text-align: left;
}
.wpcf7 form .wpcf7-response-output {
	font-size:15px;
}
@media screen and (max-width:768px){
.cf-area {
	display: block;
	padding: 1em 0;
	}
.cf-area dt {
  width: 100%;
	margin-bottom: 5px;
  padding-right: 0;
  text-align: left;
	line-height:1.5em;
	}
}
開く

おしゃれなフォームデザイン Ver.３

No.1のデザインに、タイトルと枠を上下に変更し、枠の背景色変更と枠線を足しました。

共通CSSに以下を反映しています。

  • 2行目（display: flex;）削除
  • 16行目（margin-bottom:10px;）追加
  • 22行目（padding: 0.5em;）削除
  • 22行目（background-color:#fdfdfd;）変更
  • 22行目（border:solid 1px #dedede;）追加

反映済CSSコード（これをコピペ）↓

CSS
.cf-area {
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1em 0;
	transition: all .3s;
}
.cf-area:last-child {
	border-bottom: none;
}
.cf-area dt {
  width: 180px;
  padding-right: 30px;
  text-align: left;
	line-height:1.5em;
	margin-bottom:10px;
}
.cf-area dd {
  flex: 1;
}
.cf-area input, .cf-area textarea {
  width: 100%;
  border: none;
  background-color: #fdfdfd;
	border:solid 1px #dedede;
  font-size: 15px;
	resize: vertical;
	transition: all .3s;
}
.checkbox {
	display: flex;
  align-items: center;
}
.wpcf7-checkbox input {
	width:auto !important;
}
.cf-area input:focus,.cf-area textarea:focus {
　outline: none;
　background: #dde2e9;
}
.cf-required {
	background: orange;
	color: #fff;
	font-size: 0.8em;
	padding: 2px 5px;
	border-radius: 0;
}
.cf-send input {
	display: block;
	background: #2271B1;
	width: 300px;
	height: 44px;
	margin: 30px auto 0;
	border: none;
	border-radius: 0px;
	color: #fff;
  font-size: 15px;
  font-weight: normal;
  transition: all .3s;
  letter-spacing: 0.25em;
}
.cf-send input:hover {
	filter: brightness(1.25);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	background-color: #EBEBEB;
	border: none;
	text-align: left;
}
.wpcf7 form .wpcf7-response-output {
	font-size:15px;
}
@media screen and (max-width:768px){
.cf-area {
	display: block;
	padding: 1em 0;
	}
.cf-area dt {
  width: 100%;
	margin-bottom: 5px;
  padding-right: 0;
  text-align: left;
	line-height:1.5em;
	}
}
開く

うまく反映されない場合｜SWELL お問い合わせフォームデザイン

追加CSSに記述してみたら、デザインが崩れることがたまにあります。

以下、対処法です。

  • 無駄なスペースが入っていないか確認する
  • 怪しいコードは一旦削除して手打ちしてみる
  • 誤字脱字を疑う（: ; . , # { } など）

まとめ｜SWELL お問い合わせフォームデザイン

今回はContact Form ７を使ったお問い合わせフォームのデザインについて解説しました。

デフォルトデザインのまま使用してもまったく問題ないですが、ウェブサイトに合わせてデザインすると一気におしゃれになりますよね。

テト

こちらの記事も読んでみてくださいね。

Contact Form ７を使ったその他の初期設定はこちらのブログで解説してます。

その他の初期設定について
【Contact7】SWELLで作る簡単お問い合わせフォーム WordPressのお問い合わせフォームを簡単に作りたいけど何から手をつけて良いかわからないという方のために、 この記事では、主に「Contact7」を使ったお問い合わせフォ…
ブログデザインレシピ
プラグイン
  • URLをコピーしました！

この記事を書いた人

テトのアバター テト プログラマー / webデザイナー

プログラマー＆webデザイナー7年、フリーランス3年｜デザインで悩めるブロガーを救うべく「初心者にもわかるブログデザインレシピ」のブログ記事を執筆してます。｜読みながら少しプログラミングも学べます。

関連記事

目次