WordPressでカスタマイザーを作成する方法（ステップバイステップ）

電卓のようなインタラクティブな要素は、WordPressサイトのユーザーエクスペリエンスを向上させます。メールキャプチャによるリードの生成、ユーザーエンゲージメントの促進、訪問者のクエリーへの対応など、さまざまな目的を果たすことができます。

ユーザーのニーズに直接応える価値あるツールをプロバイダーとして提供することで、ユーザーをサイトに長く滞在させ、オンライン体験を深め、最終的にサイトの目標を達成することができます。

WPBeginnerでは、複数のツールやプラグインをテストし、複雑な計算の簡素化、パーソナライズされたレコメンデーションの提供、将来のマーケティング活動のためのリードの獲得など、どのような目的でも最も簡単に電卓を追加できるものを探しました。

この投稿では、WordPressでカスタマイザーを簡単に作成する方法をステップバイステップで紹介します。

なぜWordPressにカスタマイザーを追加するのか？

カスタマイザーは、ユーザーがサイトを離れることなく素早く計算できるようにします。

例えば、あなたが健康やフィットネスのブログを持っている場合、BMI計算機を追加して、ユーザーが自分のBMIを見て、あなたのサイトからどの購読プランや製品を購入するかを決めることができます。

世界中に販売しているのであれば、メートル単位をインペリアル単位に変換するオンライン電卓を使えば、顧客が希望するサイズや重さの商品かどうかを確認することができ、より多くの売上を得ることができます。

また、送料計算機能を提供することで、信頼を築き、お買い物カゴの放棄を減らすことができます。こうすれば、カスタマイザーは購入手続き時に予想外のコストに驚くことはありません。

あるいは、不動産サイトに住宅ローン計算機を追加したり、自動車ディーラーのサイトに車の支払い計算機を追加することもできる。

これらのカスタマイザーは、リードを生成するための素晴らしい方法でもあります。例えば、ユーザーにメールアドレスを入力してもらい、結果を送信することができます。このように、電卓はWordPressでメールリストを作成するのに役立ちます。

それでは、WordPressでカスタマイザーを簡単に作成する方法を見ていきましょう。

WordPressでカスタマイザーを作成する方法

WPFormsを使えばWordPressで簡単にカスタマイザーを作成することができます。これは、市場で最高のカスタマイザープラグインとフォームビルダーです。

ドラッグアンドドロップビルダー、2000以上のテンプレート、完全なスパム保護が付属しています。これにより、住宅ローン計算機、送料割引、年齢計算機など、お望みのWordPressフォームを簡単に作成できます。さらに、ユーザーフレンドリーです。

まず、WPFormsプラグインをインストールして有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。

有効化した後、WordPress管理サイドバーからWPForms ” 設定ページにアクセスし、ライセンスキーを入力する必要があります。

このキーはWPFormsサイトのアカウントから取得できます。

その後、WordPressダッシュボードからWPForms ” Addonsページに移動し、’Calculations Addon’を見つけます。

インストールが完了したら、’Install Addon’ボタンをクリックするだけで、サイト上で有効化することができます。

次に、管理ダッシュボードからWPForms ” 新規追加のページに移動します。

テンプレートの選択」ページが表示されますので、作成するフォームの名前を入力してください。

その後、左の列から’電卓’オプションをクリックすると、WPFormsが提供する87以上のプリメイド電卓テンプレートを開くことができます：

• 住宅ローン計算テンプレート
• チップ電卓テンプレート
• リース計算テンプレート
• BMI計算機テンプレート
• 貯蓄と投資の計算テンプレート

ここから、好きなフォームテンプレートの下にある「テンプレートを使用する」ボタンをクリックすることができます。このチュートリアルでは、シンプルな ‘送料割引計算’ フォームを作成します。

これで画面上にフォームビルダーが開きます。右側にフォームプレビュー、左側にフォームフィールドが表示されます。

左のパネルから簡単にフィールドを追加できるようになり、またドラッグして順番を並べ替えることもできる。

次に、「使用可能な項目」セクションまでスクロールダウンし、このフィールドをクリックしてサイドバーで設定を開きます。

そうすれば、eコマースストアで販売するすべての項目のタイトル、画像、価格を追加することができます。

ただし、販売する項目の画像を追加したい場合は、「Use Image Choices」オプションをオンに切り替える必要があることを覚えておいてください。

また、「＋」ボタンをクリックして項目を追加したり、「-」ボタンをクリックして項目をセクションから削除することもできます。

次に、「送料」フィールドをクリックし、左カラムの設定を開きます。このフィールドは商品の合計金額に基づいて送料の割引を計算します。もしこのフィールドを削除してしまうと、計算機がユーザーに対して機能しなくなりますので、必ずフォームに残しておいてください。

