Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

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

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

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

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

Create A Custom Calculator In WordPress

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

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

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

An example of a BMI calculator

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

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

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

An example of a car payment calculator

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

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

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

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

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

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

:WPFormsには無料プランもあります。ただし、Calculationsアドオンをアンロックするにはプラグインのプロバージョンが必要です。

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

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

WPForms license key

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

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

Install and activate the Calculations addon

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

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

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

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

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

Choose the shipping discount calculator form template

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

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

Calculator form template will open in the form builder with form fields on the left

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

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

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

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

Add the price, image, and name for the items that you want to sell in the form

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

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

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

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

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

Change the shipping discount value

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

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

Save your custom calculator form

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

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

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

Add calculator form on a page

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

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

Shipping discount calculator form preview

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

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

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

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

Click the Edit link under form name

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

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

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

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

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

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

Choose the custom calculator form on the entries page

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

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

View the calculator form entries

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

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

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

Choose the form fields whose data you want to export as a CSV file

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

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

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

Formidable forms

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

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

Adding a custom calculator to WordPress

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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

2件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Anne says

    Wanted to create a BMI calculator on my health website too, but doesn’t have the WP Forms Pro version. Plan to buy in the future and follow your easy guide. Well, you guided me very well and convinced me to buy this plugin.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。