ChatGPTでWordPressの問い合わせフォームを改善！CSS初心者でもここまでできた実体験

ABOUT US

RYO代表

1985年大阪生まれ。英語コーチ・オンライン起業家。

現在は、アウトプット・実践に特化した英語コーチングサービス 「RYO英会話ジム」 を7年以上運営。
2020年からは海外ノマドとして世界を旅しながら、場所に縛られずオンラインで事業を運営しています。

英語コーチング事業の立ち上げ・運営を通じて培ってきた、 商品開発、Web集客、コンテンツ制作、SEO、SNSマーケティングの実践経験を活かし、 現在は自分の経験やスキルを商品化し、オンラインで収益につながる仕組みをつくりたい人向けに、ノマドコーチングを提供。

得意分野：

英語コーチング・商品開発・教材制作
Webサイト設計・売れる導線設計
SNS／SEO・AEOマーケティング
AIを活用したコンテンツ・ビジネス構築
個人の経験・スキルを商品化する仕組みづくり
オンラインで継続的に生計を立てるための事業設計

また、事業収入だけに依存しない生き方を目指し、長期的な資産形成・投資も実践。
「RYOのリアル投資ログ」 では、自身の投資経験や資産運用についても発信しています。

趣味： 英語学習、ノマド生活、筋トレ、資産運用・投資

ライフスタイル：
柔軟で自由な働き方を追求し、パンデミック以前からデジタルノマドという生き方を実践。
「どこで働くか」だけではなく、自分のスキル・経験・知識を、自分自身の資産として積み上げていくことを大切にしています。

今後はAIを積極的に活用しながらも、AIだけでは代替されにくい専門性・経験・人間性・発信力を価値に変え、 「スキルを資産に変え、自分で働き方と収入源をつくる生き方」を体系化して広めていきたいと考えています。

こんにちは、リョウです。

僕は2020年から海外を拠点にデジタルノマドとして生活しながら、オンライン英語コーチングサービス「RYO英会話ジム」を運営しています。

オンラインで事業をしていると、Webサイトのちょっとした改善が必要になることがあります。

今回取り組んだのは、WordPressのお問い合わせフォームのデザイン改善です。

お問い合わせフォームは、サービスへの質問や相談を受け付ける大切な窓口。

ところが、実際に自分のサイトを確認してみると、送信ボタンが目立たなかったり、フォームの左右に大きな余白があったりと、改善したい部分がいくつか見つかりました。

そこで活用したのが、ChatGPTです。

今回は、WordPressの定番プラグイン「Contact Form 7」を使ったお問い合わせフォームを、ChatGPTとCSSで改善した体験を紹介します。

プログラミングの専門知識がなくても、AIと対話しながらWebサイトの見た目を改善できる。

そんな実感を得られた今回の作業について、具体的にお話しします。

1. そもそも、なぜお問い合わせフォームを改善しようと思ったのか？

僕が運営するRYO英会話ジムでは、WordPressを使ってサービスサイトを管理しています。

お問い合わせフォームには「Contact Form 7」という無料プラグインを利用しています。

このプラグインは便利で、名前やメールアドレス、メッセージ欄などを比較的簡単に設置できます。

ただし、フォームを設置できることと、訪問者にとって使いやすいフォームになっていることは別問題です。

今回、改めて見直してみると、気になる部分がありました。

• 送信ボタンがあまり目立たない
• フォームの左右に余白があり、画面を十分に活用できていない
• フォーム全体がボックスで囲まれていて、少し重たい印象がある
• 入力欄とフォーム全体のデザインをもう少し統一したい

どれも致命的な問題ではありません。

しかし、サービスに興味を持ってくれた人が最後に利用する場所だからこそ、できるだけシンプルで使いやすくしておきたいと考えました。

特に、オンラインビジネスではお問い合わせフォームが見込み客との最初の接点になることもあります。

小さな改善でも、積み重ねる価値はあると思っています。

2. まずは送信ボタンを目立たせるところから始めた

最初にChatGPTへ相談したのは、送信ボタンのデザインです。

