【Contact Form 7】お問い合わせフォームのカスタマイズ済みテンプレート作りました。[デザイン4つ]

2019年10月9日
2021年3月23日
CODING, WORDPRESS
Contact Form 7, お問い合わせフォーム, テンプレート
17796view

Contact Form 7（コンタクトフォーム７）でお問い合わせページを作るとき、もっと簡単に、オシャレにカスタマイズできるようにテンプレートを作ってみました。お問い合わせフォームのカスタマイズって、慣れていないと結構時間がかかって面倒なんですよね。しかもプラグインを使うとHTMLも特殊になるので余計に時間がかかるという。

Javascriptを使えばもっとリッチな表現が出来たりしますが、ここではあえてCSSだけでカスタマイズしてお問い合わせフォームテンプレートを作ってみました。気に入ったものがあればコピペして使ってください！

※対象ブラウザは2019年10月時点の各最新ブラウザを前提にしてます。

1 テンプレート利用の準備
- 1.1 共通のHTMLコードをコピペ
  - 1.1.1 テンプレート用の共通HTMLコード
2 テンプレート[1] シンプルな縦並びのフォーム
3 テンプレート[2] ラベルとフィールドが左右横並び（柔らかいイメージ）
4 テンプレート[3] ラベルとフィールドが左右横並び（かっこいいイメージ）
5 テンプレート[4] ゲストブック風
6 さいごに
- 6.1 2021.03023追記
- 6.2 「必須」の文字を表示させたいときは

テンプレート利用の準備

共通のHTMLコードをコピペ

まず、テンプレート用の共通HTMLコードを「Contact Form 7」の「お問い合わせ」作成ページのフォーム作成画面（下図参照）でコピペします。

テンプレート用の共通HTMLコード

コピペするコードはこちらです。必須項目にしたいフィールドには、”form__label”に”is-required”のクラスを追加して、フォームタグにも「*」を忘れずにつけてくださいね。

コードをみる

<div class="form__wrap">
<div class="form__row row-name">
  <p class="form__label is-required"><label for="your-name">お名前</label></p>
  <p class="form__body">[text* your-name id:your-name placeholder "お名前"]</p>
</div>
<div class="form__row row-tel">
  <p class="form__label is-required"><label for="tel">電話番号</label></p>
  <p class="form__body">[tel* tel id:tel placeholder "03-1234-1234"]</p>
</div>
<div class="form__row row-email">
  <p class="form__label is-required"><label for="email">メールアドレス</label></p>
  <p class="form__body">[email* email id:email placeholder "sample@sample.com"]</p>
</div>
<div class="form__row row-checkbox">
  <p class="form__label"><label>チェックボックス</label></p>
  <p class="form__body">[checkbox checkbox id:checkbox use_label_element "選択肢１" "選択肢２" "選択肢３"]</p>
</div>
<div class="form__row row-radio">
  <p class="form__label"><label>ラジオボタン</label></p>
  <p class="form__body">[radio radio id:radio use_label_element default:1 "選択肢１" "選択肢２" "選択肢３"]</p>
</div>
<div class="form__row row-select">
  <p class="form__label"><label for="select">ドロップダウンメニュー</label></p>
  <p class="form__body"><span class="select-wrap">[select select id:select include_blank "選択肢１" "選択肢２" "選択肢３"]</span></p>
</div>
<div class="form__row row-message">
  <p class="form__label is-required"><label for="message">お問い合わせ内容</label></p>
  <p class="form__body">[textarea* message id:message placeholder "お問い合わせ内容"]</p>
</div>
<div class="form__row row-privacy">
  <p class="form__body">[acceptance acceptance] <a href="#" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>に同意する [/acceptance]</p>
</div>
<div class="form__row row-submit">
  <div class="submit-btn">[submit id:submit "送 信"]<div class="submit-bg"></div></div>
</div>
</div>

<p class="form__body">[text* your-name id:your-name placeholder "お名前"]</p>

</div>

<p class="form__body">[tel* tel id:tel placeholder "03-1234-1234"]</p>

</div>

<p class="form__label is-required"><label for="email">メールアドレス</label></p>

<p class="form__body">[email* email id:email placeholder "sample@sample.com"]</p>

</div>

<p class="form__label"><label>チェックボックス</label></p>

<p class="form__body">[checkbox checkbox id:checkbox use_label_element "選択肢１" "選択肢２" "選択肢３"]</p>

</div>

<p class="form__label"><label>ラジオボタン</label></p>

<p class="form__body">[radio radio id:radio use_label_element default:1 "選択肢１" "選択肢２" "選択肢３"]</p>

</div>

<p class="form__label"><label for="select">ドロップダウンメニュー</label></p>

<p class="form__body"><span class="select-wrap">[select select id:select include_blank "選択肢１" "選択肢２" "選択肢３"]</span></p>

</div>

<p class="form__label is-required"><label for="message">お問い合わせ内容</label></p>

<p class="form__body">[textarea* message id:message placeholder "お問い合わせ内容"]</p>

</div>

<p class="form__body">[acceptance acceptance] <a href="#" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>に同意する [/acceptance]</p>

</div>

<div class="submit-btn">[submit id:submit "送信"]<div class="submit-bg"></div></div>

</div>

テンプレート[1] シンプルな縦並びのフォーム

一見普通のフォームですが、どのブラウザでも出来るだけ同じに見えるように地味に工夫してあります。フィールドの枠線の色はもちろん、チェックボックスのチェックの色、ラジオボタンの色などを自由に変えられるのでカスタマイズ性は抜群です。

サンプル画像

デモページ

チェックボックスなどの実際の動きは下記のデモページで触ってみてください。デモなので送信ボタンを押しても何も送信されません。

【Contact Form 7】カスタマイズ済みフォームテンプレート[1]のデモ

このページについて当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[1]のデモページ[…]

テンプレート[1]を使う準備

先程コピペした共通のHTMLコードの一番上の行を次のように変更します。

<div class="form__wrap template01">

1	<div class="form__wrap template01">

テンプレート[1] のCSSコード

次のCSSをスタイルシートにコピペします。

コードをみる

