I’ve edited the CSS for Contact Form 7, a popular WordPress plugin for creating contact forms.
When implemented, it looks like this:
First, add Contact Form 7 as a new plugin.
Once installed and activated, you should see a new “Contact” item in the left sidebar of your WordPress dashboard. Click on it.
When you open it, you’ll likely see a form that has already been added. Open that form.
In the form editor, paste the following code (feel free to copy-paste):
The code is based on the classes and elements from the official Contact Form 7 site. I’ve styled it in a way that minimally changes the default settings upon installation.
<label class="form__label"> 企業名
[text* your-name class:form__textInput autocomplete:name] </label>
<label class="form__label"> お名前
[text* your-name class:form__textInput autocomplete:name] </label>
<label class="form__label"> メールアドレス
[email* your-email class:form__textInput autocomplete:email] </label>
<label class="form__label"> お問い合わせ内容
[textarea* your-message class:form__textInput] </label>
[submit "Submit"]
<style>
.form__container {
max-width: 400px;
margin:0 auto;
}
.form__label {
display: block;
margin-top:1.5em;
color: gray;
font-size: 0.8em;
}
.form__textInput {
width: calc(100% - 2.4em);
border: 1px #c0c0c0 solid;
border-radius: 2px;
padding: 1em 1.2em;
color: 1e1e1f;
}
.form__textInput:focus {
transition: .3s ease-out;
outline: 1px skyblue solid;
}
.wpcf7-submit {
display: block;
color: white;
background-color: black;
padding: 0.8em 2em;
border-radius: 4px;
margin: 2em auto;
border: none;
}
.wpcf7-submit:active {
background-color: rgb(95, 95, 95);
/* This style is created by https://coiai.boy.jp */
}
</style>
Once the form setup is complete, navigate to a static page where you want to add the form.
Here’s an example of how it looks when added.
I’ve kept the code minimal, avoiding unnecessary things like titles, background color settings, or size restrictions. Feel free to adjust it to suit your environment.
coiai
この記事もおすすめ
株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。
主なご相談内容
詳しい会社情報は会社概要ページでご覧いただけます。