もともとContact Form 7では、次のようなコードで送信ボタンを設置していました。

[submit "送信する"]

機能としては問題ありません。

ただ、もう少し存在感がほしいと感じました。

そこでChatGPTに、CSSで送信ボタンを見やすくできないか相談しました。

提案されたのは、青色のグラデーションを使ったデザインです。

さらに、ボタンに次のような工夫を加えました。

• 背景を青色にして、白文字で視認性を高める
• 角を丸くして、やわらかい印象にする
• 影をつけて、クリックできる場所だとわかりやすくする
• マウスを重ねると少し浮き上がる動きをつける
• スマートフォンでもタップしやすい大きさにする

個人的に気に入ったのは、マウスを重ねたときにボタンが少し浮き上がる動きです。

こうした小さな動きがあるだけでも、操作できる要素だと直感的にわかりやすくなります。

もちろん、アニメーションを増やしすぎる必要はありません。

大切なのは、目立たせること自体ではなく、訪問者が迷わず操作できるようにすることだと思います。

3. 送信ボタンは中央配置で、横幅いっぱいに変更

次に気になったのが、送信ボタンの横幅です。

最初のデザインでは、ボタンの最大幅が420pxに設定されていました。

確かに見やすくなったのですが、フォーム全体と比較すると、もう少し横幅を使ってもよさそうでした。

そこでChatGPTに、

「中央に、横幅いっぱいに使っていい」

と伝えました。

すると、CSSを変更して、フォームの横幅いっぱいに広がるボタンを作成してくれました。

主な変更は次の部分です。

.wpcf7 input[type="submit"] {
  display: block;
  width: 100%;
  margin: 24px auto 0;
  padding: 18px 24px;
}

これだけで、送信ボタンがフォームの横幅に合わせて広がります。

特にスマートフォンでは、横幅いっぱいのボタンは押しやすく、視線も集まりやすくなります。

ただし、ボタンが大きければ必ずお問い合わせが増えるわけではありません。

今回の目的は、あくまで操作のしやすさと視認性の改善です。

4. フォーム全体を改善すると、今度は左右の余白が気になった

送信ボタンを改善したあと、次に取り組んだのがフォーム全体のデザインです。

入力欄の枠線や角の丸み、入力中の表示などを整えて、統一感のあるフォームに変更しました。

ところが、実際に画面を確認してみると、別の問題が見つかりました。

フォームの左右に、思っていた以上の余白があったのです。

原因の一つは、フォーム全体に設定されていた最大幅でした。

max-width: 760px;

この設定では、画面が大きくてもフォームの幅は760pxまでに制限されます。

一般的なお問い合わせフォームなら問題ない場合もありますが、今回のサイトでは、中央に小さくまとまっている印象がありました。

そこで、最大幅を1100pxに変更しました。

.wpcf7 form {
  width: 100%;
  max-width: 1100px;
  margin: 40px auto;
  box-sizing: border-box;
}

これによって、利用可能な横幅をより広く使えるようにしました。

なお、実際の表示幅はWordPressテーマやページ側のコンテンツ幅にも左右されます。

フォームの最大幅を広げても変化しない場合は、親要素の幅も確認する必要があります。

今回、改めて感じたのは、CSSはコードだけを見て判断するより、実際の画面を確認することが重要だということです。

AIが提案したコードが正しくても、自分のサイトにとって最適とは限りません。

5. 最後に気になったのは、フォーム全体を囲むボックスだった

横幅を改善したあと、もう一度フォームを眺めてみました。

すると、今度はフォーム全体を囲んでいるボックスが少し気になりました。

最初は、白い背景に角丸の枠線、さらに薄い影をつけていました。

いわゆるカード型のデザインです。

これはこれで悪くありません。

ただ、実際にページの中で見ると、少し存在感が強すぎるように感じました。

そこで、ChatGPTに次のように伝えました。

「ボックスのようになっているので、その枠線もいらないかな」

すると、フォーム全体の背景や枠線、影を削除するCSSを提案してくれました。

