AI要約
ユーザーエクスペリエンスを向上させるために、計算フォームから送信ボタンを削除する方法をお探しですか？
住宅ローンの見積もりや配送料の見積もりでは、ユーザーはボタンをクリックしてページが再読み込みされるのを待つのではなく、入力するたびに数値が更新されることを望んでいます。
WPFormsで作成された計算フォームから送信ボタンを削除することで、訪問者に即時の計算結果を提供できます。
このガイドでは、フォームの送信アクションを必要とせずに、シームレスなリアルタイム計算のためにフォームを変更する簡単な手順を学びます。
計算フォームから送信ボタンを削除する理由
ほとんどのフォームは、問い合わせリクエストや注文などのデータをどこかに送信するために送信ボタンを必要としますが、計算フォームは異なります。
訪問者は何も送信していません。彼らは月々の住宅ローン支払い額や配送料のような答えを求めているだけです。計算アドオンが入力中にリアルタイムで合計を更新する場合、送信ボタンには何もすることがなくなります。
結果を見るためにクリックする必要があると思わせて訪問者を混乱させることさえあります。それを非表示にすると、フォームは実際の電卓のように動作し、数値が自動的に表示および更新されます。
したがって、フォームが提出を収集するのではなく、ライブ数値を表示するために存在する場合、送信ボタンを削除するのが通常正しい選択です。
計算フォームから送信ボタンを削除する方法
WPFormsで計算フォームから送信ボタンを削除するのは非常に簡単です。以下の簡単な手順に従うだけです。
前提条件
送信ボタンを無効にする手順に進む前に、いくつかの重要なステップを完了したことを確認しましょう。
これらの手順をすでに完了している場合は、送信ボタンの削除セクションにスキップしてください。
1. WPForms Proライセンスを所有していること
WPFormsは、評判の良いフォームビルダーおよび計算プラグインであり、ユーザーは日付間計算機など、さまざまな種類のフォームを作成できます。
WPFormsの最新バージョンがインストールされており、Proライセンスへのアクセスがあることを確認することが重要です。
Proバージョンでは、条件付きロジック、フォーム送信レポートなど、プレミアム統合、アドオン、および多くの貴重な機能にアクセスできます。
2. 計算アドオンを使用していること
WordPressでカスタム計算機を作成するには、WPForms計算アドオンがインストールされている必要があることを、おそらくすでにご存知でしょう。
このアドオンを使用して、論理演算子とif-thenステートメントを挿入し、パーソナライズされた見積もりを作成したり、インテリジェントな計算機を構築したりできます。
数値を丸めたり、時間範囲を計算したり、平均を見つけたりするための統合された数学関数を利用することもできます。
3. 計算フォームテンプレートを選択していること
最後に、フォームを準備する必要があります。作成する必要がある場合は、WPFormsには、フォーム作成を簡単にする2,100以上の事前デザイン済みテンプレートが用意されています。
これらには、次のようなさまざまなユースケースや業界に合わせてカスタマイズできる、専門的にデザインされた計算フォームテンプレートが含まれます。
- 住宅ローン計算フォームテンプレート — 不動産業者にとって最適です。潜在的な購入者が住宅ローンとその月々の支払いを簡単に計算できます。
- 配送料計算フォームテンプレート — eCommerceサイトが顧客向けの簡単な配送料計算機を提供することで、時間と労力を節約するのに役立ちます。
- BMI計算フォームテンプレート — 健康状態を評価するのに役立つ、フィットネスや健康に関するウェブサイトに最適です。
- ROI計算フォームテンプレート — ビジネスやマーケターがキャンペーンやプロジェクトの収益性を効率的に評価するのに役立ちます。
そして何より素晴らしいのは、HTML、JavaScript、または複雑なコーディング知識なしでカスタム計算機を作成するために、計算アドオンを使用できることです。
送信ボタンの削除
これらの前提条件が満たされると、フォームを編集して送信ボタンを削除し、ユーザーエクスペリエンスを向上させることができます。
1. WPFormsスニペットライブラリに移動する
WordPressダッシュボードから、WPForms » ツールに移動します。次に、コードスニペットタブに移動します。
これにより、「WPFormsスニペットライブラリを使用するにはWPCodeをインストールしてください」というポップアップメッセージが表示されます。
2. WPCodeをインストールしてアクティブ化する
あとは、WPCodeのインストールと有効化ボタンをクリックするだけです。プラグインは数秒でインストールされます。
WPCodeプラグインがインストールされると、WPFormsスニペットの完全なリストにアクセスできるようになります。
3. 非表示送信ボタンスニペットを使用する
次に、スニペットの検索フィールドに名前を入力して、送信ボタンを非表示にするスニペットを検索します。次に、スニペットのインストールボタンをクリックします。
ここに、インポートするコードスニペットがあります。
これにより、WPCodeスニペットプレビューページにリダイレクトされ、コードが自動的に統合されていることを確認できます。
次に、スニペットコードを有効にするだけです。これを行うには、トグルを非アクティブからアクティブに移動します。
次に、コードスニペットをサイト全体で有効にするために、アクティブトグルオプションの隣にある更新ボタンをクリックします。
このアプローチに従うことで、WPFormsスニペットライブラリを通じてスニペットを一度だけ追加すればよくなります。
次に、ユーザーがこのスニペットを使用したい各フォームで、ビルダー内に送信ボタンのCSSクラスの名前を追加する必要があります。
4. 送信ボタンのCSSクラスを追加する
次に、送信ボタンを削除したい計算機のフォームビルダーにCSSクラスを追加するだけです。
これを行うには、計算機フォームを開き、一般タブに移動してから、高度な設定タブにスクロールダウンします。
その後、wpf-calc-form CSSを送信ボタンのCSSクラスに貼り付けて、コードスニペットを有効にします。
これで、フォームをプレビューして、計算機の送信ボタンが正常に削除されたことを確認できます！
Enter キーによるフォーム送信を停止する方法
目に見える送信ボタンがなくても、テキストフィールド内で誰かがEnterキーを押すとフォームは送信される可能性があります。ライブ結果を表示するための計算機では、それは望ましい動作ではありません。
修正するには、Enterキーが送信をトリガーするのを停止する2番目のスニペットが必要です。正確なコードは開発者ドキュメントにありますので、Enterキーによるフォーム送信を停止する方法のガイドに従って、最初のスニペットと同じ方法で追加してください。
両方のスニペットがアクティブになると、計算機はボタンも誤った送信もなく、合計を即座に表示し、その場にとどまります。
計算フォームに関するFAQ
計算フォームは読者の間でよく話題になります。ここでは、送信ボタンの削除とWordPressでの計算フォームの操作に関する最も一般的な質問への回答を紹介します。
フォームの送信ボタンをオフにするにはどうすればよいですか？
WPForms Proで送信ボタンをオフにするには、カスタムCSSで非表示にします。WPForms » Toolsに移動し、Code Snippetsタブを開いてWPFormsスニペットライブラリにアクセスし、送信ボタン非表示スニペットをインストールします。次に、フォームのSubmit Button CSS Classフィールドにwpf-calc-formクラスを追加します。
フォームに送信ボタンがないことはありますか？
はい。フォームは送信ボタンなしで機能します。これは、結果を即座に表示する計算機や自動的に送信されるフォームで一般的です。WPForms Proでは、組み込みのWPCode統合を通じて追加された少量のCSSでボタンを非表示にするため、追加のものは必要ありません。
送信ボタンを非表示にするとフォームの送信が停止しますか？
いいえ、ボタンを非表示にするだけでは送信は停止しません。訪問者がテキストフィールド内でEnterキーを押すと、フォームは引き続き送信される可能性があります。それを防ぐには、Enterキーによる送信を停止する2番目のスニペットを、上記でリンクされた開発者ガイドを使用して追加します。
計算フォームから送信ボタンを削除できますか？
はい。スニペットは、Submit Button CSS Classフィールドにwpf-calc-formクラスを追加したフォームにのみ適用されます。他のフォームではそのフィールドを空のままにしておくと、送信ボタンはそのままの状態を維持します。
次に、カスタムオンライン計算機の作成方法を学ぶ
計算機は、訪問者にサイトに留まる理由を与え、実際の質問への回答を得ることができるため、訪問者をサイトに引き留める最良の方法の1つです。
ゼロから構築したい場合は、WordPressでカスタム計算機を作成する方法に関するガイドをご覧ください。サイトに必要なものに合わせて設定してください。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
このCSSは、計算フォーム内で使用されているテキストフィールドのいずれかでEnterボタンが使用されたときに、フォームが送信されるのを停止しません。
ディーンさん、こんにちは。
おっしゃる通りです。このCSSスニペットは送信ボタンを非表示にするだけで、テキストフィールドでEnterキーを押したときにフォームが送信されるのを防ぐことはできません。
Enterキーも無効にしたい場合は、こちらの開発者向けドキュメントで提供されているコードスニペットを使用することをお勧めします。Enterキーによるフォーム送信を停止する方法。
お役に立てば幸いです！