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

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

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

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

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

1 テンプレート利用の準備
- 1.1 共通のHTMLコードをコピペ
  - 1.1.1 テンプレート用の共通HTMLコード
2 テンプレート[1] シンプルな縦並びのフォーム
3 テンプレート[2] ラベルとフィールドが左右横並び（柔らかいイメージ）
4 テンプレート[3] ラベルとフィールドが左右横並び（かっこいいイメージ）
5 テンプレート[4] ゲストブック風

テンプレート利用の準備

共通の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;

}

Prev

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

記事がありません

コメント（14件）

【随時更新】おすすめWordPressプラグインより:

2020年5月2日 11:49 AM

[…] anchoko.【Contact Form 7】お問い合わせフォームのカスタマイズ済みテンプレー… […]

返信
トカッチより:

2020年5月19日 10:16 AM

すてきなデザインですね！デザインの参考にさせていただきます！

返信
- YUKA より:
  
  2020年5月23日 11:23 AM
  
  ありがとうございます！
  ご活用いただけたら嬉しいです(^^)
  
  返信
さとこより:

2020年5月23日 7:23 AM

初めてコメントさせていただきます。
こちらのテンプレート２を参考に自身のサイトで問い合わせフォームを作成したいと思っています。
１点教えていただきたいのですが、テキストエリアの大きさ(高さ)をテキストエリアごとに指定することは可能ですか？

お手隙の時に教えていただければ幸いです。よろしくお願いします。

返信
- YUKA より:
  
  2020年5月23日 12:35 PM
  
  初めまして！コメントありがとうございます。
  フィールドごとに高さを変えられますが、CSSを少し書き換える必要があるので
  もしよろしければ具体的にどのように変更したいかを教えていただけますか？
  こちらでまた回答いたします^_^
  
  返信
  - さとこより:
    
    2020年5月23日 4:13 PM
    
    返信ありがとうございます！
    
    具体的に言うと、1つの問い合わせフォームの中で質問に回答して貰うためのテキストエリアを複数使う場合に、あるテキストエリアは1行分の高さ、別のテキストエリアは3行分の高さ、にそれぞれ設定できればと思ってます。
    
    横幅に関してはテンプレート2のデフォルトから変更なしで大丈夫です。
    
    具体的に設定したつもりですが、cssなどに関してあまり詳しくないので説明が不十分でしたらまた仰って下さい。
    
    恐れ入りますがよろしくお願いします。
    
    返信
    - YUKA より:
      
      2020年5月23日 10:26 PM
      
      なるほどです。テキストエリアを複数設置するのですね。
      1行分の高さのテキストエリアと3行分の高さのテキストエリアで別々のIDを振って、
      それぞれのIDを指定してCSS を追加すれば良いと思います。
      
      IDは、お問い合わせフォームを作るときに『ID属性』という欄でご自身で決められます。
      
      ちなみにこちらのテンプレートでは下記のように”message”としてました。
      [textarea* message id:message placeholder “お問い合わせ内容”]
      
      追加するCSSは、次のように『#ID名』としてください。
      テキストエリアはheightで高さの調節ができるようになってます。
      
      .wpcf7 .template02 #message {
      height: 90px;
      }
      
      こちらでいかがでしょうか？
      うまく設定できなかったら、ご遠慮なくコメントくださいね。
      
      返信
      - さとこより:
        
        2020年5月25日 4:02 PM
        
        返信ありがとうございました！
        
        教えて頂いた方法でやりましたら出来ました！！
        
        とても嬉しいです。
        ありがとうございました🙇‍♀️✨
かんだより:

2020年6月13日 3:57 PM

はじめまして。
とてもシンプルでステキなフォームですね。
2番目のテンプレートを使わせていただきたいと思います。

それで、一つアドバイスしていただけましたらと思い、コメントしています。

「Contact Form 7 add confirm」というプラグインを入れておりまして、「戻る」ボタンが「送信の上に来てしまいます。
横に並ぶようにカスタマイズすることは可能でしょうか？

お時間がある時にでも、アドバイス頂けましたら幸いです。

返信
- YUKA より:
  
  2020年6月14日 4:34 PM
  
  かんだ様、初めまして^^
  コメントいただきありがとうございます。
  
  送信ボタンは横幅が320pxなので、複数設置すると入りきらず縦並びになります。
  下記のCSSが送信ボタンなのでwidthを調整してみてください。
  
  .wpcf7 .template02 input[type=”submit”] {
  cursor: pointer;
  width: 320px; /*ここを140px程度に*/
  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;
  }
  
  また、戻るボタンにスタイルが当たっていないので、
  ご希望でしたら次のCSSを追加してみてください。
  
  .wpcf7-back {
  cursor: pointer;
  width: 140px;
  max-width: 100%;
  padding: 18px;
  box-shadow: none;
  border: 1px #a9a497 solid; /*ここで枠線の色を変更*/
  border-radius: 8px;
  background-color: #a9a497; /*ここで背景色を変更*/
  color: #fff;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
  transition: all .25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  }
  .wpcf7-back:hover { /*マウスオーバー時のスタイル*/
  box-shadow: 0 0 2px 2px rgba(133, 112, 92, 0.5);
  background-color: #fff;
  color: #6c5d2f;
  transition: all .25s;
  }
  .wpcf7-back + .wpcf7-submit {
  margin-left: 10px;　/*ボタンとボタンの間の余白*/
  }
  
  ざっとで申し訳ありませんがこちらで試してみてください^^
  不具合がありましたら、またコメントくださいね。
  
  返信
  - かんだより:
    
    2020年6月15日 12:23 PM
    
    YUKA　様
    
    丁寧な対応ありがとうございます。
    送信ボタンを320pxから140pxに変更し、「戻る」ボタンをCSSに追加しました。
    しかし、やはりタテに並んでしまいます。
    
    ほんとにお手数をおかけし申し訳ないのですが、アドバイス頂けましたら幸いです。
    
    返信
  - かんだより:
    
    2020年6月16日 11:15 AM
    
    YUKAさま
    
    ちゃんと並んで出るようになりました。
    本当にありがとうございましたm(__)m
    
    返信
カスタマイズ｜ Web Lab より:

2020年9月13日 12:02 AM

[…] […]

返信
WordPressテーマオリジナル制作｜ Web Lab より:

2020年10月14日 6:26 PM

[…] […]

返信