.wpcf7 form {
  width: 100%;
  max-width: 1100px;
  margin: 40px auto;
  padding: 10px 0;

  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  box-sizing: border-box;
}

この変更によって、フォームを囲む大きなボックスがなくなり、ページの中に自然になじむデザインになりました。

一方で、氏名やメールアドレスなどの入力欄には、薄い枠線を残しています。

つまり、フォーム全体の装飾は減らし、操作に必要な部分だけをわかりやすくするという方向です。

個人的には、このバランスが一番しっくりきました。

6. 最終的に採用したContact Form 7のCSS

今回のやり取りを経て、フォーム全体のデザインを整えたCSSがこちらです。

WordPressの「外観」→「カスタマイズ」→「追加CSS」などから設定できます。テーマによって設定場所は異なります。

/* フォーム全体 */
.wpcf7 form {
  width: 100%;
  max-width: 1100px;
  margin: 40px auto;
  padding: 10px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}

/* 説明文 */
.wpcf7 p {
  line-height: 1.9;
  color: #444;
}

/* ラベル */
.wpcf7 form label {
  display: block;
  margin-bottom: 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  color: #222;
}

/* 入力欄 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.7;
  color: #222;
  background: #fff;
  border: 1px solid #d9dee5;
  border-radius: 14px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* メッセージ入力欄 */
.wpcf7 textarea {
  min-height: 200px;
  resize: vertical;
}

/* 入力中 */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}

/* プレースホルダー */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #9aa3af;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
  display: block;
  width: 100%;
  margin: 30px auto 0;
  padding: 18px 24px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  border: none;
  border-radius: 16px;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.25);
  transition: all 0.25s ease;
}

/* ホバー時 */
.wpcf7 input[type="submit"]:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35);
}

/* クリック時 */
.wpcf7 input[type="submit"]:active {
  transform: translateY(1px);
}

/* エラー表示 */
.wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #e53935;
}

/* 送信結果メッセージ */
.wpcf7-response-output {
  margin-top: 24px !important;
  padding: 16px 18px !important;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
}

/* スマートフォン対応 */
@media (max-width: 768px) {
  .wpcf7 form {
    margin: 25px auto;
  }

  .wpcf7 form label {
    margin-bottom: 18px;
  }

  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 textarea {
    padding: 13px 15px;
    font-size: 16px;
  }

  .wpcf7 textarea {
    min-height: 170px;
  }

  .wpcf7 input[type="submit"] {
    padding: 16px 20px;
    font-size: 16px;
  }
}

なお、このCSSはページ内のほかのContact Form 7にも適用されます。

お問い合わせフォームだけに反映させたい場合は、フォームを囲む専用クラスなどでCSSの適用範囲を限定するのがおすすめです。

また、以前のCSSが残っていると設定が重複してしまうことがあるため、不要な古いコードは整理しておきましょう。

実際に改善したお問い合わせフォームはこちら

今回、ChatGPTとCSSを使って改善したお問い合わせフォームは、僕が運営する「デジタルノマドハブ」で実際に公開しています。

実際のデザインや入力欄の見やすさ、送信ボタンの表示などは、以下のページから確認できます。

▶ 改善後のお問い合わせフォームを実際に見てみる

記事で紹介したCSSが、実際のWordPressサイトでどのように表示されるのか、ぜひ参考にしてみてください。

※フォームのデザイン確認だけであれば、実際に送信する必要はありません。

7. 今回の体験で感じた、ChatGPTを使う一番のメリット

今回の改善で特に便利だと感じたのは、完成形を最初から決めなくても、AIと会話しながら調整できたことです。

実際の流れは次のようなものでした。

最初は「送信ボタンを見やすくしたい」という小さな相談から始まりました。

次に「中央に配置して、横幅いっぱいにしたい」と伝えました。

そのあと「フォーム全体も見やすくしたい」と相談しました。

実際の画面を確認して、左右の余白が気になったので修正。

最後に、フォーム全体を囲むボックスを削除しました。

