WordPressの定番のお問い合わせ用プラグインのcontact form 7 のCSSを編集しました。
実装すると以下のようになります。
プラグインからcontact form 7を新規追加します。
インストールして有効化すると左サイドバーに Contact という項目ができていると思うので、クリックします。
開くと、すでに追加されているフォームがあると思いますので、
そちらを開きます。
開いたら、編集画面になりますので以下のコードを貼り付けます（コピペOK）
コードは contact form 7 の公式サイトを頼りにクラスなどの指定をしました。
なるべくインストール時の標準の状態を崩さずにスタイリングしています。
<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>フォームの入力が完了したら、固定ページに移動して追加しました。
次の画像のような感じで追加しています。
コード自体にはタイトルや背景色指定、サイズ制限などの余計なことはなるべくしないようにしました。お使いの場合は適宜環境に合わせてお使いください。
coiai
この記事もおすすめ
株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。
主なご相談内容
詳しい会社情報は会社概要ページでご覧いただけます。
