Contact Form 7はプラグインです WordPress 連絡先フォームの作成で非常に人気があります。 HTMLコーディングなしでフォームを作成できます。 これら フォーム などの機能を提供できます キャプチャ、ファイルのダウンロード、 調査分野 等...

デフォルトのContact Form 7スタイルはほとんどの基本的なContact Formで十分ですが、多くの場合、変更する必要があります。

これにより、デフォルトのフォーム構造が変更され、よりアクセスしやすくなりました。 彼はまた ショート フォームの上にある[応答]。フォームの送信時にエラーが発生した場合は、フォームに表示されます。

WordPress Webサイトを作成したことがない場合は、 FTPクライアントでWordPressブログをインストールする方法

標準フォームの場合、プラグインによって生成されるコードは次のとおりです。

[応答]あなたの名前（必須） [テキスト*あなたの名前ID：あなたの名前]あなたのメール（必須） [メール*あなたのメールID：あなたのメール]あなたの件名[テキストあなたの件名ID：あなたの件名]あなたのメッセージ[textareayour-message id：your-message] [submit "Send"]

フォームお問い合わせフォームをカスタマイズするためのいくつかのプラグイン7

1。 お問い合わせフォーム7スタイル

プラグイン お問い合わせフォーム7スタイル から選択する多くのスタイルがあります。

Twenty Fifteenテーマのユーザーには、互換性のあるスタイルもあります。

スタイルを適用するには、「 連絡先スタイル>クイック編集 スタイルを適用するフォームにチェックマークを付けて、[ 更新 '。

2。 お問い合わせフォーム7スキン

スキンを使用するには お問い合わせフォーム7、 新しいを作成します お問い合わせフォーム ページを下にスクロールして、[スキン] セクションを表示します。 フォームのテンプレートとスタイルを選択できます。

あなたはの形に専用のモデルを見つけるでしょうévénements、登録および通知。

これは、Twenty Fifteenテーマを使用したTopazスタイルの調査フォームです。

3。 お問い合わせフォームの材料設計

これらのスタイルは、スタイルに基づいています 材料設計.

このプラグインは、デフォルトのフォームを削除してそのショートコードを使用することをお勧めします。

これはHestiaテーマの例です。 ポインタがフォームのフィールドに移動したときのフローティングラベルに注意してください。

一部の Contact Form 7 テスト WordPressテーマ

ColorMag WordPressテーマの問い合わせフォーム

ほとんどの場合、Contact Form 7はWordPressテーマのスタイルを継承します。 これはテーマの場合です コーラルダーク.

WordPress ColorMagテーマの問い合わせフォーム

以下は、カスタムスタイルのないフォームです。 彼は青いボタンの色を継承します ColorMag WordPressテーマ.

まず、フォームの背景画像として使用する写真をアップロードし、フォームのラベルのコードを灰色から白に変更し、テキストに青い影を付けました。

次の変更は、フォームラベルとフォームフィールド間のマージンを増やし、減算ボタンを変更し、ポインタがフォームのフィールドに入るときに境界線を追加することでした。

フォーム送信時のエラー/成功メッセージの表示も、正しく表示されるように変更する必要があります。

フォームの送信時に回転するGIFが正しく表示されなかったため、Loading.ioの代替手段を見つけ、CSSで参照しました。

結果のフォームは次のとおりです。

コードは次のとおりです。

div.wpcf7 {マージン：0; パディング：1.5em; 背景：url（ 'your_background_image_url_here'）; -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; .wpcf7ラベル、.wpcf7-submit {色：白。 text-shadow：1px 1px 0px rgba（40、157、204、1）。 .wpcf7 .wpcf7フォームコントロール{10px 0 20px 0;} .wpcf7 .wpcf7-submit：hover {背景：#186d8e;} .wpcf7-form-control：focus {border：2px solid #289dcc;}。 div.wpcf7-response-output {background：#F8F8F8;} text-align：center。 幅：92.5％。 マージン：1em 0em 1em 0em。 -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; span.wpcf7-not-valid-tip {background：#F8F8F8;}。 表示：インラインブロック。 幅：自動。 パディング：1％。 -webkit-border-radius：3px; -moz-border-radius：3px; border-radius：3px; div.wpcf7 .ajax-loader {background-image：url（ 'your_loading_image_url_here'）;} 幅：50px。 高さ：50px; }

コードに落書きする必要がない場合は、 ブログに連絡先フォームを作成する10 WordPressプラグイン

連絡先フォームの作成に役立つ3プレミアムの代替案もご覧ください。 

1。 W8お問い合わせフォーム

W8 Contact Form は、のプラグインの XNUMX つです。 お問い合わせフォーム WordPressで最も人気があります。 複数の受信者への送信、アニメーションのサポート、無制限のフォーム作成、さまざまなスタイル、さまざまな追加のカスタマイズ オプションなど、多くの機能を提供します。

さらに、それはあなたのウェブサイトやブログにあなたの顧客と連絡を取りやすくするための専門的なシステムを提供します。 ニーズや好みに応じて、すべてのフォームをカスタマイズできます。

ダウンロード | デモ | ウェブホスティング

2。 お問い合わせフォーム

お問い合わせフォームは、応答性の高いWordPressプラグインであり、シンプルなツールですが、訪問者がメッセージを残して連絡できる、明確で心強いフォームを表示できるカスタマイズオプションが豊富です。

必要なフィールドを定義し、フィールドの最適なレイアウトを選択し、それを完全にカスタマイズして、顧客や訪問者に提案やメッセージを残すように促すことができます。

メッセージを受信する電子メールアドレスを設定し、それを使用してビジネスを最も収益性の高い方向に成長させるだけです。

ダウンロード | デモ | ウェブホスティング

3。 スリックポップアッププロ

Slick Popup Pro は、 WordPress プラグイン プラグインによって作成されたフォームを変換する非常にシンプルで軽量 お問い合わせフォーム7 ポップアップで。 彼女はフォームを使用し、それを美しくて完全に反応するポップアップに変換します。

ポップアップフォームには、次のようないくつかの用途があります。情報収集フォーム、 お問い合わせフォーム、登録フォーム、見積もりフォーム、提案/苦情フォームなど。

ダウンロード | デモ | ウェブホスティング

推奨リソース

ウェブサイトやブログでお問い合わせフォームをより適切に作成および管理するのに役立つその他の推奨リソースを確認してください。 

• フォーム上のCAPTCHAによる検証のための6 WordPressプラグイン
• WordPressのお問い合わせフォーム7とのコンタクトフォームを追加する方法
• WordPressでGDPR準拠フォームを作成する方法

まとめ

出来上がり！ このチュートリアルはこれですべてです。お問い合わせフォームをカスタマイズするためのアイデアが増えることを願っています。 することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する. 

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

しかし、それまでの間、あなたについて教えてください commentaires 専用セクションの提案。

...