そして、すべてをまとめた完成版CSSを作成してもらいました。

この流れで重要だったのは、専門的な指示をほとんど出していないことです。

「もっと見やすくしたい」

「左右の余白が気になる」

「枠線はいらない」

こうした普段の会話のような言葉でも、AIが具体的なCSSの変更案に落とし込んでくれました。

もちろん、AIが提案するCSSが必ず正しいとは限りません。

既存のテーマやプラグインとの相性によって、思った通りに表示されないこともあります。

だからこそ、僕はAIにコードを書いてもらい、自分で画面を確認し、気になる部分を再びAIに伝えるという進め方が現実的だと感じています。

8. デジタルノマドや個人事業主にとって、AIは大きな武器になる

僕は海外を移動しながらオンラインビジネスを運営しています。

こうした働き方では、基本的に自分で判断して動かなければならない場面が多くあります。

Webサイトの改善もその一つです。

これまでは、ちょっとしたデザイン変更でも、CSSを調べたり、コードを試したりする必要がありました。

場合によっては、外部の制作会社やエンジニアに依頼する選択肢もあります。

しかし、今回のような比較的小さな修正なら、ChatGPTを活用することで、自分で対応できる範囲が広がります。

特にメリットを感じるのは、アイデアを思いついてから実行するまでのハードルが下がることです。

これは、少人数で事業を運営している人にとって大きいと思います。

デザインの細かな改善をするたびに外注していては、費用だけでなく、やり取りの時間も必要になります。

一方、自分で修正できれば、気になったタイミングですぐに試せます。

ただし、大規模なサイト改修やセキュリティに関わる変更まで、すべてAI任せにするべきだとは思いません。

大切なのは、AIに任せられる作業と、専門家に相談すべき作業を見極めることです。

9. デザイン改善でお問い合わせは増えるのか？

ここは、個人的にも興味がある部分です。

今回、フォームの見た目や操作性は改善しました。

ただし、今回のCSS変更によってお問い合わせが増えたというデータは、まだありません。

お問い合わせ数は、フォームのデザインだけで決まるわけではありません。

サービスへの関心、料金、信頼感、申し込み前の不安など、さまざまな要素が関係しています。

例えば、フォームを見やすくしたとしても、訪問者がサービスを申し込む理由を十分に理解できていなければ、お問い合わせにはつながりにくいでしょう。

逆に、サービスへの関心が高い人でも、フォームが使いづらければ途中で離脱する可能性があります。

だからこそ、今回の改善は、申し込みまでの小さな障害を取り除く取り組みとして考えています。

今後は、フォームの表示回数や送信完了数なども確認しながら、実際に効果があったのかを検証していきたいと思います。

まとめ：AI時代は、小さな改善を自分で積み重ねられることが強みになる

今回、ChatGPTを活用して、WordPressのContact Form 7で作成したお問い合わせフォームを改善しました。

最初は送信ボタンを少し見やすくしたいという相談でしたが、最終的にはフォーム全体のデザインまで見直すことができました。

今回の体験で、特に印象に残ったのは次の3つです。

• AIへの指示は専門用語でなくてもいい。 普通の言葉で改善したいことを伝えられる。
• 一度で完成させようとしなくていい。 実際の画面を見ながら調整を重ねる方が、自分のサイトに合ったものを作りやすい。
• AIがコードを作り、人間が最終判断する。 この役割分担が現実的で使いやすい。

僕自身、オンライン事業を運営する中で、AIを使ったWebサイト改善の可能性を日々感じています。

特に個人事業主やデジタルノマドにとって、以前なら時間や費用がかかっていた小さな作業を、自分で進められるようになったことは大きな変化です。

もちろん、見た目を整えただけで売上が増えるほど、オンラインビジネスは単純ではありません。

それでも、改善したいと思ったことを、すぐに形にして試せる。

このスピード感こそ、AI時代に個人でビジネスを運営する大きなメリットだと感じています。

これからも、自分のサイトで実践したWeb改善やAI活用の経験を、リアルな体験談として共有していきたいと思います。