Form7は、初期設定だととてもシンプルなので、おしゃれでかっこいいデザインにカスタマイズするCSSをご紹介します!よかったらご自由にお使いください。Proに最適化しています。他のテーマでも使えますが、若干表示が異なる場合があります。Form7を設置するとこんなデザインになります。(※テーマによって若干異なる場合があります)とってもシンプルですね。この記事で作れるフォームデザインこの記事でご紹介するコードで、こんなお問い合わせフォームが作れますよ!もちろんスマホ対応!スマホだとこんな感じになります。どんな感じかしっかり確認したい方は、こちらのデモサイトをご覧ください。https://wp-firststep.com/nishiki_pro/contactform7-sample1/さっそくコードと作り方をご紹介しますね。Form7でお問い合わせフォームを作るには、「フォーム」と「メール」を設定する必要があります。「メール」・・・・お問い合わせをしたときに届くメールの内容の設定それぞれに入力するコードをご紹介します。"送信する"]</p>「メール」のコードメールは2種類あります。1つめのメールは自分に届くお知らせなので、簡単な文章で大丈夫です。[checkbox-inq]などのタグが書いてありますが、これは先程の「フォーム」で使ったのと同じタグをいれます。これでメール本文にお問い合わせフォームに入れた内容が記載されます。フォームのタグを変更した時は、お知らせメールのタグも合わせて変更してください。=======================※このメールはホームページからの自動送信メールです。メール(2)」のコードもう1つはメール(2)です。メール(2)とは自動返信メールです。「メール(2)を使用」にチェックを入れると使えるようになります。これは問い合わせを送った方に届くメールなので、きちんとした文章にしたいですね。=======================お問い合わせありがとうございます。このメールは自動送信メールです。お送りいただいた内容は以下の通りです。Form7の設定ができました。内容を設定しただけなので、見た目はこんな感じです。これにデザインCSSをつけていきます。カスタマイザーの「追加CSS」に貼るコード以下のコードを「追加CSS」に貼り付けてください。auto;}.CF7_btn{text-align:center;margin-top:20px;}.wpcf7-spinner{width:0;margin:0;}これを貼り付けると、このデザインになります!サンプルと違う色にしたい時はこのデザインでは、オレンジとグレー、ブルーグレーの3色を使っています。他の色に変えたい時はCSSの色番号を変更してください。auto;}.CF7_btn{text-align:center;margin-top:20px;}.wpcf7-spinner{width:0;margin:0;}希望の色の番号は、WEB色見本のサイトがわかりやすいですよ。他のテーマにも合うよう最低限調整しましたが、若干デザインのニュアンスが違ったり、各テーマのアップデートなどにより表示が乱れる可能性もあります。Pro用になります、何卒ご了承ください。7ですが、最近「送信できない」というご相談が続いたので、対応方法を別記事にまとめました。トラブル対策の参考にしてくださいね。ご相談を受けて調べてみたら、送信エラーはとてもいろ...wp-firststep.com郵便番号で住所が自動入力できるよ!2022.3追記すみません!郵便番号入力のことをご説明していませんでしたね。このコードはプラグイン「zipaddr-jp」を入れると郵便番号から住所を自動入力できるようになっています。https://ja.wordpress.org/plugins/zipaddr-jp/使い方は簡単で、プラグインをインストールして有効化するだけ。これだけで、郵便番号を入力すると住所が入力されます。下の段に自動的に入ります。デモサイトで動作確認できます。https://wp-firststep.com/nishiki_pro/contactform7-sample1/是非あわせて使ってみてくださいね!zipaddr-jphttps://ja.wordpress.org/plugins/zipaddr-jp/お問い合わせへの注意事項こちらの記事、多くの方にご覧いただけているようで、使っています!などのお声をたくさんいただきます。ご利用いただきありがとうございます。他のテーマを使っている方からの「うまくできない」という連絡も多く困っています。他のテーマでは調整が必要な可能性があり、当サイトではご対応いたしかねますのでご了承の上ご利用くださいますようお願い申し上げます。「ここをもうちょっと短くしたいのですがどうやるのか無料で教えてください」というメールも良く届いて困っています。そんな方に絶対返事はしませんのでお願いだから送らないでください。同様に、テーブルブロックをおしゃれに整えるCSSも書きました。デザイン3種コピペOK!テーブルブロックのカスタマイズCSSをご紹介します!WordPressのテーブルブロックってシンプルすぎませんか?オシャレに整える設定とCSSを3種類ご紹介します。コピペOK!自由に変えて活用してくださいwp-firststep.com著者AtsukoフリーランスのWebデザイナー。MeetUpのオーガナイザーもしています。このサイトは「猫でもわかる」をモットーに、なるべくわかりやすい言葉で解説して、WordPressを楽しく続けていくために必要な情報をお届けするブログを目指しています。「こんなことが知りたい」などあればお気軽にご意見ください。ブログ記事の参考にさせていただきます。(オレンジ枠・くるくる回る)ご相談を受けて調べてみたら、送信エラーはとてもいろいろな原因があることがわかりました。Form7に確認画面をつけたい方へ、プラグインよりコードの方がいいよと言う話です。それにもっといい方法も・・?2020-01-18プラグインAtsuko続きを読むGutenbergグーテンベルクにすると画像にCSSが効かない??グーテンベルグにバージョンアップしたら、画像のCSSが効かなくなりました。〜Webにまつわる法律の考え方〜に参加してきました。綺麗で使いやすいだけでなく、ユーザーコミュニティのサポートが手厚いテーマです。コミュニティで気軽に質問に答えてもらえるので、WordPressを勉強して、自分管理・運営していきたいという方に特におすすめです。Proを3年使ってみたレビューです。ご検討中の方はぜひ参考にしてください。様子や操作方法の解説などの動画をアップしています。登壇動画2021年のWordPressイベントで初心者向けのWordPressの初め方についてお話ししました。郵便番号で住所が自動入力できるよ!お問い合わせへの。