Contact Form 7フィールドのサイズを調整する - WordPress 情報パッケージ
ベストセラー人気 WordPress テーマTop 30 詳細

Contact Form 7フィールドのサイズを調整する

Last Updated:2022年2月22日| 4のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

WordPress プラグインContact Form 7でテキストフィールドのサイズを調整する方法で二つのことを見てみましょう。

ちなみに、無料のお問い合わせフォームプラグインであるWPForms Liteを使用すると、レイアウトを簡単に調整できます。 」WPFormsで複数列(2列)レイアウトステートメントフォームを作成する方法「を参照してください。HTMLとCSSに精通している場合は、CF7を使用して自由にレイアウトを調整できます。初心者の場合は、WPFormsがより良いオプションかもしれません。 Quformのような有料プラグインも検討することができます。

Contact Form 7フィールドのサイズを調整する

Contact Form 7のオプションを使用

最初は「コンタクトフォームの編集」画面から直接サイズを指定する方法です。 これについては Contact Form 7のマニュアルに記載されています。

Contact Form 7 テキストフィールドオプション

マニュアルを見てみるとサイズは "サイズ:30"のような形式で指定が可能です。他にもid、classなど、様々なオプションがサポートされるため、より高度な制御が必要な場合に活用すると良いです。

参考までに、以下のようにsize:30とsize:50を入れてテストをしてみると:

Contact Form 7 オプション


実際 WordPress サイトでは、次のように表示されます。

Contact Form 7 - フィールドサイズ

サイズを指定していないフィールドのサイズはどのように設定されるか確認してみる "サイズ:40「と指定されていますね。上記のようにContact Form 7でデフォルトで提供するオプションにより、サイズを簡単に調整できます。

CSSを使用

何らかの理由で、上記の方法がうまくいかない場合には、CSSで設定が可能です。 一番上の画面のように、各フィールドにcontact7-name、contact7-email、contact7-subjectをclassに指定(例: "class:contact7-name")し、次のCSSコードをテーマのスタイルシートに追加すると、:

.contact7-name、.contact7-email、.contact7-subject { width: 50%; }

次のように適用されます。

Contact Form 7 フィールドのサイズ変更

(WordPressでのCSSコードをスタイルシートに入力する方法は、 ここを参照してください。)

以上でContact Form 7で、テキストフィールドのサイズを調整する方法を説明しました。 以外のフィールドも同様の方法を介して制御が可能です。

추가

Contact Form 7は無料で提供されてお機能として強力な機能を示してくれるので、多くのユーザーが使用して、いくつかのテーマでは、お問い合わせフォームをContact Form 7を使用して作って提供することもあります。 HTMLとCSSをある程度知っている場合は、簡単にカスタマイズが可能ですが、そうでない場合には、使用が容易ではないでしょう。 そしてContact Form 7を使用してみると、サイトに負担を多く与えるようです。 この点は、このブログだけで判断したため、他のサイトでは、そうではないかもしれません。 また、いくつかの分は、セキュリティ上にも問題がある可能性がある文を見たこともあります。

私はこのCF7を使用してオンライン要請書を作成しましたが、速度が重要か、より強力な機能をしたいか、あるいは容易に使用して簡単にデザインすることができるが、必要に応じ有料プラグインを考慮してみることができます。 有名な有料プラグインで Quformがあります。 このプラグインはドロップ&ドロップ(Drop&Drop)で簡単にフィールドを整理し、特に訪問者に提出した問い合わせを管理者ページでも確認することができ、メール送信エラーによる問い合わせを受けられない事態を防ぐことができます。 (Contact Form 7の場合は、追加のプラグインをインストールしてデータをDBに保存できます。)

メモ:



4のコメント

コメント

  1. 次の記事でContact Form 7ハングル言語ファイルをダウンロードすることができますので、参照してください:

    https://www.thewordcracker.com/?p=35610

    応答
  2. 【text * your-name placeholder "名前"]

    【tel * your-number placeholder "電話番号"]

    [textarea your-message placeholder "お問い合わせ内容を簡単に作成してください」]

    利用規約(必須)[checkbox * checkbox-857「同意する」]

    [submit "Send"]

    応答
    • こんにちは?

      上記の方法は、Contact Form 7サイトに記載されている方法です。

      おそらくThe 7テーマ( https://1.envato.market/vmqNd )のスタイルシート可能性があるでしょう。

      クラスを指定し、CSSでの調整を試してみてください。

      応答
  3. the7テーマを使用中だが、コンタクト7フォームフィールドのサイズ調整がダメですね
    メッセージウィンドウが大きすぎる減らしたい方法ないでしょうか?
    教えシンデにしてもダメですねㅠㅠは固定ですサイズ自体が

    応答