計算フォームから送信ボタンを削除する方法

公開: 2023-11-15

ユーザー エクスペリエンスをより合理化するために、計算フォームから送信ボタンを削除する方法を知りたいですか?

WPForms で作成した計算フォームから送信ボタンを削除することで、訪問者に即座に計算を提供できます。

このガイドでは、フォーム送信アクションを必要とせずに、シームレスでリアルタイムの計算ができるようにフォームを変更する簡単な手順を学びます。

計算フォームから送信ボタンを削除する方法

WPForms を使用して計算フォームから送信ボタンを削除するのは非常に簡単です。 以下の簡単な手順に従うだけです。

記事上で

  • 前提条件
    • 1. WPForms Pro ライセンスを持っていること
    • 2. 計算アドオンの使用
    • 3. 電卓フォームテンプレートの選択
  • 送信ボタンの削除
    • 1. WPForms スニペット ライブラリに移動します
    • 2. WPCodeのインストールとアクティベーション
    • 3. 送信ボタンを非表示にするスニペットを使用する
    • 4. 送信ボタンの CSS クラスを追加する
  • 電卓フォームに関するその他の質問
    • フォームの送信ボタンをオフにするにはどうすればよいですか?
    • フォームに送信ボタンがないことはできますか?

前提条件

送信ボタンを無効にする手順に進む前に、いくつかの重要な手順が完了していることを確認してください。

これらの手順をすでに完了している場合は、送信ボタンの削除に関するセクションに進んでください。

1. WPForms Pro ライセンスを持っていること

WPForms は、ユーザーが幅広いフォームを作成できるようにする評判の高いフォーム ビルダーおよび計算プラグインです。

The WPForms homepage

最新バージョンの WPForms がインストールされており、Pro ライセンスにアクセスできることが重要です。

Pro バージョンでは、プレミアム統合、アドオン、および条件付きロジック、フォーム送信レポートなどの多くの貴重な機能へのアクセスが提供されます。

2. 計算アドオンの使用

WordPress でカスタム電卓を作成するには、WPForms Calculations Addon をインストールする必要があることはおそらくすでにご存知でしょう。

calculations addon banner

このアドオンを使用すると、論理演算子や if-then ステートメントを挿入して、パーソナライズされた見積もりを作成したり、インテリジェントな計算機を構築したりできます。

統合された数学関数を利用して、数値の四捨五入、時間範囲の計算、平均の検索などを行うこともできます。

3. 電卓フォームテンプレートの選択

最後に、フォームを準備する必要があります。 作成する必要がある場合は、WPForms がフォーム作成を簡単にする 1,100 以上の事前にデザインされたテンプレートを提供します。

calculator form templates category page

これらには、次のようなさまざまなユースケースや業界に合わせてカスタマイズできる、専門的に設計された計算フォーム テンプレートが含まれます。

  • 住宅ローン計算フォーム テンプレート — 潜在的な購入者が月々の支払いを簡単に計算できるため、不動産業者に最適です。
  • 送料計算フォーム テンプレート — 顧客に簡単な送料計算ツールを提供することで、e コマース サイトの時間と労力を節約できます。
  • BMI 計算フォーム テンプレート — ユーザーが現在の健康状態を評価するのに役立つ、体力や健康に特化した Web サイトに最適です。
  • ROI 計算フォーム テンプレート - 企業やマーケティング担当者がキャンペーンやプロジェクトの収益性を効率的に評価できるように支援します。

何よりも優れている点は、HTML、JavaScript、または複雑なコーディングの知識がなくても、計算アドオンを使用してカスタム計算機を作成できることです。

送信ボタンの削除

これらの前提条件が満たされたら、ユーザー エクスペリエンスをより合理化するためにフォームを変更して送信ボタンを削除する準備は完了です。

1. WPForms スニペット ライブラリに移動します

WordPress ダッシュボードから、 [WPForms] » [ツール] に移動します。 次に、 「コード スニペット」タブに移動します。

wpforms code snippets

これにより、「WPForms スニペット ライブラリを使用するには WPCode をインストールしてください」というポップアップ メッセージが表示されます。

2. WPCodeのインストールとアクティベーション

ここで行う必要があるのは、 「WPCode のインストール + アクティブ化」ボタンをクリックすることだけです。 プラグインのインストールには数秒かかります。

install and activate wpcode

WPCode プラグインをインストールすると、WPForms スニペットの完全なリストにアクセスできるようになります。

all code snippets

3. 送信ボタンを非表示にするスニペットを使用する

ここで、 「検索スニペット」フィールドに名前を入力して、非表示の送信ボタン スニペットを検索します。 次に、 「スニペットのインストール」ボタンをクリックします。

Install hide submit button snippet

これにより、WPCode スニペットのプレビュー ページにリダイレクトされ、自動的に統合されたコードを確認できます。

Hide submit button code snippet preview

あとは、スニペット コードを有効にするだけです。 これを行うには、トグルを[非アクティブ]から[アクティブ]に移動します。

Activate hide submit button snippet

コード スニペットをサイト全体で有効にする次のステップは、 [アクティブ]切り替えオプションのすぐ横にある[更新]ボタンをクリックすることです。

Update hide submit button snippet

この方法に従うと、WPForms スニペット ライブラリを通じてスニペットを 1 回追加するだけで済みます。

次に、ユーザーがこのスニペットを使用したいフォームごとに、ビルダー内に送信ボタン CSS クラスの名前を追加する必要があります。

4. 送信ボタンの CSS クラスを追加する

あとは、送信ボタンを削除したい計算機のフォームビルダーに CSS クラスを追加するだけです。

これを行うには、電卓フォームを開いて[全般]タブに移動し、 [詳細]タブまで下にスクロールします。

その後、 wpf-calc-form CSS を送信ボタン CSS クラスに貼り付けて、コード スニペットをアクティブにします。

Add css class to submit button

フォームをプレビューして、計算機から送信ボタンが正常に削除されたことを確認できるようになりました。

Mortgage calculator without submit button

電卓フォームに関するその他の質問

電卓フォームは読者の間で人気のトピックです。 ここでは、それらに関するよくある質問への回答を示します。

フォームの送信ボタンをオフにするにはどうすればよいですか?

特に WPForms Pro を使用している場合、フォームの送信ボタンをオフにするには、カスタム CSS を適用できます。 WPForms » ツールに移動します。 次に、 「コード スニペット」タブに移動し、フォームの送信ボタンをオフにするソリューションが含まれている WPForms スニペット ライブラリにアクセスします。

フォームに送信ボタンがないことはできますか?

はい、フォームは送信ボタンがなくても機能します。 これは、自動送信されるフォームや、データ取得に別の方法を使用するフォームで一般的です。 WPForms Pro を使用すると、CSS でフォ​​ームをカスタマイズして送信ボタンを非表示にし、WPCode 統合を使用して必要なコードをシームレスに追加することで、そのようなフォームを作成できます。

次に、カスタムのオンライン計算機を作成する方法を学びます。

Web サイトに計算機を追加すると、訪問者がそこに留まり、問題を解決できるようになり、エンゲージメントが向上します。 ウェブサイト固有のニーズに合わせて WordPress でカスタム電卓を作成する方法については、このガイドをご覧ください。

カスタムオンライン計算機を作成する

フォームを構築する準備はできましたか? 最も簡単な WordPress フォームビルダープラグインを今すぐ始めましょう。 WPForms Pro には多数の無料テンプレートが含まれており、14 日間の返金保証を提供しています。

この記事がお役に立った場合は、Facebook と Twitter でフォローして、さらに無料の WordPress チュートリアルとガイドをご覧ください。