より良いユーザーエクスペリエンスのために、計算フォームから送信ボタンを削除する方法をお探しですか？
WPFormsで作成した計算フォームから送信ボタンを削除することで、訪問者に即座に計算を提供することができます。
このガイドでは、フォームの送信アクションを必要とせず、シームレスでリアルタイムの計算を行うためにフォームを変更する簡単な手順を学びます。
計算フォームから送信ボタンを削除する方法
WPFormsで計算フォームから送信ボタンを削除するのは信じられないほど簡単です。以下の簡単なステップを踏むだけです：
この記事で
前提条件
送信ボタンを無効にする手順を進める前に、いくつかの重要な手順が完了していることを確認しよう。
すでにこれらのステップを完了している場合は、送信ボタンを削除するセクションに進んでください。
1.WPForms Proのライセンスを持つ
WPFormsは評判の良いフォームビルダーと計算機プラグインで、ユーザーは日付間の日数計算機を含む幅広いフォームを作成することができます。
WPFormsの最新バージョンをインストールし、Proライセンスにアクセスすることが重要です。
プロバージョンは、プレミアム統合、アドオン、条件付きロジック、フォーム送信レポートなどの多くの貴重な機能へのアクセスを提供します。
2.計算アドオンの使用
WordPressでカスタム電卓を作成するには、WPForms Calculations Addonをインストールする必要があることはすでにご存知でしょう。
このアドオンを使って、論理演算子やif-then文を挿入し、パーソナライズされた見積書を作成したり、インテリジェントな計算機を構築することができます。
さらに、統合された数学関数を利用して、数値を丸めたり、時間範囲を計算したり、平均値を求めたりすることもできます。
3.電卓フォームテンプレートの選択
最後に、フォームを用意する必要があります。WPFormsには2,000以上のテンプレートが用意されており、簡単にフォームを作成することができます。
これらのテンプレートには、さまざまなユースケースや業種に合わせてカスタマイズできる、プロがデザインした電卓フォームテンプレートが含まれています：
- 住宅ローン計算フォームテンプレート- 購入希望者が住宅ローンと毎月の支払額を簡単に計算できるため、不動産会社に最適です。
- 送料計算フォームテンプレート- eコマースサイトは、顧客のためのシンプルな送料計算を提供することにより、時間と労力を節約することができます。
- BMI計算フォームテンプレート- 体力や健康に専念し、ユーザーの現在の健康状態を評価するのに役立つウェブサイトに最適です。
- ROI計算フォームテンプレート- 企業やマーケティング担当者がキャンペーンやプロジェクトの収益性を効率的に評価するのに役立ちます。
HTML、javascript、または複雑なコーディングの知識がなくても、カスタム電卓を作成するために計算アドオンを使用することができます。
送信ボタンの削除
これらの前提条件が満たされれば、フォームを修正して送信ボタンを削除し、より良いユーザーエクスペリエンスを実現する準備は万端です。
1.WPFormsスニペットライブラリに移動する
WordPressのダッシュボードからWPForms " Toolsに 移動します。次に、コードスニペットタブに移動します。
これにより、"Please Install WPCode to Use WPForms Snippet Library "というポップアップメッセージが表示されます。
2.WPCodeのインストールとアクティベート
あとは、Install + Activate WPCodeボタンをクリックするだけです。プラグインは数秒でインストールされます。
WPCodeプラグインがインストールされると、WPFormsスニペットの完全なリストにアクセスできるようになります。
3.送信ボタンを隠すスニペットを使用する
次に、[Search Snippets]フィールドに名前を入力して、[hide submit button]スニペットを検索します。次に、Install Snippet ボタンをクリックします。
ここにインポートするコード・スニペットがある：
これにより、WPCodeスニペットプレビューページにリダイレクトされ、自動的に統合されたコードを見ることができます。
あとはスニペット・コードを有効にするだけです。これを行うには、トグルをInactiveから Activeに動かす。
コード・スニペットをサイト全体で有効にするための次のステップは、「アクティブ」トグル・オプションの右隣にある「更新」ボタンを押すことです。
このアプローチに従うことで、WPFormsスニペットライブラリを通してスニペットを一度だけ追加する必要があります。
次に、ユーザがこのスニペットを使用したい各フォームに対して、Submit Button CSS Classの名前をビルダ内に追加する必要があります。
4.送信ボタンCSSクラスの追加
あとは、送信ボタンを削除したい電卓のフォームビルダーにCSSクラスを追加するだけです。
これを行うには、電卓フォームを開き、Generalタブに移動し、Advancedタブまでスクロールダウンします。
その後 wpf-calc-form CSSを 送信ボタンCSSクラス をクリックしてコード・スニペットを有効にする。
これでフォームをプレビューして、電卓の送信ボタンが正常に削除されたことを確認できます！
Calculator Formsに関するその他の質問
電卓フォームは読者の間で人気のトピックです。ここでは、電卓フォームに関するよくある質問にお答えします。
フォームの送信ボタンをオフにするには、特にWPForms Proを使用している場合は、カスタムCSSを適用することができます。WPForms " Toolsに 移動します。 次に、コードスニペットタブに移動し、WPForms Snippetライブラリにアクセスします。
はい、送信ボタンがなくてもフォームは機能します。これは、自動送信またはデータ取得のための代替方法を使用するフォームで一般的です。WPForms Proでは、送信ボタンを非表示にするCSSでフォームをカスタマイズすることで、そのようなフォームを作成することができます。
次に、カスタムオンライン電卓の作成方法を学ぶ
ウェブサイトに電卓を追加することで、訪問者の滞在を促し、彼らの問題に答えてもらうことで、エンゲージメントを高めることができます。あなたのウェブサイトのユニークなニーズのためにWordPressでカスタム電卓を作る方法については、このガイドをチェックしてください。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proにはたくさんの無料テンプレートが含まれており、14日間の返金保証がついています。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
この CSS は、電卓フォームのテキストフィールドで入力ボタンが使用されたときに、フォームが送信されるのを止めません。
こんにちは、ディーン、
その通りです。このCSSスニペットは送信ボタンを隠すだけで、テキストフィールドでEnterキーが押されたときにフォームが送信されるのを防ぐことはできません。
Enter キーも無効にしたい場合は、こちらの開発者向けドキュメントにあるコード・スニペットを使用することをお勧めします：Enter キーでフォームを送信しないようにする方法。
お役に立てれば幸いだ！