/* template01 */
.form__wrap {
  width: 100%;
  max-width: 900px;/*フォームの最大幅*/
  margin-right: auto;
  margin-left: auto;
}
.wpcf7 .template01 {
  color: #333;
  font-size: 16px;
}
.wpcf7 .template01 a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: inherit;
  transition: opacity .25s;
}
.wpcf7 .template01 a:hover {
  opacity: .5;
  transition: opacity .25s;
}
.wpcf7 .template01 div.form__row {
  margin: 0;
  padding: 0;
  margin-top: 2em;
}
.wpcf7 .template01 div.form__row.row-privacy {
  margin-top: 3.5em;
  text-align: center;
}
.wpcf7 .template01 div.form__row.row-submit {
  margin-top: 3em;
  text-align: center;
}
.wpcf7 .template01 p.form__label,
.wpcf7 .template01 p.form__body {
  margin: 0;
  margin-bottom: .5em;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template01 p.form__label label {
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template01 p.form__label.is-required label {
  padding-right: 40px; 
}
.wpcf7 .template01 p.form__label.is-required label::after {
  content: "必須";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  padding: 0 5px;
  background-color: #eb1919;
  color: #fff;
  font-size: 11px;
  text-align: center;
  box-sizing: border-box;
}
/* テキストフィールド */
.wpcf7 .template01 input[type=text],
.wpcf7 .template01 input[type=tel],
.wpcf7 .template01 input[type=email],
.wpcf7 .template01 input[type=url],
.wpcf7 .template01 input[type=date],
.wpcf7 .template01 input[type=number],
.wpcf7 .template01 textarea {
  width: 100%;
  margin: 0;
  padding: .5em 1em;
  border: 1px solid #ccc;
  border-radius: 0;
  box-shadow: none;
  background-color: #fff;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* テキストフィールド placeholder */
.wpcf7 .template01 input[type=text]::placeholder,
.wpcf7 .template01 input[type=tel]::placeholder,
.wpcf7 .template01 input[type=email]::placeholder,
.wpcf7 .template01 input[type=url]::placeholder,
.wpcf7 .template01 input[type=date]::placeholder,
.wpcf7 .template01 input[type=number]::placeholder,
.wpcf7 .template01 textarea::placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]:-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]:-ms-input-placeholder,
.wpcf7 .template01 input[type=email]:-ms-input-placeholder,
.wpcf7 .template01 input[type=url]:-ms-input-placeholder,
.wpcf7 .template01 input[type=date]:-ms-input-placeholder,
.wpcf7 .template01 input[type=number]:-ms-input-placeholder,
.wpcf7 .template01 textarea:-ms-input-placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]::-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]::-ms-input-placeholder,
.wpcf7 .template01 input[type=email]::-ms-input-placeholder,
.wpcf7 .template01 input[type=url]::-ms-input-placeholder,
.wpcf7 .template01 input[type=date]::-ms-input-placeholder,
.wpcf7 .template01 input[type=number]::-ms-input-placeholder,
.wpcf7 .template01 textarea::-ms-input-placeholder {
  color: #ccc;
}
/* テキストフィールド フォーカス時 */
.wpcf7 .template01 input[type=text]:focus,
.wpcf7 .template01 input[type=tel]:focus,
.wpcf7 .template01 input[type=email]:focus,
.wpcf7 .template01 input[type=url]:focus,
.wpcf7 .template01 input[type=date]:focus,
.wpcf7 .template01 input[type=number]:focus,
.wpcf7 .template01 textarea:focus {
  outline: 0;
  border: 1px #080808 solid;
}
/* チェックボックス */
.wpcf7 .template01 input[type=checkbox] {
  display: none;
}
.wpcf7 .template01 input[type=checkbox] + span {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=checkbox] + span::before {
  content: "";
  opacity: 1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.24em;
  height: 1.24em;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: #fff;
  box-sizing: border-box;
  transition: opacity .25s ease;
  z-index: 1;
}
.wpcf7 .template01 input[type=checkbox] + span::after {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: 0.15em;
  left: 0.44em;
  width: 0.4em;
  height: .8em;
  border-bottom: 3px solid #000;
  border-right: 3px solid #000;
  box-sizing: border-box;
  transform: rotate(40deg);
  transition: opacity .25s ease;
  z-index: 10;
}
.wpcf7 .template01 input[type=checkbox]:checked + span {
  color: #306ad4;
  transition: all .25s ease;
}
.wpcf7 .template01 input[type=checkbox]:checked + span::before {
  opacity: 1;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=checkbox]:checked + span::after {
  opacity: 1;
  border-bottom: 2px solid #306ad4;
  border-right: 2px solid #306ad4;
  transition: opacity .25s ease;
}
/* ラジオボタン */
.wpcf7 .template01 input[type=radio] {
  display: none;
}
.wpcf7 .template01 input[type=radio] + span {
  cursor: pointer;
  position: relative;
  margin: 0; 
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio] + span::after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio]:checked + span {
  color: #306ad4;
  transition: opacity .25s ease;
}
.wpcf7 .template01 input[type=radio]:checked + span::after {
  opacity: 1;
  top: .2em;
  left: .2em;
  width: .6em;
  height: .6em;
  background-color: #306ad4;
  border-radius: 50%;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
/* セレクト */
.wpcf7 .template01 span.select-wrap {
  position: relative;
  width: 250px;
  margin: 0;
  padding: 0;
}
.wpcf7 .template01 select {
  cursor: pointer;
  width: 250px;
  max-width: 100%;
  margin: 0;
  padding: .5em 2.5em .5em 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: none;
  background-color: #fff;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color 0.2s ease, outline 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template01 select::-ms-expand {
  display: none;
}
.wpcf7 .template01 span.select-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  width: .6em;
  height: .6em;
  top: 50%;
  right: 1em;
  margin-top: -3px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  box-sizing: border-box;
}
.wpcf7 .template01 select:focus {
  outline: 0;
  border: 1px #080808 solid;
}
.wpcf7 .template01 span.select-wrap:focus-within::after {
  border-bottom: 1px solid #080808;
  border-right: 1px solid #080808;
}
/* 送信ボタン */
.wpcf7 .template01 .submit-btn {
  position: relative;
  width: 320px;
  height: 65px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.wpcf7 .template01 input[type="submit"] {
  cursor: pointer;
  width: 320px;
  max-width: 100%;
  padding: 18px;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
  transition: opacity .25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template01 input[type="submit"]:disabled {
  cursor: not-allowed;
  box-shadow: none!important;
  border: 1px solid #f8f8f8!important;
  background-color: #f8f8f8!important;
  color: #999!important;
}
.wpcf7 .template01 input[type="submit"]:hover {
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  transition: opacity .25s, background-color .25s;
}
.wpcf7 .template01 input[type="submit"]:focus {
  outline: 1px #eee solid;
  border: 1px #080808 solid;
}
.wpcf7 .template01  span.wpcf7-list-item {
  margin: 0 1em .2em 0;
}
.wpcf7 .template01 .ajax-loader {
  display: block;
}
@media only screen and (max-width: 768px) {
  .wpcf7 .template01 span.wpcf7-list-item {
    display: block;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

/* template01 */

.form__wrap {

width: 100%;

max-width: 900px;/*フォームの最大幅*/

margin-right: auto;

margin-left: auto;

}

.wpcf7 .template01 {

color: #333;

font-size: 16px;

}

.wpcf7 .template01 a {

margin: 0;

padding: 0;

text-decoration: underline;

color: inherit;

transition: opacity .25s;

}

.wpcf7 .template01 a:hover {

opacity: .5;

transition: opacity .25s;

}

.wpcf7 .template01 div.form__row {

margin: 0;

padding: 0;

margin-top: 2em;

}

.wpcf7 .template01 div.form__row.row-privacy {

margin-top: 3.5em;

text-align: center;

}

.wpcf7 .template01 div.form__row.row-submit {

margin-top: 3em;

text-align: center;

}

.wpcf7 .template01 p.form__label,

.wpcf7 .template01 p.form__body {

margin: 0;

margin-bottom: .5em;

padding: 0;

box-sizing: border-box;

}

.wpcf7 .template01 p.form__label label {

position: relative;

margin: 0;

padding: 0;

box-sizing: border-box;

}

.wpcf7 .template01 p.form__label.is-required label {

padding-right: 40px;

}

.wpcf7 .template01 p.form__label.is-required label::after {

content: "必須";

display: block;

position: absolute;

top: 0;

right: 0;

width: 36px;

padding: 0 5px;

background-color: #eb1919;

color: #fff;

font-size: 11px;

text-align: center;

box-sizing: border-box;

}

/* テキストフィールド */

.wpcf7 .template01 input[type=text],

.wpcf7 .template01 input[type=tel],

.wpcf7 .template01 input[type=email],

.wpcf7 .template01 input[type=url],

.wpcf7 .template01 input[type=date],

.wpcf7 .template01 input[type=number],

.wpcf7 .template01 textarea {

width: 100%;

margin: 0;

padding: .5em 1em;

border: 1px solid #ccc;

border-radius: 0;

box-shadow: none;

background-color: #fff;

color: inherit;

font-family: inherit;

font-weight: inherit;

font-size: inherit;

box-sizing: border-box;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

/* テキストフィールド placeholder */

.wpcf7 .template01 input[type=text]::placeholder,

.wpcf7 .template01 input[type=tel]::placeholder,

.wpcf7 .template01 input[type=email]::placeholder,

.wpcf7 .template01 input[type=url]::placeholder,

.wpcf7 .template01 input[type=date]::placeholder,

.wpcf7 .template01 input[type=number]::placeholder,

.wpcf7 .template01 textarea::placeholder {

color: #ccc;

}

.wpcf7 .template01 input[type=text]:-ms-input-placeholder,

.wpcf7 .template01 input[type=tel]:-ms-input-placeholder,

.wpcf7 .template01 input[type=email]:-ms-input-placeholder,

.wpcf7 .template01 input[type=url]:-ms-input-placeholder,

.wpcf7 .template01 input[type=date]:-ms-input-placeholder,

.wpcf7 .template01 input[type=number]:-ms-input-placeholder,

.wpcf7 .template01 textarea:-ms-input-placeholder {

color: #ccc;

}

.wpcf7 .template01 input[type=text]::-ms-input-placeholder,

.wpcf7 .template01 input[type=tel]::-ms-input-placeholder,

.wpcf7 .template01 input[type=email]::-ms-input-placeholder,

.wpcf7 .template01 input[type=url]::-ms-input-placeholder,

.wpcf7 .template01 input[type=date]::-ms-input-placeholder,

.wpcf7 .template01 input[type=number]::-ms-input-placeholder,

.wpcf7 .template01 textarea::-ms-input-placeholder {

color: #ccc;

}

/* テキストフィールドフォーカス時 */

.wpcf7 .template01 input[type=text]:focus,

.wpcf7 .template01 input[type=tel]:focus,

.wpcf7 .template01 input[type=email]:focus,

.wpcf7 .template01 input[type=url]:focus,

.wpcf7 .template01 input[type=date]:focus,

.wpcf7 .template01 input[type=number]:focus,

.wpcf7 .template01 textarea:focus {

outline: 0;

border: 1px #080808 solid;

}

/* チェックボックス */

.wpcf7 .template01 input[type=checkbox] {

display: none;

}

.wpcf7 .template01 input[type=checkbox] + span {

cursor: pointer;

position: relative;

margin: 0;

padding: 0 1em 0 1.8em;

font-size: inherit;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template01 input[type=checkbox] + span::before {

content: "";

opacity: 1;

display: block;

position: absolute;

top: 0;

left: 0;

width: 1.24em;

height: 1.24em;

border: 1px solid #ccc;

border-radius: 0;

background-color: #fff;

box-sizing: border-box;

transition: opacity .25s ease;

z-index: 1;

}

.wpcf7 .template01 input[type=checkbox] + span::after {

content: "";

opacity: 0;

display: block;

position: absolute;

top: 0.15em;

left: 0.44em;

width: 0.4em;

height: .8em;

border-bottom: 3px solid #000;

border-right: 3px solid #000;

box-sizing: border-box;

transform: rotate(40deg);

transition: opacity .25s ease;

z-index: 10;

}

.wpcf7 .template01 input[type=checkbox]:checked + span {

color: #306ad4;

transition: all .25s ease;

}

.wpcf7 .template01 input[type=checkbox]:checked + span::before {

opacity: 1;

transition: opacity .25s ease;

}

.wpcf7 .template01 input[type=checkbox]:checked + span::after {

opacity: 1;

border-bottom: 2px solid #306ad4;

border-right: 2px solid #306ad4;

transition: opacity .25s ease;

}

/* ラジオボタン */

.wpcf7 .template01 input[type=radio] {

display: none;

}

.wpcf7 .template01 input[type=radio] + span {

cursor: pointer;

position: relative;

margin: 0;

padding: 0 1em 0 1.8em;

font-size: inherit;

transition: opacity .25s ease;

}

.wpcf7 .template01 input[type=radio] + span::before {

content: "";

display: block;

position: absolute;

top: 0;

left: 0;

width: 1em;

height: 1em;

border: 1px solid #ccc;

border-radius: 50%;

background-color: #fff;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template01 input[type=radio] + span::after {

content: "";

display: block;

opacity: 0;

position: absolute;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template01 input[type=radio]:checked + span {

color: #306ad4;

transition: opacity .25s ease;

}

.wpcf7 .template01 input[type=radio]:checked + span::after {

opacity: 1;

top: .2em;

left: .2em;

width: .6em;

height: .6em;

background-color: #306ad4;

border-radius: 50%;

box-sizing: border-box;

transition: opacity .25s ease;

}

/* セレクト */

.wpcf7 .template01 span.select-wrap {

position: relative;

width: 250px;

margin: 0;

padding: 0;

}

.wpcf7 .template01 select {

cursor: pointer;

width: 250px;

max-width: 100%;

margin: 0;

padding: .5em 2.5em .5em 1em;

border: 1px solid #ccc;

border-radius: 4px;

box-shadow: none;

background-color: #fff;

color: inherit;

font-size: inherit;

line-height: 1;

box-sizing: border-box;

transition: border-color 0.2s ease, outline 0.2s ease;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

.wpcf7 .template01 select::-ms-expand {

display: none;

}

.wpcf7 .template01 span.select-wrap::after {

content: "";

pointer-events: none;

position: absolute;

display: block;

width: .6em;

height: .6em;

top: 50%;

right: 1em;

margin-top: -3px;

border-bottom: 1px solid #ccc;

border-right: 1px solid #ccc;

transform: rotate(45deg) translateY(-50%);

transform-origin: 50% 0;

box-sizing: border-box;

}

.wpcf7 .template01 select:focus {

outline: 0;

border: 1px #080808 solid;

}

.wpcf7 .template01 span.select-wrap:focus-within::after {

border-bottom: 1px solid #080808;

border-right: 1px solid #080808;

}

/* 送信ボタン */

.wpcf7 .template01 .submit-btn {

position: relative;

width: 320px;

height: 65px;

max-width: 100%;

margin: 0;

padding: 0;

margin-left: auto;

margin-right: auto;

}

.wpcf7 .template01 input[type="submit"] {

cursor: pointer;

width: 320px;

max-width: 100%;

padding: 18px;

border-radius: 0;

box-shadow: none;

border: 1px solid #000;

background-color: #000;

color: #fff;

font-size: 18px;

text-align: center;

box-sizing: border-box;

transition: opacity .25s;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

.wpcf7 .template01 input[type="submit"]:disabled {

cursor: not-allowed;

box-shadow: none!important;

border: 1px solid #f8f8f8!important;

background-color: #f8f8f8!important;

color: #999!important;

}

.wpcf7 .template01 input[type="submit"]:hover {

border: 1px solid #000;

background-color: #fff;

color: #000;

transition: opacity .25s, background-color .25s;

}

.wpcf7 .template01 input[type="submit"]:focus {

outline: 1px #eee solid;

border: 1px #080808 solid;

}

.wpcf7 .template01 span.wpcf7-list-item {

margin: 0 1em .2em 0;

}

.wpcf7 .template01 .ajax-loader {

display: block;

}

@media only screen and (max-width: 768px) {

.wpcf7 .template01 span.wpcf7-list-item {

display: block;

}

テンプレート[2] ラベルとフィールドが左右横並び（柔らかいイメージ）

PCではラベルとフィールドが横並びで、768px以下で縦並びになります。女性向けの柔らかい感じのデザインにしてみました。

サンプル画像

デモページ

【Contact Form 7】カスタマイズ済みフォームテンプレート[2]のデモ

このページについて当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[2]のデモページ[…]

テンプレート[2]を使う準備

先程コピペした共通のHTMLコードの一番上の行を次のように変更します。

<div class="form__wrap template02">

1	<div class="form__wrap template02">

テンプレート[2] のCSSコード

次のCSSをスタイルシートにコピペします。

コードをみる

/* template02 */
.form__wrap {
  width: 100%;
  max-width: 900px;/*フォームの最大幅*/
  margin-right: auto;
  margin-left: auto;
}
.wpcf7 .template02 {
  color: #666;
  font-size: 16px;
}
.wpcf7 .template02 a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: inherit;
  transition: opacity .25s;
}
.wpcf7 .template02 a:hover {
  opacity: .5;
  transition: opacity .25s;
}
.wpcf7 .template02 div.form__row {
  display: flex;
  margin: 0;
  padding: 0;
  border-top: 1px solid #efe8e5;
}
.wpcf7 .template02 div.form__row.row-privacy,
.wpcf7 .template02 div.form__row.row-submit {
  display: block;
  border-top: 0;
  margin-top: 1em;
  text-align: center;
}
.wpcf7 .template02 p.form__label,
.wpcf7 .template02 p.form__body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template02 p.form__label {
  width: 36%;
  padding: 1.5em 1em;
}
.wpcf7 .template02 p.form__body {
  width: 64%;
  padding: 1.5em 1em;
}
.wpcf7 .template02 div.form__row.row-privacy .form__body,
.wpcf7 .template02 div.form__row.row-submit .form__body {
  width: 100%;
}
.wpcf7 .template02 p.form__label label {
  position: relative;
  margin: 0;
  padding: 0;
  padding-left: 44px; 
  box-sizing: border-box;
}
.wpcf7 .template02 p.form__label label::after {
  content: "任意";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  margin: 0;
  padding: 0 5px;
  border-radius: 2px;
  background-color: #f1f1f1;
  color: #929292;
  font-size: 11px;
  text-align: center;
  box-sizing: border-box;
}
.wpcf7 .template02 p.form__label.is-required label {
  position: relative;
}
.wpcf7 .template02 p.form__label.is-required label::after {
  content: "必須";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  padding: 0 5px;
  background-color: #6c5c2f;
  color: #fff;
  font-size: 11px;
  text-align: center;
}
/* テキストフィールド */
.wpcf7 .template02 input[type=text],
.wpcf7 .template02 input[type=tel],
.wpcf7 .template02 input[type=email],
.wpcf7 .template02 textarea {
  width: 100%;
  margin: 0;
  padding: .5em 1em;
  border: 1px solid #c4bbb8;
  border-radius: 4px;
  box-shadow: none;
  background-color: #fefefe;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: 16px;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* テキストフィールド placeholder */
.wpcf7 .template01 input[type=text]::placeholder,
.wpcf7 .template01 input[type=tel]::placeholder,
.wpcf7 .template01 input[type=email]::placeholder,
.wpcf7 .template01 input[type=url]::placeholder,
.wpcf7 .template01 input[type=date]::placeholder,
.wpcf7 .template01 input[type=number]::placeholder,
.wpcf7 .template01 textarea::placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]:-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]:-ms-input-placeholder,
.wpcf7 .template01 input[type=email]:-ms-input-placeholder,
.wpcf7 .template01 input[type=url]:-ms-input-placeholder,
.wpcf7 .template01 input[type=date]:-ms-input-placeholder,
.wpcf7 .template01 input[type=number]:-ms-input-placeholder,
.wpcf7 .template01 textarea:-ms-input-placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]::-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]::-ms-input-placeholder,
.wpcf7 .template01 input[type=email]::-ms-input-placeholder,
.wpcf7 .template01 input[type=url]::-ms-input-placeholder,
.wpcf7 .template01 input[type=date]::-ms-input-placeholder,
.wpcf7 .template01 input[type=number]::-ms-input-placeholder,
.wpcf7 .template01 textarea::-ms-input-placeholder {
  color: #ccc;
}
/* テキストフィールド フォーカス時 */
.wpcf7 .template01 input[type=text]:focus,
.wpcf7 .template01 input[type=tel]:focus,
.wpcf7 .template01 input[type=email]:focus,
.wpcf7 .template01 input[type=url]:focus,
.wpcf7 .template01 input[type=date]:focus,
.wpcf7 .template01 input[type=number]:focus,
.wpcf7 .template01 textarea:focus {
  outline: 0;
  border: 1px #6c5d2f solid;
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
}
/* チェックボックス */
.wpcf7 .template02 input[type=checkbox] {
  display: none;
}
.wpcf7 .template02 input[type=checkbox] + span {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=checkbox] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.24em;
  height: 1.24em;
  border: 1px solid #c4bbb8;
  border-radius: 4px;
  background-color: #fefefe;
  box-sizing: border-box;
}
.wpcf7 .template02 input[type=checkbox] + span::after {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: 0.15em;
  left: 0.44em;
  width: 0.4em;
  height: .8em;
  border-bottom: 3px solid #000;
  border-right: 3px solid #000;
  box-sizing: border-box;
  transform: rotate(40deg);
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=checkbox]:checked + span {
  color: #6c5d2f;
  transition: all .25s ease;
}
.wpcf7 .template02 input[type=checkbox]:checked + span::before {
  opacity: 1;
  border: 1px solid #6c5d2f;
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
  background-color: #6c5d2f;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=checkbox]:checked + span::after {
  opacity: 1;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  transition: opacity .25s ease;
}
/* ラジオボタン */
.wpcf7 .template02 input[type=radio] {
  display: none;
}
.wpcf7 .template02 input[type=radio] + span {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=radio] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border: 1px solid #c4bbb8;
  border-radius: 50%;
  background-color: #fefefe;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=radio] + span::after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template02 input[type=radio]:checked + span {
  color: #6c5d2f;
}
.wpcf7 .template02 input[type=radio]:checked + span::before {
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
}
.wpcf7 .template02 input[type=radio]:checked + span::after {
  opacity: 1;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background-color: #6c5d2f;
  border-radius: 50%;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
/* セレクト */
.wpcf7 .template02 span.select-wrap {
  position: relative;
  width: 250px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template02 select {
  cursor: pointer;
  width: 250px;
  max-width: 100%;
  margin: 0;
  padding: .5em 3.5em .5em 1em;
  border: 1px solid #c4bbb8;
  border-radius: 4px;
  box-shadow: none;
  background-color: #fefefe;
  background-image: linear-gradient(90deg, #d4cbb2, #d4cbb2);
  background-position: 100% 0;
  background-size: 2em 3.5em;
  background-repeat: no-repeat;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color 0.2s ease, outline 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template02 select::-ms-expand {
  display: none;
}
.wpcf7 .template02 span.select-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  width: .6em;
  height: .6em;
  top: 50%;
  right: .8em;
  margin-top: -3px;
  border-bottom: 1px solid #6c5d2f;
  border-right: 1px solid #6c5d2f;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  box-sizing: border-box;
}
.wpcf7 .template02 select:focus {
  outline: 0;
  border: 1px #6c5d2f solid;
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
}
.wpcf7 .template02 span.select-wrap:focus-within::after {
  border-bottom: 1px solid #6c5d2f;
  border-right: 1px solid #6c5d2f;
}
/* 送信ボタン */
.wpcf7 .template02 .submit-btn {
  position: relative;
  width: 320px;
  height: 65px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.wpcf7 .template02 input[type="submit"] {
  cursor: pointer;
  width: 320px;
  max-width: 100%;
  padding: 18px;
  box-shadow: none;
  border: 1px #6c5d2f solid;
  border-radius: 8px;
  background-color: #6c5d2f;
  color: #fff;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
  transition: all .25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template02 input[type="submit"]:disabled {
  cursor: not-allowed;
  box-shadow: none!important;
  border: 1px solid #f8f8f8!important;
  background-color: #f8f8f8!important;
  color: #929292!important;
}
.wpcf7 .template02 input[type="submit"]:hover {
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
  background-color: #fff;
  color: #6c5d2f;
  transition: all .25s;
}
.wpcf7 .template02 input[type="submit"]:focus {
  outline: 0;
  border: 1px #6c5d2f solid;
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
}
@media only screen and (max-width: 768px) {
  .wpcf7 .template02 div.form__row {
    display: block;
  }
  .wpcf7 .template02 p.form__label {
    width: 100%;
    padding: 1.5em 1em 0;
  }
  .wpcf7 .template02 p.form__body {
    width: 100%;
    padding: 1em 1em 1.5em;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

/* template02 */

.form__wrap {

width: 100%;

max-width: 900px;/*フォームの最大幅*/

margin-right: auto;

margin-left: auto;

}

.wpcf7 .template02 {

color: #666;

font-size: 16px;

}

.wpcf7 .template02 a {

margin: 0;

padding: 0;

text-decoration: underline;

color: inherit;

transition: opacity .25s;

}

.wpcf7 .template02 a:hover {

opacity: .5;

transition: opacity .25s;

}

.wpcf7 .template02 div.form__row {

display: flex;

margin: 0;

padding: 0;

border-top: 1px solid #efe8e5;

}

.wpcf7 .template02 div.form__row.row-privacy,

.wpcf7 .template02 div.form__row.row-submit {

display: block;

border-top: 0;

margin-top: 1em;

text-align: center;

}

.wpcf7 .template02 p.form__label,

.wpcf7 .template02 p.form__body {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.wpcf7 .template02 p.form__label {

width: 36%;

padding: 1.5em 1em;

}

.wpcf7 .template02 p.form__body {

width: 64%;

padding: 1.5em 1em;

}

.wpcf7 .template02 div.form__row.row-privacy .form__body,

.wpcf7 .template02 div.form__row.row-submit .form__body {

width: 100%;

}

.wpcf7 .template02 p.form__label label {

position: relative;

margin: 0;

padding: 0;

padding-left: 44px;

box-sizing: border-box;

}

.wpcf7 .template02 p.form__label label::after {

content: "任意";

display: block;

position: absolute;

top: 0;

left: 0;

width: 36px;

margin: 0;

padding: 0 5px;

border-radius: 2px;

background-color: #f1f1f1;

color: #929292;

font-size: 11px;

text-align: center;

box-sizing: border-box;

}

.wpcf7 .template02 p.form__label.is-required label {

position: relative;

}

.wpcf7 .template02 p.form__label.is-required label::after {

content: "必須";

display: block;

position: absolute;

top: 0;

right: 0;

width: 36px;

padding: 0 5px;

background-color: #6c5c2f;

color: #fff;

font-size: 11px;

text-align: center;

}

/* テキストフィールド */

.wpcf7 .template02 input[type=text],

.wpcf7 .template02 input[type=tel],

.wpcf7 .template02 input[type=email],

.wpcf7 .template02 textarea {

width: 100%;

margin: 0;

padding: .5em 1em;

border: 1px solid #c4bbb8;

border-radius: 4px;

box-shadow: none;

background-color: #fefefe;

color: inherit;

font-family: inherit;

font-weight: inherit;

font-size: 16px;

box-sizing: border-box;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

/* テキストフィールド placeholder */

.wpcf7 .template01 input[type=text]::placeholder,

.wpcf7 .template01 input[type=tel]::placeholder,

.wpcf7 .template01 input[type=email]::placeholder,

.wpcf7 .template01 input[type=url]::placeholder,

.wpcf7 .template01 input[type=date]::placeholder,

.wpcf7 .template01 input[type=number]::placeholder,

.wpcf7 .template01 textarea::placeholder {

color: #ccc;

}

.wpcf7 .template01 input[type=text]:-ms-input-placeholder,

.wpcf7 .template01 input[type=tel]:-ms-input-placeholder,

.wpcf7 .template01 input[type=email]:-ms-input-placeholder,

.wpcf7 .template01 input[type=url]:-ms-input-placeholder,

.wpcf7 .template01 input[type=date]:-ms-input-placeholder,

.wpcf7 .template01 input[type=number]:-ms-input-placeholder,

.wpcf7 .template01 textarea:-ms-input-placeholder {

color: #ccc;

}

.wpcf7 .template01 input[type=text]::-ms-input-placeholder,

.wpcf7 .template01 input[type=tel]::-ms-input-placeholder,

.wpcf7 .template01 input[type=email]::-ms-input-placeholder,

.wpcf7 .template01 input[type=url]::-ms-input-placeholder,

.wpcf7 .template01 input[type=date]::-ms-input-placeholder,

.wpcf7 .template01 input[type=number]::-ms-input-placeholder,

.wpcf7 .template01 textarea::-ms-input-placeholder {

color: #ccc;

}

/* テキストフィールドフォーカス時 */

.wpcf7 .template01 input[type=text]:focus,

.wpcf7 .template01 input[type=tel]:focus,

.wpcf7 .template01 input[type=email]:focus,

.wpcf7 .template01 input[type=url]:focus,

.wpcf7 .template01 input[type=date]:focus,

.wpcf7 .template01 input[type=number]:focus,

.wpcf7 .template01 textarea:focus {

outline: 0;

border: 1px #6c5d2f solid;

box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);

}

/* チェックボックス */

.wpcf7 .template02 input[type=checkbox] {

display: none;

}

.wpcf7 .template02 input[type=checkbox] + span {

cursor: pointer;

position: relative;

margin: 0;

padding: 0 1em 0 1.8em;

font-size: inherit;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template02 input[type=checkbox] + span::before {

content: "";

display: block;

position: absolute;

top: 0;

left: 0;

width: 1.24em;

height: 1.24em;

border: 1px solid #c4bbb8;

border-radius: 4px;

background-color: #fefefe;

box-sizing: border-box;

}

.wpcf7 .template02 input[type=checkbox] + span::after {

content: "";

opacity: 0;

display: block;

position: absolute;

top: 0.15em;

left: 0.44em;

width: 0.4em;

height: .8em;

border-bottom: 3px solid #000;

border-right: 3px solid #000;

box-sizing: border-box;

transform: rotate(40deg);

transition: opacity .25s ease;

}

.wpcf7 .template02 input[type=checkbox]:checked + span {

color: #6c5d2f;

transition: all .25s ease;

}

.wpcf7 .template02 input[type=checkbox]:checked + span::before {

opacity: 1;

border: 1px solid #6c5d2f;

box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);

background-color: #6c5d2f;

transition: opacity .25s ease;

}

.wpcf7 .template02 input[type=checkbox]:checked + span::after {

opacity: 1;

border-bottom: 3px solid #fff;

border-right: 3px solid #fff;

transition: opacity .25s ease;

}

/* ラジオボタン */

.wpcf7 .template02 input[type=radio] {

display: none;

}

.wpcf7 .template02 input[type=radio] + span {

cursor: pointer;

position: relative;

margin: 0;

padding: 0 1em 0 1.8em;

font-size: inherit;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template02 input[type=radio] + span::before {

content: "";

display: block;

position: absolute;

top: 0;

left: 0;

width: 1em;

height: 1em;

border: 1px solid #c4bbb8;

border-radius: 50%;

background-color: #fefefe;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template02 input[type=radio] + span::after {

content: "";

display: block;

opacity: 0;

position: absolute;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template02 input[type=radio]:checked + span {

color: #6c5d2f;

}

.wpcf7 .template02 input[type=radio]:checked + span::before {

box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);

}

.wpcf7 .template02 input[type=radio]:checked + span::after {

opacity: 1;

top: 0;

left: 0;

width: 1em;

height: 1em;

background-color: #6c5d2f;

border-radius: 50%;

box-sizing: border-box;

transition: opacity .25s ease;

}

/* セレクト */

.wpcf7 .template02 span.select-wrap {

position: relative;

width: 250px;

margin: 0;

padding: 0;

box-sizing: border-box;

}

.wpcf7 .template02 select {

cursor: pointer;

width: 250px;

max-width: 100%;

margin: 0;

padding: .5em 3.5em .5em 1em;

border: 1px solid #c4bbb8;

border-radius: 4px;

box-shadow: none;

background-color: #fefefe;

background-image: linear-gradient(90deg, #d4cbb2, #d4cbb2);

background-position: 100% 0;

background-size: 2em 3.5em;

background-repeat: no-repeat;

color: inherit;

font-size: inherit;

line-height: 1;

box-sizing: border-box;

transition: border-color 0.2s ease, outline 0.2s ease;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

.wpcf7 .template02 select::-ms-expand {

display: none;

}

.wpcf7 .template02 span.select-wrap::after {

content: "";

pointer-events: none;

position: absolute;

display: block;

width: .6em;

height: .6em;

top: 50%;

right: .8em;

margin-top: -3px;

border-bottom: 1px solid #6c5d2f;

border-right: 1px solid #6c5d2f;

transform: rotate(45deg) translateY(-50%);

transform-origin: 50% 0;

box-sizing: border-box;

}

.wpcf7 .template02 select:focus {

outline: 0;

border: 1px #6c5d2f solid;

box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);

}

.wpcf7 .template02 span.select-wrap:focus-within::after {

border-bottom: 1px solid #6c5d2f;

border-right: 1px solid #6c5d2f;

}

/* 送信ボタン */

.wpcf7 .template02 .submit-btn {

position: relative;

width: 320px;

height: 65px;

max-width: 100%;

margin: 0;

padding: 0;

margin-left: auto;

margin-right: auto;

}

.wpcf7 .template02 input[type="submit"] {

cursor: pointer;

width: 320px;

max-width: 100%;

padding: 18px;

box-shadow: none;

border: 1px #6c5d2f solid;

border-radius: 8px;

background-color: #6c5d2f;

color: #fff;

font-size: 18px;

text-align: center;

box-sizing: border-box;

transition: all .25s;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

.wpcf7 .template02 input[type="submit"]:disabled {

cursor: not-allowed;

box-shadow: none!important;

border: 1px solid #f8f8f8!important;

background-color: #f8f8f8!important;

color: #929292!important;

}

.wpcf7 .template02 input[type="submit"]:hover {

box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);

background-color: #fff;

color: #6c5d2f;

transition: all .25s;

}

.wpcf7 .template02 input[type="submit"]:focus {

outline: 0;

border: 1px #6c5d2f solid;

box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);

}

@media only screen and (max-width: 768px) {

.wpcf7 .template02 div.form__row {

display: block;

}

.wpcf7 .template02 p.form__label {

width: 100%;

padding: 1.5em 1em 0;

}

.wpcf7 .template02 p.form__body {

width: 100%;

padding: 1em 1em 1.5em;

}

テンプレート[3] ラベルとフィールドが左右横並び（かっこいいイメージ）

PCではラベルとフィールドが横並びで、768px以下で縦並びになります。チェックボックスの動きなどに少しこだわってるので、デモを触ってみてください！

サンプル画像

デモページ

【Contact Form 7】カスタマイズ済みフォームテンプレート[3]のデモ

このページについて当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[3]のデモページ[…]

テンプレート[3]を使う準備

先程コピペした共通のHTMLコードの一番上の行を次のように変更します。

<div class="form__wrap template03">

1	<div class="form__wrap template03">

テンプレート[3] のCSSコード

次のCSSをスタイルシートにコピペします。

コードをみる

/* template03 */
.form__wrap {
  width: 100%;
  max-width: 900px;/*フォームの最大幅*/
  margin-right: auto;
  margin-left: auto;
}
.wpcf7 .template03 {
  color: #333;
  font-size: 14px;
}
.wpcf7 .template03 a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: inherit;
  transition: opacity .25s;
}
.wpcf7 .template03 a:hover {
  opacity: .5;
  transition: opacity .25s;
}
.wpcf7 .template03 div.form__row {
  display: flex;
  align-items: center;
  margin: 0;
}
.wpcf7 .template03 div.form__row.row-privacy,
.wpcf7 .template03 div.form__row.row-submit {
  display: block;
  margin-top: 1em;
  text-align: center;
}
.wpcf7 .template03 div.form__row.row-privacy .form__body,
.wpcf7 .template03 div.form__row.row-submit .form__body {
  width: 100%;
}
.wpcf7 .template03 div.form__row.row-message {
  align-items: flex-start;
}
.wpcf7 p.form__label,
.wpcf7 p.form__body {
  margin: 0;
  box-sizing: border-box;
}
.wpcf7 .template03 p.form__label {
  width: 36%;
  padding: 1em;
}
.wpcf7 .template03 p.form__body {
  width: 64%;
  padding: 1em;
}
.wpcf7 .template03 p.form__label label {
  position: relative;
  padding-left: 44px;
}
.wpcf7 .template03 p.form__label label::after {
  content: "任意";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  margin: 0;
  padding: 0 5px;
  border-radius: 0;
  background-color: #f6f6f6;
  color: #999;
  font-size: 11px;
  text-align: center;
  box-sizing: border-box;
}
.wpcf7 .template03 p.form__label.is-required label {
  position: relative;
}
.wpcf7 .template03 p.form__label.is-required label::after {
  content: "必須";
  display: block;
  position: absolute;
  width: 36px;
  margin: 0;
  padding: 0 5px;
  border: 1px solid #e00022;
  background-color: #fff;
  color: #e00022;
  font-size: 11px;
  text-align: center;
  box-sizing: border-box;
}
/* テキストフィールド */
.wpcf7 .template03 input[type=text],
.wpcf7 .template03 input[type=tel],
.wpcf7 .template03 input[type=email],
.wpcf7 .template03 textarea {
  width: 100%;
  margin: 0;
  padding: .5em 1em;
  border: 1px solid #333;
  border-left: 4px solid #333;
  border-radius: 0;
  box-shadow: none;
  background-color: #fff;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* テキストフィールド placeholder */
.wpcf7 .template03 input[type=text]::placeholder,
.wpcf7 .template03 input[type=tel]::placeholder,
.wpcf7 .template03 input[type=email]::placeholder,
.wpcf7 .template03 input[type=url]::placeholder,
.wpcf7 .template03 input[type=date]::placeholder,
.wpcf7 .template03 input[type=number]::placeholder,
.wpcf7 .template03 textarea::placeholder {
  color: #ccc;
}
.wpcf7 .template03 input[type=text]:-ms-input-placeholder,
.wpcf7 .template03 input[type=tel]:-ms-input-placeholder,
.wpcf7 .template03 input[type=email]:-ms-input-placeholder,
.wpcf7 .template03 input[type=url]:-ms-input-placeholder,
.wpcf7 .template03 input[type=date]:-ms-input-placeholder,
.wpcf7 .template03 input[type=number]:-ms-input-placeholder,
.wpcf7 .template03 textarea:-ms-input-placeholder {
  color: #ccc;
}
.wpcf7 .template03 input[type=text]::-ms-input-placeholder,
.wpcf7 .template03 input[type=tel]::-ms-input-placeholder,
.wpcf7 .template03 input[type=email]::-ms-input-placeholder,
.wpcf7 .template03 input[type=url]::-ms-input-placeholder,
.wpcf7 .template03 input[type=date]::-ms-input-placeholder,
.wpcf7 .template03 input[type=number]::-ms-input-placeholder,
.wpcf7 .template03 textarea::-ms-input-placeholder {
  color: #ccc;
}
/* テキストフィールド フォーカス時 */
.wpcf7 .template03 input[type=text]:focus,
.wpcf7 .template03 input[type=tel]:focus,
.wpcf7 .template03 input[type=email]:focus,
.wpcf7 .template03 input[type=url]:focus,
.wpcf7 .template03 input[type=date]:focus,
.wpcf7 .template03 input[type=number]:focus,
.wpcf7 .template03 textarea:focus {
  outline: 0;
  box-shadow: 2px 3px 2px 1px rgba(205,205,205,.7);
}
/* チェックボックス */
.wpcf7 .template03 input[type=checkbox] {
  display: none;
}
.wpcf7 .template03 input[type=checkbox] + span {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template03 input[type=checkbox] + span::before {
  content: "";
  opacity: 1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.24em;
  height: 1.24em;
  border: 1px solid #333;
  border-radius: 0;
  background-color: #fff;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template03 input[type=checkbox] + span::after {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: 0.15em;
  left: 0.44em;
  width: 0.4em;
  height: .8em;
  border-bottom: 3px solid #000;
  border-right: 3px solid #000;
  box-sizing: border-box;
  transform: rotate(40deg);
  transition: all .25s;
}
.wpcf7 .template03 input[type=checkbox]:checked + span {
  color: #333;
  transition: all .25s ease;
}
.wpcf7 .template03 input[type=checkbox]:checked + span::before {
  opacity: 0;
}
.wpcf7 .template03 input[type=checkbox]:checked + span::after {
  opacity: 1;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
  transform: rotate(400deg);
  transition: all .25s;
}
/* ラジオボタン */
.wpcf7 .template03 input[type=radio] {
  display: none;
}
.wpcf7 .template03 input[type=radio] + span {
  cursor: pointer;
  position: relative;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template03 input[type=radio] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  transition: opacity .25s ease; 
}
.wpcf7 .template03 input[type=radio] + span::after {
  content: "";
  display: block;
  opacity: 0;
  position: absolute;
  border: 1px solid #ccc;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template03 input[type=radio]:checked + span {
  color: #333;
  transition: all .25s ease;
}
.wpcf7 .template03 input[type=radio]:checked + span::before {
  background-color: transparent;
}
.wpcf7 .template03 input[type=radio]:checked + span::after {
  opacity: 1;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border: 2px solid #333;
  border-radius: 50%;
  background-color: transparent;
  animation-name: border-circle;
  animation-duration: .25s;
  transition: opacity .25s ease;
}
/* セレクト */
.wpcf7 .template03 span.select-wrap {
  position: relative;
  width: 250px;
  margin: 0;
}
.wpcf7 .template03 select {
  cursor: pointer;
  width: 250px;
  max-width: 100%;
  margin: 0;
  padding: .5em 1.8em .5em 1em;
  border: 1px solid #333;
  border-left: 4px solid #333;
  border-radius: 0;
  box-shadow: none;
  background-color: #fff;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color 0.2s ease, outline 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template03 select::-ms-expand {
  display: none;
}
.wpcf7 .template03 span.select-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  width: .4em;
  height: .4em;
  top: calc(50% + .1em);
  right: .8em;
  margin-top: -3px;
  border-bottom: 1px solid #b3b3b3;
  border-right: 1px solid #b3b3b3;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  box-sizing: border-box;
}
.wpcf7 .template03 select:focus {
  outline: 0;
  box-shadow: 2px 3px 2px 1px rgba(205,205,205,.7);
}
.wpcf7 .template03 span.select-wrap:focus-within::after {
  border-bottom: 1px solid #080808;
  border-right: 1px solid #080808;
}
/* 送信ボタン */
.wpcf7 .template03 .submit-btn {
  overflow: hidden; 
  position: relative;
  width: 320px;
  height: 65px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.wpcf7 .template03 input[type="submit"] {
  cursor: pointer;
  position: relative;
  width: 320px;
  height: 65px;
  max-width: 100%;
  padding: 18px;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #000;
  background-color: transparent;
  color: #fff;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
  transition: opacity .25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  z-index: 10;
}
.wpcf7 .template03 input[type="submit"] ~ div.submit-bg {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 200%;
  height: 65px;
  background-color: #fff;
  background-image: linear-gradient(90deg, #333, #333);
  background-position: 100% 0;
  background-size: 50% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
  transform: translateX(-50%);
  transition: transform .25s;
  z-index: 1;
}
.wpcf7 .template03 input[type="submit"]:hover {
  color: #333;
}
.wpcf7 .template03 input[type="submit"]:hover ~ div.submit-bg {
  transform: translateX(-4px);
  transition: transform .25s;
}
.wpcf7 .template03 input[type="submit"]:focus {
  outline: 0;
}
.wpcf7 .template03 input[type="submit"]:disabled {
  cursor: not-allowed;
  box-shadow: none!important;
  border: 1px solid #f8f8f8!important;
  background-color: #f8f8f8!important;
  color: #999!important;
}
.wpcf7 .template03 span.wpcf7-list-item {
  margin: 0 1em .2em 0;
}
.wpcf7 .template03 .ajax-loader {
  display: block;
}
@keyframes border-circle {
  0% {
    width: 0;
    height: 0;
    transform: translate(.5em, .5em);
  }
  100% {
    width: 1em;
    height: 1em;
    transform: translate(0, 0);
  }
}
@media only screen and (max-width: 768px) {
  .wpcf7 .template03 span.wpcf7-list-item {
    display: block;
  }
  .wpcf7 .template03 div.form__row {
    display: block;
  }
  .wpcf7 .template03 p.form__label {
    width: 100%;
    padding: 1.5em 1em 0;
  }
  .wpcf7 .template03 p.form__body {
    width: 100%;
    padding: 1em 1em 1.5em;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

/* template03 */

.form__wrap {

width: 100%;

max-width: 900px;/*フォームの最大幅*/

margin-right: auto;

margin-left: auto;

}

.wpcf7 .template03 {

color: #333;

font-size: 14px;

}

.wpcf7 .template03 a {

margin: 0;

padding: 0;

text-decoration: underline;

color: inherit;

transition: opacity .25s;

}

.wpcf7 .template03 a:hover {

opacity: .5;

transition: opacity .25s;

}

.wpcf7 .template03 div.form__row {

display: flex;

align-items: center;

margin: 0;

}

.wpcf7 .template03 div.form__row.row-privacy,

.wpcf7 .template03 div.form__row.row-submit {

display: block;

margin-top: 1em;

text-align: center;

}

.wpcf7 .template03 div.form__row.row-privacy .form__body,

.wpcf7 .template03 div.form__row.row-submit .form__body {

width: 100%;

}

.wpcf7 .template03 div.form__row.row-message {

align-items: flex-start;

}

.wpcf7 p.form__label,

.wpcf7 p.form__body {

margin: 0;

box-sizing: border-box;

}

.wpcf7 .template03 p.form__label {

width: 36%;

padding: 1em;

}

.wpcf7 .template03 p.form__body {

width: 64%;

padding: 1em;

}

.wpcf7 .template03 p.form__label label {

position: relative;

padding-left: 44px;

}

.wpcf7 .template03 p.form__label label::after {

content: "任意";

display: block;

position: absolute;

top: 0;

left: 0;

width: 36px;

margin: 0;

padding: 0 5px;

border-radius: 0;

background-color: #f6f6f6;

color: #999;

font-size: 11px;

text-align: center;

box-sizing: border-box;

}

.wpcf7 .template03 p.form__label.is-required label {

position: relative;

}

.wpcf7 .template03 p.form__label.is-required label::after {

content: "必須";

display: block;

position: absolute;

width: 36px;

margin: 0;

padding: 0 5px;

border: 1px solid #e00022;

background-color: #fff;

color: #e00022;

font-size: 11px;

text-align: center;

box-sizing: border-box;

}

/* テキストフィールド */

.wpcf7 .template03 input[type=text],

.wpcf7 .template03 input[type=tel],

.wpcf7 .template03 input[type=email],

.wpcf7 .template03 textarea {

width: 100%;

margin: 0;

padding: .5em 1em;

border: 1px solid #333;

border-left: 4px solid #333;

border-radius: 0;

box-shadow: none;

background-color: #fff;

color: inherit;

font-family: inherit;

font-weight: inherit;

font-size: inherit;

box-sizing: border-box;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

/* テキストフィールド placeholder */

.wpcf7 .template03 input[type=text]::placeholder,

.wpcf7 .template03 input[type=tel]::placeholder,

.wpcf7 .template03 input[type=email]::placeholder,

.wpcf7 .template03 input[type=url]::placeholder,

.wpcf7 .template03 input[type=date]::placeholder,

.wpcf7 .template03 input[type=number]::placeholder,

.wpcf7 .template03 textarea::placeholder {

color: #ccc;

}

.wpcf7 .template03 input[type=text]:-ms-input-placeholder,

.wpcf7 .template03 input[type=tel]:-ms-input-placeholder,

.wpcf7 .template03 input[type=email]:-ms-input-placeholder,

.wpcf7 .template03 input[type=url]:-ms-input-placeholder,

.wpcf7 .template03 input[type=date]:-ms-input-placeholder,

.wpcf7 .template03 input[type=number]:-ms-input-placeholder,

.wpcf7 .template03 textarea:-ms-input-placeholder {

color: #ccc;

}

.wpcf7 .template03 input[type=text]::-ms-input-placeholder,

.wpcf7 .template03 input[type=tel]::-ms-input-placeholder,

.wpcf7 .template03 input[type=email]::-ms-input-placeholder,

.wpcf7 .template03 input[type=url]::-ms-input-placeholder,

.wpcf7 .template03 input[type=date]::-ms-input-placeholder,

.wpcf7 .template03 input[type=number]::-ms-input-placeholder,

.wpcf7 .template03 textarea::-ms-input-placeholder {

color: #ccc;

}

/* テキストフィールドフォーカス時 */

.wpcf7 .template03 input[type=text]:focus,

.wpcf7 .template03 input[type=tel]:focus,

.wpcf7 .template03 input[type=email]:focus,

.wpcf7 .template03 input[type=url]:focus,

.wpcf7 .template03 input[type=date]:focus,

.wpcf7 .template03 input[type=number]:focus,

.wpcf7 .template03 textarea:focus {

outline: 0;

box-shadow: 2px 3px 2px 1px rgba(205,205,205,.7);

}

/* チェックボックス */

.wpcf7 .template03 input[type=checkbox] {

display: none;

}

.wpcf7 .template03 input[type=checkbox] + span {

cursor: pointer;

position: relative;

margin: 0;

padding: 0 1em 0 1.8em;

font-size: inherit;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template03 input[type=checkbox] + span::before {

content: "";

opacity: 1;

display: block;

position: absolute;

top: 0;

left: 0;

width: 1.24em;

height: 1.24em;

border: 1px solid #333;

border-radius: 0;

background-color: #fff;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template03 input[type=checkbox] + span::after {

content: "";

opacity: 0;

display: block;

position: absolute;

top: 0.15em;

left: 0.44em;

width: 0.4em;

height: .8em;

border-bottom: 3px solid #000;

border-right: 3px solid #000;

box-sizing: border-box;

transform: rotate(40deg);

transition: all .25s;

}

.wpcf7 .template03 input[type=checkbox]:checked + span {

color: #333;

transition: all .25s ease;

}

.wpcf7 .template03 input[type=checkbox]:checked + span::before {

opacity: 0;

}

.wpcf7 .template03 input[type=checkbox]:checked + span::after {

opacity: 1;

border-bottom: 2px solid #333;

border-right: 2px solid #333;

transform: rotate(400deg);

transition: all .25s;

}

/* ラジオボタン */

.wpcf7 .template03 input[type=radio] {

display: none;

}

.wpcf7 .template03 input[type=radio] + span {

cursor: pointer;

position: relative;

padding: 0 1em 0 1.8em;

font-size: inherit;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template03 input[type=radio] + span::before {

content: "";

display: block;

position: absolute;

top: 0;

left: 0;

width: 1em;

height: 1em;

border: 1px solid #ccc;

border-radius: 50%;

background-color: #fff;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template03 input[type=radio] + span::after {

content: "";

display: block;

opacity: 0;

position: absolute;

border: 1px solid #ccc;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template03 input[type=radio]:checked + span {

color: #333;

transition: all .25s ease;

}

.wpcf7 .template03 input[type=radio]:checked + span::before {

background-color: transparent;

}

.wpcf7 .template03 input[type=radio]:checked + span::after {

opacity: 1;

top: 0;

left: 0;

width: 1em;

height: 1em;

border: 2px solid #333;

border-radius: 50%;

background-color: transparent;

animation-name: border-circle;

animation-duration: .25s;

transition: opacity .25s ease;

}

/* セレクト */

.wpcf7 .template03 span.select-wrap {

position: relative;

width: 250px;

margin: 0;

}

.wpcf7 .template03 select {

cursor: pointer;

width: 250px;

max-width: 100%;

margin: 0;

padding: .5em 1.8em .5em 1em;

border: 1px solid #333;

border-left: 4px solid #333;

border-radius: 0;

box-shadow: none;

background-color: #fff;

color: inherit;

font-size: inherit;

line-height: 1;

box-sizing: border-box;

transition: border-color 0.2s ease, outline 0.2s ease;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

.wpcf7 .template03 select::-ms-expand {

display: none;

}

.wpcf7 .template03 span.select-wrap::after {

content: "";

pointer-events: none;

position: absolute;

display: block;

width: .4em;

height: .4em;

top: calc(50% + .1em);

right: .8em;

margin-top: -3px;

border-bottom: 1px solid #b3b3b3;

border-right: 1px solid #b3b3b3;

transform: rotate(45deg) translateY(-50%);

transform-origin: 50% 0;

box-sizing: border-box;

}

.wpcf7 .template03 select:focus {

outline: 0;

box-shadow: 2px 3px 2px 1px rgba(205,205,205,.7);

}

.wpcf7 .template03 span.select-wrap:focus-within::after {

border-bottom: 1px solid #080808;

border-right: 1px solid #080808;

}

/* 送信ボタン */

.wpcf7 .template03 .submit-btn {

overflow: hidden;

position: relative;

width: 320px;

height: 65px;

max-width: 100%;

margin: 0;

padding: 0;

margin-left: auto;

margin-right: auto;

}

.wpcf7 .template03 input[type="submit"] {

cursor: pointer;

position: relative;

width: 320px;

height: 65px;

max-width: 100%;

padding: 18px;

border-radius: 0;

box-shadow: none;

border: 1px solid #000;

background-color: transparent;

color: #fff;

font-size: 18px;

text-align: center;

box-sizing: border-box;

transition: opacity .25s;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

z-index: 10;

}

.wpcf7 .template03 input[type="submit"] ~ div.submit-bg {

position: absolute;

top: 0;

left: 0;

margin: 0;

padding: 0;

width: 200%;

height: 65px;

background-color: #fff;

background-image: linear-gradient(90deg, #333, #333);

background-position: 100% 0;

background-size: 50% 100%;

background-repeat: no-repeat;

box-sizing: border-box;

transform: translateX(-50%);

transition: transform .25s;

z-index: 1;

}

.wpcf7 .template03 input[type="submit"]:hover {

color: #333;

}

.wpcf7 .template03 input[type="submit"]:hover ~ div.submit-bg {

transform: translateX(-4px);

transition: transform .25s;

}

.wpcf7 .template03 input[type="submit"]:focus {

outline: 0;

}

.wpcf7 .template03 input[type="submit"]:disabled {

cursor: not-allowed;

box-shadow: none!important;

border: 1px solid #f8f8f8!important;

background-color: #f8f8f8!important;

color: #999!important;

}

.wpcf7 .template03 span.wpcf7-list-item {

margin: 0 1em .2em 0;

}

.wpcf7 .template03 .ajax-loader {

display: block;

}

@keyframes border-circle {

0% {

width: 0;

height: 0;

transform: translate(.5em, .5em);

}

100% {

width: 1em;

height: 1em;

transform: translate(0, 0);

}

@media only screen and (max-width: 768px) {

.wpcf7 .template03 span.wpcf7-list-item {

display: block;

}

.wpcf7 .template03 div.form__row {

display: block;

}

.wpcf7 .template03 p.form__label {

width: 100%;

padding: 1.5em 1em 0;

}

.wpcf7 .template03 p.form__body {

width: 100%;

padding: 1em 1em 1.5em;

}

テンプレート[4] ゲストブック風

ゲストブック（芳名帳）のような、ノートのようなデザインのフォームです。

サンプル画像

デモページ

【Contact Form 7】カスタマイズ済みフォームテンプレート[4]のデモ

このページについて当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[4]のデモページ[…]

テンプレート[4]を使う準備

先程コピペした共通のHTMLコードの一番上の行を次のように変更します。

<div class="form__wrap template04">

1	<div class="form__wrap template04">

テンプレート[4] のCSSコード

次のCSSをスタイルシートにコピペします。

コードをみる

/* template04 */
.form__wrap {
  width: 100%;
  max-width: 900px;/*フォームの最大幅*/
  margin-right: auto;
  margin-left: auto;
}
.wpcf7 .template04 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #252525;
  font-size: 14px;
}
.wpcf7 .template04 a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: inherit;
  transition: opacity .25s;
}
.wpcf7 .template04 a:hover {
  opacity: .5;
  transition: opacity .25s;
}
.wpcf7 .template04 div.form__row {
  position: relative;
  margin: 0;
  padding: 0;
  margin-top: 2em;
}
.wpcf7 .template04 div.form__row.row-name,
.wpcf7 .template04 div.form__row.row-email,
.wpcf7 .template04 div.form__row.row-tel,
.wpcf7 .template04 div.form__row.row-url {
  width: calc(50% - 10px);
}
.wpcf7 .template04 div.form__row.row-message {
  width: 100%;
}
.wpcf7 .template04 div.form__row.row-checkbox,
.wpcf7 .template04 div.form__row.row-radio,
.wpcf7 .template04 div.form__row.row-select {
  display: flex;
  align-items: center;
  width: 100%;
}
.wpcf7 .template04 div.form__row.row-select {
  width: 100%;
}
.wpcf7 .template04 div.form__row.row-privacy {
  width: 100%;
  margin-top: 3.5em;
  text-align: center;
}
.wpcf7 .template04 div.form__row.row-submit {
  width: 100%;
  margin-top: 3em;
  text-align: center;
}
.wpcf7 .template04 p.form__label {
  flex-shrink: 0;
  min-width: 146px;
  margin: 0 0 .3em 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template04 p.form__body {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template04 div.form__row.row-checkbox p.form__body,
.wpcf7 .template04 div.form__row.row-radio p.form__body,
.wpcf7 .template04 div.form__row.row-select p.form__body {
  margin: 0 0 .3em 2em;
}
.wpcf7 .template04 p.form__label label {
  position: relative;
  margin: 0;
  padding: 0;
  color: #2a7e72;
  font-size: .95em;
  box-sizing: border-box;
}
.wpcf7 .template04 p.form__label.is-required label {
  margin-right: 1em;
}
.wpcf7 .template04 p.form__label.is-required label::after {
  content: "*";
  display: block;
  position: absolute;
  top: -.3em;
  right: -.5em;
  color: #b74c4c;
  box-sizing: border-box;
}
/* テキストフィールド */
.wpcf7 .template04 input[type=text],
.wpcf7 .template04 input[type=tel],
.wpcf7 .template04 input[type=email],
.wpcf7 .template04 input[type=url],
.wpcf7 .template04 input[type=date],
.wpcf7 .template04 input[type=number] {
  width: 100%;
  margin: 0;
  padding: .2em 0;
  border: 0;
  border-bottom: 1px solid #ababab;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template04 textarea {
  width: 100%;
  height: 60px;
  margin: 0;
  padding: .2em 0;
  border: 0;
  border-bottom: 1px solid #ababab;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* テキストフィールド placeholder */
.wpcf7 .template04 input[type=text]::placeholder,
.wpcf7 .template04 input[type=tel]::placeholder,
.wpcf7 .template04 input[type=email]::placeholder,
.wpcf7 .template04 input[type=url]::placeholder,
.wpcf7 .template04 input[type=date]::placeholder,
.wpcf7 .template04 input[type=number]::placeholder,
.wpcf7 .template04 textarea::placeholder {
  opacity: 0;
  display: none;
}
.wpcf7 .template04 input[type=text]:-ms-input-placeholder,
.wpcf7 .template04 input[type=tel]:-ms-input-placeholder,
.wpcf7 .template04 input[type=email]:-ms-input-placeholder,
.wpcf7 .template04 input[type=url]:-ms-input-placeholder,
.wpcf7 .template04 input[type=date]:-ms-input-placeholder,
.wpcf7 .template04 input[type=number]:-ms-input-placeholder,
.wpcf7 .template04 textarea:-ms-input-placeholder {
  opacity: 0;
  display: none;
}
.wpcf7 .template04 input[type=text]::-ms-input-placeholder,
.wpcf7 .template04 input[type=tel]::-ms-input-placeholder,
.wpcf7 .template04 input[type=email]::-ms-input-placeholder,
.wpcf7 .template04 input[type=url]::-ms-input-placeholder,
.wpcf7 .template04 input[type=date]::-ms-input-placeholder,
.wpcf7 .template04 input[type=number]::-ms-input-placeholder,
.wpcf7 .template04 textarea::-ms-input-placeholder {
  opacity: 0;
  display: none;
}
/* テキストフィールド フォーカス時 */
.wpcf7 .template04 input[type=text]:focus,
.wpcf7 .template04 input[type=tel]:focus,
.wpcf7 .template04 input[type=email]:focus,
.wpcf7 .template04 input[type=url]:focus,
.wpcf7 .template04 input[type=date]:focus,
.wpcf7 .template04 input[type=number]:focus,
.wpcf7 .template04 textarea:focus {
  outline: 1px solid transparent;
}
/* チェックボックス */
.wpcf7 .template04 input[type=checkbox] {
  display: none;
}
.wpcf7 .template04 input[type=checkbox] + span {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template04 input[type=checkbox] + span::before {
  content: "";
  opacity: 1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.24em;
  height: 1.24em;
  border: 1px solid #ababab;
  border-radius: 0;
  background-color: transparent;
  box-sizing: border-box;
  transition: opacity .25s ease;
  z-index: 1;
}
.wpcf7 .template04 input[type=checkbox] + span::after {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: 0.13em;
  left: 0.5em;
  width: 0.3em;
  height: .85em;
  border-bottom: 1px solid #252525;
  border-right: 1px solid #252525;
  box-sizing: border-box;
  transform: rotate(40deg);
  transition: opacity .25s ease;
  z-index: 10;
}
.wpcf7 .template04 input[type=checkbox]:checked + span {
  color: inherit;
  transition: all .25s ease;
}
.wpcf7 .template04 input[type=checkbox]:checked + span::before {
  opacity: 1;
  transition: opacity .25s ease;
}
.wpcf7 .template04 input[type=checkbox]:checked + span::after {
  opacity: 1;
  transition: opacity .25s ease;
}
/* ラジオボタン */
.wpcf7 .template04 input[type=radio] {
  display: none;
}
.wpcf7 .template04 input[type=radio] + span {
  cursor: pointer;
  position: relative;
  margin: 0; 
  padding: 0 1em 0 1.8em;
  font-size: inherit;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template04 input[type=radio] + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  border: 1px solid #ababab;
  border-radius: 50%;
  background-color: transparent;
  box-sizing: border-box;
  transition: opacity .25s ease;
}
.wpcf7 .template04 input[type=radio] + span::after {
  content: "";
  opacity: 0;
  display: block;
  position: absolute;
  top: -0.1em;
  left: 0.5em;
  width: 0.3em;
  height: .85em;
  border-bottom: 1px solid #252525;
  border-right: 1px solid #252525;
  box-sizing: border-box;
  transform: rotate(40deg);
  transition: opacity .25s ease;
  z-index: 10;
}
.wpcf7 .template04 input[type=radio]:checked + span {
  color: inherit;
  transition: opacity .25s ease;
}
.wpcf7 .template04 input[type=radio]:checked + span::after {
  opacity: 1;
  transition: opacity .25s ease;
}
/* セレクト */
.wpcf7 .template04 span.select-wrap {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.wpcf7 .template04 select {
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: .5em 2.5em .5em 1em;
  border: 0;
  border-bottom: 1px solid #ababab;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color 0.2s ease, outline 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template04 select::-ms-expand {
  display: none;
}
.wpcf7 .template04 span.select-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  width: .6em;
  height: .6em;
  top: 50%;
  right: 1em;
  margin-top: -3px;
  border-bottom: 1px solid #ababab;
  border-right: 1px solid #ababab;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  box-sizing: border-box;
}
.wpcf7 .template04 select:focus {
  outline: 0;
}
/* 送信ボタン */
.wpcf7 .template04 .submit-btn {
  position: relative;
  width: 320px;
  height: 65px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.wpcf7 .template04 input[type="submit"] {
  cursor: pointer;
  width: 320px;
  max-width: 100%;
  padding: 18px;
  border-radius: 0;
  box-shadow: none;
  border: 1px #10554b solid;
  background-color: #2a7e72;
  color: #fff;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
  transition: opacity .25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template04 input[type="submit"]:disabled {
  cursor: not-allowed;
  box-shadow: none!important;
  border: 1px solid #f8f8f8!important;
  background-color: #f8f8f8!important;
  color: #999!important;
}
.wpcf7 .template04 input[type="submit"]:hover {
  background-color: #fff;
  color: #10554b;
  transition: opacity .25s, background-color .25s;
}
.wpcf7 .template04 input[type="submit"]:focus {
  outline: 1px #eee solid;
  border: 1px #080808 solid;
}
.wpcf7 .template04 span.wpcf7-list-item {
  margin: 0 1em .2em 0;
}
.wpcf7 .template04 div.wpcf7 .ajax-loader {
  display: block;
}
@media only screen and (max-width: 768px) {
  .wpcf7 .template04 div.form__row.row-checkbox,
  .wpcf7 .template04 div.form__row.row-radio,
  .wpcf7 .template04 div.form__row.row-select {
    display: block;
  }
  .wpcf7 .template04 div.form__row.row-checkbox p.form__body,
  .wpcf7 .template04 div.form__row.row-radio p.form__body,
  .wpcf7 .template04 div.form__row.row-select p.form__body {
    margin-left: 0;
  }
  .wpcf7 .template04 span.wpcf7-list-item {
    display: block;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

/* template04 */

.form__wrap {

width: 100%;

max-width: 900px;/*フォームの最大幅*/

margin-right: auto;

margin-left: auto;

}

.wpcf7 .template04 {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

color: #252525;

font-size: 14px;

}

.wpcf7 .template04 a {

margin: 0;

padding: 0;

text-decoration: underline;

color: inherit;

transition: opacity .25s;

}

.wpcf7 .template04 a:hover {

opacity: .5;

transition: opacity .25s;

}

.wpcf7 .template04 div.form__row {

position: relative;

margin: 0;

padding: 0;

margin-top: 2em;

}

.wpcf7 .template04 div.form__row.row-name,

.wpcf7 .template04 div.form__row.row-email,

.wpcf7 .template04 div.form__row.row-tel,

.wpcf7 .template04 div.form__row.row-url {

width: calc(50% - 10px);

}

.wpcf7 .template04 div.form__row.row-message {

width: 100%;

}

.wpcf7 .template04 div.form__row.row-checkbox,

.wpcf7 .template04 div.form__row.row-radio,

.wpcf7 .template04 div.form__row.row-select {

display: flex;

align-items: center;

width: 100%;

}

.wpcf7 .template04 div.form__row.row-select {

width: 100%;

}

.wpcf7 .template04 div.form__row.row-privacy {

width: 100%;

margin-top: 3.5em;

text-align: center;

}

.wpcf7 .template04 div.form__row.row-submit {

width: 100%;

margin-top: 3em;

text-align: center;

}

.wpcf7 .template04 p.form__label {

flex-shrink: 0;

min-width: 146px;

margin: 0 0 .3em 0;

padding: 0;

box-sizing: border-box;

}

.wpcf7 .template04 p.form__body {

width: 100%;

margin: 0;

padding: 0;

box-sizing: border-box;

}

.wpcf7 .template04 div.form__row.row-checkbox p.form__body,

.wpcf7 .template04 div.form__row.row-radio p.form__body,

.wpcf7 .template04 div.form__row.row-select p.form__body {

margin: 0 0 .3em 2em;

}

.wpcf7 .template04 p.form__label label {

position: relative;

margin: 0;

padding: 0;

color: #2a7e72;

font-size: .95em;

box-sizing: border-box;

}

.wpcf7 .template04 p.form__label.is-required label {

margin-right: 1em;

}

.wpcf7 .template04 p.form__label.is-required label::after {

content: "*";

display: block;

position: absolute;

top: -.3em;

right: -.5em;

color: #b74c4c;

box-sizing: border-box;

}

/* テキストフィールド */

.wpcf7 .template04 input[type=text],

.wpcf7 .template04 input[type=tel],

.wpcf7 .template04 input[type=email],

.wpcf7 .template04 input[type=url],

.wpcf7 .template04 input[type=date],

.wpcf7 .template04 input[type=number] {

width: 100%;

margin: 0;

padding: .2em 0;

border: 0;

border-bottom: 1px solid #ababab;

border-radius: 0;

box-shadow: none;

background-color: transparent;

color: inherit;

font-family: inherit;

font-weight: inherit;

font-size: inherit;

box-sizing: border-box;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

.wpcf7 .template04 textarea {

width: 100%;

height: 60px;

margin: 0;

padding: .2em 0;

border: 0;

border-bottom: 1px solid #ababab;

border-radius: 0;

box-shadow: none;

background-color: transparent;

color: inherit;

font-family: inherit;

font-weight: inherit;

font-size: inherit;

box-sizing: border-box;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

/* テキストフィールド placeholder */

.wpcf7 .template04 input[type=text]::placeholder,

.wpcf7 .template04 input[type=tel]::placeholder,

.wpcf7 .template04 input[type=email]::placeholder,

.wpcf7 .template04 input[type=url]::placeholder,

.wpcf7 .template04 input[type=date]::placeholder,

.wpcf7 .template04 input[type=number]::placeholder,

.wpcf7 .template04 textarea::placeholder {

opacity: 0;

display: none;

}

.wpcf7 .template04 input[type=text]:-ms-input-placeholder,

.wpcf7 .template04 input[type=tel]:-ms-input-placeholder,

.wpcf7 .template04 input[type=email]:-ms-input-placeholder,

.wpcf7 .template04 input[type=url]:-ms-input-placeholder,

.wpcf7 .template04 input[type=date]:-ms-input-placeholder,

.wpcf7 .template04 input[type=number]:-ms-input-placeholder,

.wpcf7 .template04 textarea:-ms-input-placeholder {

opacity: 0;

display: none;

}

.wpcf7 .template04 input[type=text]::-ms-input-placeholder,

.wpcf7 .template04 input[type=tel]::-ms-input-placeholder,

.wpcf7 .template04 input[type=email]::-ms-input-placeholder,

.wpcf7 .template04 input[type=url]::-ms-input-placeholder,

.wpcf7 .template04 input[type=date]::-ms-input-placeholder,

.wpcf7 .template04 input[type=number]::-ms-input-placeholder,

.wpcf7 .template04 textarea::-ms-input-placeholder {

opacity: 0;

display: none;

}

/* テキストフィールドフォーカス時 */

.wpcf7 .template04 input[type=text]:focus,

.wpcf7 .template04 input[type=tel]:focus,

.wpcf7 .template04 input[type=email]:focus,

.wpcf7 .template04 input[type=url]:focus,

.wpcf7 .template04 input[type=date]:focus,

.wpcf7 .template04 input[type=number]:focus,

.wpcf7 .template04 textarea:focus {

outline: 1px solid transparent;

}

/* チェックボックス */

.wpcf7 .template04 input[type=checkbox] {

display: none;

}

.wpcf7 .template04 input[type=checkbox] + span {

cursor: pointer;

position: relative;

margin: 0;

padding: 0 1em 0 1.8em;

font-size: inherit;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template04 input[type=checkbox] + span::before {

content: "";

opacity: 1;

display: block;

position: absolute;

top: 0;

left: 0;

width: 1.24em;

height: 1.24em;

border: 1px solid #ababab;

border-radius: 0;

background-color: transparent;

box-sizing: border-box;

transition: opacity .25s ease;

z-index: 1;

}

.wpcf7 .template04 input[type=checkbox] + span::after {

content: "";

opacity: 0;

display: block;

position: absolute;

top: 0.13em;

left: 0.5em;

width: 0.3em;

height: .85em;

border-bottom: 1px solid #252525;

border-right: 1px solid #252525;

box-sizing: border-box;

transform: rotate(40deg);

transition: opacity .25s ease;

z-index: 10;

}

.wpcf7 .template04 input[type=checkbox]:checked + span {

color: inherit;

transition: all .25s ease;

}

.wpcf7 .template04 input[type=checkbox]:checked + span::before {

opacity: 1;

transition: opacity .25s ease;

}

.wpcf7 .template04 input[type=checkbox]:checked + span::after {

opacity: 1;

transition: opacity .25s ease;

}

/* ラジオボタン */

.wpcf7 .template04 input[type=radio] {

display: none;

}

.wpcf7 .template04 input[type=radio] + span {

cursor: pointer;

position: relative;

margin: 0;

padding: 0 1em 0 1.8em;

font-size: inherit;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template04 input[type=radio] + span::before {

content: "";

display: block;

position: absolute;

top: 0;

left: 0;

width: 1em;

height: 1em;

border: 1px solid #ababab;

border-radius: 50%;

background-color: transparent;

box-sizing: border-box;

transition: opacity .25s ease;

}

.wpcf7 .template04 input[type=radio] + span::after {

content: "";

opacity: 0;

display: block;

position: absolute;

top: -0.1em;

left: 0.5em;

width: 0.3em;

height: .85em;

border-bottom: 1px solid #252525;

border-right: 1px solid #252525;

box-sizing: border-box;

transform: rotate(40deg);

transition: opacity .25s ease;

z-index: 10;

}

.wpcf7 .template04 input[type=radio]:checked + span {

color: inherit;

transition: opacity .25s ease;

}

.wpcf7 .template04 input[type=radio]:checked + span::after {

opacity: 1;

transition: opacity .25s ease;

}

/* セレクト */

.wpcf7 .template04 span.select-wrap {

position: relative;

width: 100%;

margin: 0;

padding: 0;

}

.wpcf7 .template04 select {

cursor: pointer;

width: 100%;

max-width: 100%;

margin: 0;

padding: .5em 2.5em .5em 1em;

border: 0;

border-bottom: 1px solid #ababab;

border-radius: 0;

box-shadow: none;

background-color: transparent;

color: inherit;

font-size: inherit;

line-height: 1;

box-sizing: border-box;

transition: border-color 0.2s ease, outline 0.2s ease;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

.wpcf7 .template04 select::-ms-expand {

display: none;

}

.wpcf7 .template04 span.select-wrap::after {

content: "";

pointer-events: none;

position: absolute;

display: block;

width: .6em;

height: .6em;

top: 50%;

right: 1em;

margin-top: -3px;

border-bottom: 1px solid #ababab;

border-right: 1px solid #ababab;

transform: rotate(45deg) translateY(-50%);

transform-origin: 50% 0;

box-sizing: border-box;

}

.wpcf7 .template04 select:focus {

outline: 0;

}

/* 送信ボタン */

.wpcf7 .template04 .submit-btn {

position: relative;

width: 320px;

height: 65px;

max-width: 100%;

margin: 0;

padding: 0;

margin-left: auto;

margin-right: auto;

}

.wpcf7 .template04 input[type="submit"] {

cursor: pointer;

width: 320px;

max-width: 100%;

padding: 18px;

border-radius: 0;

box-shadow: none;

border: 1px #10554b solid;

background-color: #2a7e72;

color: #fff;

font-size: 18px;

text-align: center;

box-sizing: border-box;

transition: opacity .25s;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

.wpcf7 .template04 input[type="submit"]:disabled {

cursor: not-allowed;

box-shadow: none!important;

border: 1px solid #f8f8f8!important;

background-color: #f8f8f8!important;

color: #999!important;

}

.wpcf7 .template04 input[type="submit"]:hover {

background-color: #fff;

color: #10554b;

transition: opacity .25s, background-color .25s;

}

.wpcf7 .template04 input[type="submit"]:focus {

outline: 1px #eee solid;

border: 1px #080808 solid;

}

.wpcf7 .template04 span.wpcf7-list-item {

margin: 0 1em .2em 0;

}

.wpcf7 .template04 div.wpcf7 .ajax-loader {

display: block;

}

@media only screen and (max-width: 768px) {

.wpcf7 .template04 div.form__row.row-checkbox,

.wpcf7 .template04 div.form__row.row-radio,

.wpcf7 .template04 div.form__row.row-select {

display: block;

}

.wpcf7 .template04 div.form__row.row-checkbox p.form__body,

.wpcf7 .template04 div.form__row.row-radio p.form__body,

.wpcf7 .template04 div.form__row.row-select p.form__body {

margin-left: 0;

}

.wpcf7 .template04 span.wpcf7-list-item {

display: block;

}

さいごに

2021.03023追記

多くの方にこちらのテンプレートをご利用いただき、大変嬉しく思っています！
ご活用いただきどうもありがとうございます。
残念なことに、こちらのページからのスパムコメントがとても多い為コメント蘭を非表示とさせていただきました。また、個別の質問には対応することができないことを深くお詫び申し上げます。

「必須」の文字を表示させたいときは

フォームタグに*をつけるだけでは「必須」文字は表示されません。
下記のコード例のように、ラベル箇所のpタグに”is-required“のクラスが付いているかをご確認ください。

  <p class="form__label is-required"><label for="your-name">お名前</label></p>
  <p class="form__body">[text* your-name id:your-name placeholder "お名前"]</p>

1 2	<p class="form__label is-required"><label for="your-name">お名前</label></p> <p class="form__body">[text* your-name id:your-name placeholder "お名前"]</p>

Prev

2019年10月9日
【Contact Form 7】カスタマイズ済みフォームテンプレート[4]のデモ
Next

記事がありません