初期設定では、「配送」フィールドは50ドル未満の購入に対して自動的に10％の割引を提供し、合計金額が大きくなるにつれて0.25％の割引を掛けます。

ただし、送料割引を変更したい場合は、左の列から「詳細設定」タブに切り替え、「計算式」セクションまでスクロールダウンしてください。

ここでは、10の値を提供したい割引率に置き換えることができます。また、商品の合計を変更することもできます。

送料割引をさらにカスタマイズしたい場合は、上部の「Cheatsheet」リンクをクリックしてください。計算式チートシート」のページが表示され、使用するルールや文字列をより理解することができます。

その後、他のフィールドオプションの設定もすべて同じように行うことができる。

設定が完了したら、上部にある「保存」ボタンをクリックし、設定を保存することをお忘れなく。

次の投稿では、ブロックエディターで送料計算フォームを追加したいWordPressページまたは投稿を開く必要があります。

ここから左上のブロック追加「+」ボタンをクリックしてブロックメニューを開き、WPFormsブロックを埋め込みます。

そうしたら、ブロック内のドロップダウンメニューから送料割引計算フォームを選択するだけです。

最後に、上部の「更新」または「公開」ボタンをクリックして設定を保存します。これで、WordPressサイトにアクセスしてカスタマイザーフォームを表示することができます。

ここで、送料フィールドは、あなたのサイトであなたの顧客が注文しているさまざまな項目の価格に応じて自動的に送料を計算します。

WordPressで電卓フォームをカスタマイズする

ある時点で、より多くのコンバージョンを得ることができるかどうかを確認するために、計算機を変更してみるかもしれません。例えば、「メール」フィールドを必須にすることもできます。

これらの変更を行うには、WordPress ダッシュボードからWPForms ” すべてのフォームページにアクセスするだけです。

フォーム名の下にある「編集」リンクをクリックすると、フォームビルダーが再度起動します。

上記のプロセスに従って、フォームフィールドをカスタマイズしたり、新規フィールドを追加したりすることができます。

変更が終わったら、「保存」ボタンをクリックするだけで、あなたのビジネスサイトやブログに自動的に外観が表示されます。

電卓フォームの入力内容の表示

誰かがあなたのサイトのフォームに入力すると、WPFormsは自動的にその入力をWordPressのデータベースに保存します。これにより、フォームの使用状況を確認したり、訪問者のお問い合わせ情報を表示することができます。

この情報を見るには、WordPress ダッシュボードのWPForms ” Entriesページに行き、’Form Name’ セクションまでスクロールダウンするだけです。

その後、電卓フォームをクリックして、エントリーを表示する。

ページ上のすべてのフォームエントリーのリストが開きます。ここから、丸いアイコンをクリックして、エントリーを既読にすることができます。

また、各エントリーの横にある「表示」リンクをクリックすると、メール・アドレス、電話番号、注文項目、送料割引など、フォームの詳細をすべて表示することができます。

WordPressダッシュボードにアクセスできない人とフォームのデータを共有したい場合があります。例えば、WordPress の開発者を経営していて、クライアントのために複数のサイトを管理しているような場合です。

WPFormsでは、上部にある’Export All’リンクをクリックすることで、すべてのデータをCSVまたはXLSXファイルとしてエクスポートすることができます。

新しい画面が開きますので、データをエクスポートしたいフォームフィールドをすべて選択してください。その後、「エクスポートファイルのダウンロード」ボタンをクリックして、フォームデータをXLSXファイルとして保存します。

ボーナス: Formidable Formsで複雑なカスタムカリキュレーターを作る

WordPress サイトでより複雑な電卓を作成したい場合は、Formidable Forms を使うことをおすすめします。これは高度なフォームプラグインで、ドラッグアンドドロップビルダー、テンプレート、ダイナミックフィールドを備えています。

さらに、このプラグインは、数式、条件付き計算、数値の書式設定などの高度な計算を行うことができ、優れた電卓ビルダーとなっています。

あなたは、パーセント電卓、価格電卓、ローン電卓、年齢電卓、生命保険電卓、複利電卓のような電卓の異なるタイプを作成するためにプラグインを使用することができます。

例えば、オンラインでコースを販売しているのであれば、ROI計算フォームを追加して、コースを購入することでユーザーがどのように収入を増やすことができるかを示すことができます。

Formidable Formsのその他の機能には、条件付きロジック、進捗インジケータ、複数ページのフォーム、ユーザーがフォームに素早く記入できるようにするChatGPTフィールドなどがあります。

Formidable Formsは様々なメールマーケティングサービスと統合することができ、あなたのメールリストを増やすことができます。詳しくはFormidable Formsのレビューをご覧ください。

この投稿がWordPressでカスタマイザーを追加するのにお役に立てば幸いです。WordPressでコンバージョンをトラッキングするためのステップバイステップガイドや、WordPressのお問い合わせフォームプラグインのトップピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.