WordPressサイトでの支払い手続きを、より簡単、迅速、そしてユーザーフレンドリーにしたいと思いませんか？Forminatorを使ったWordPressのマルチステップ決済フォームを使えば、ユーザーをステップバイステップで決済プロセスへと導く、洗練されたインタラクティブなフォームを作成できます。サービスベースのウェブサイト、コース登録、イベント予約、あるいはシンプルなeコマースのニーズに最適です。.
Forminator の無料バージョンには、ドラッグ アンド ドロップ フィールド、動的な支払い方法、Stripe サブスクリプション フォームなどの強力な機能が満載されており、初期フォームの読み込みの修正、計算エラーの修正、無効な Stripe キーの修正、ユーザー ログイン フォームの修正、Google Sheet 統合の修正などの一般的な問題も修正されています。.
このブログでは、Forminator を使用して WordPress で独自のマルチステップ支払いフォームを設定する方法について説明し、すべてがスムーズに実行されるようにするための重要な修正点と機能を紹介します。.
支払いフォームに Forminator を使用する理由
Forminator は、初心者でもカスタム支払いフォームを驚くほど簡単に作成できる、強力で使いやすい WordPress フォーム ビルダーです。
600,000 を超えるアクティブインストールを誇り、リード生成からオンライン決済や登録まで、あらゆる業界のサイト所有者から信頼されています。.
Forminatorの特徴は、その汎用性です。支払いフォーム、登録フォーム、ログインフォーム、アンケート、クイズなど、幅広い種類のフォームを提供しています。.
StripeとPayPalのサポートが組み込まれているため、追加のプラグインや複雑な統合を必要とせずに、サイトから直接、1 回限りの支払い、サブスクリプション、または寄付を安全に収集できることです。
Forminatorは複数ステップのフォーム作成にも優れており、長くて複雑なフォームを、よりユーザーフレンドリーな小さなステップに分割できます。これにより、ユーザーエクスペリエンスが向上するだけでなく、フォームの放棄率も低減できます。.
条件付きロジック、視覚的な進捗状況インジケーター、計算フィールドなどの機能を使用すると、サービスの予約、コースへの登録、製品の販売など、ビジネスニーズに合わせてカスタマイズされた高度な支払いワークフローを作成できます。.
無料のプラグインなので、初期費用なしでこれらの強力な機能をすべてご利用いただけます。支払いフォームを作成するための簡単で柔軟性が高く、最新のソリューションをお探しの企業にとって、Forminatorは最適なツールの一つです。.
比較： Square vs PayPal
カスタム支払いフォームの設定についてサポートが必要ですか?
Seahawk の WordPress エキスパートが、お客様のニーズに合わせて、完全にスタイル設定され、安全でカスタマイズされた、マルチステップの Forminator フォームを構築し、最適化します。.
Forminator Formsを使用してWordPress支払いフォームを作成する手順
Forminator を使用すると、WordPress サイトでシームレスな支払いエクスペリエンスを実現することがこれまで以上に簡単になります。.
機能性、セキュリティ、使いやすさを向上させる高度な機能と重要な修正を備えた動的な支払いフォームを設定する手順を、順を追って見ていきましょう。.
ステップ1：Forminatorプラグインをインストールして有効化する
まず第一に、Forminator プラグインのインストールは迅速かつ簡単です。.
- WordPress ダッシュボードに移動し 「プラグイン」 ⟶ 「新規追加」に移動します。
- 検索バーに「 Forminator 」と入力します。
- [インストール]をクリックし、 [アクティブ化]をクリックし。
Forminatorは60万件以上のアクティブインストールを誇る無料プラグインです。テストダッシュボードの修正、設定ページの修正、手動アクティベーションの修正など、継続的にアップデートされ、安定したパフォーマンスを実現しています。また、フォーム送信の修正とAPIメソッドの修正も搭載されており、スムーズなバックエンド処理をサポートします。.
ステップ2: 新しいフォームを最初から作成する
有効化後：
- Forminator ⟶フォーム⟶新規作成に移動します。
- 最初から始めるには「空白のフォーム」を選択するか、プレビュー フォーム テンプレートの修正オプションのいずれかを使用します。.
フォームビルダーでタイトルとサブタイトルを直接追加できます。カスタムスタイルを適用したり、適切なCSS構文を使用して外観を向上したりできます。.
Forminator は、条件付きで表示されるフィールド (条件付きロジックの修正による) を含む高度なフォームと、マルチサイト登録フォームの修正やコース登録フォームの修正などのさまざまなフォーム タイプをサポートします。.
フォーム ビルダーでは、古いテーブル構造の修正が回避され、多数のアクセシビリティの改善強化が組み込まれているため、フォームが使用可能で準拠していることが保証されます。.
ステップ3: 製品またはサービスの選択フィールドを追加する
このステップでは、製品、プラン、サービスなど、ユーザーが支払う対象をどのように選択するかを決定します。.
選択フィールドの使用 (ソファなどの複数のアイテムの場合) : モダン ソファ、クラシック、リクライニングソファなどの製品オプションの選択フィールドを追加します。
- 複数選択、価格設定を有効にし、計算フィールドの数式修正を使用して合計を自動化します。.
- フォームでは、数値の書式の修正、既定値の修正、同じ行の修正が処理されるようになり、製品リストに最適です。.
ユースケース例：家具販売業者は、異なるカテゴリーごとに複数のフォームを作成し、商品の価格を動的に管理できます。これらのフォームは、フォームの不具合や機能不全などの問題を回避し、支払い関連機能も改善します。
画像付きのラジオ ボタン フィールドの使用 (視覚的な選択用) : ラジオ フィールドを使用して、ユーザーが視覚的に製品を選択できるようにします。
- オプションごとにコーヒーテーブルなどの製品画像をアップロードします。.
- デフォルトの選択を設定し、動的フローに条件付きロジックを使用します。.
同様のタブ修正とアラートボックスのデザイン修正により、ユーザーはよりスムーズなインターフェースを体験できるようになりました。さらに、リッチテキスト編集テキストエリアの修正により、製品のビジュアルを使ったフォーマットされた説明文を入力できるようになりました。.
選択とラジオ: 計算を伴う複数または一括選択には選択を使用します。視覚的な選択と単一選択ロジックが重要な場合はラジオ ボタンを選択します。
Forminator の更新されたビルドでは、PDF 支払いフィールドの修正、PayPal 請求詳細の修正、Google スプレッドシートの接続の修正、既存の Google スプレッドシート ファイル、アップロード ファイルのインライン検証などの問題にも対処しており、あらゆるオンライン支払いシナリオに対応する堅牢なソリューションとなっています。.
次のステップでは、支払いゲートウェイを追加し、条件付きロジックを適用し、安全な秘密キー暗号化の修正と脆弱性セキュリティの修正機能を使用して支払いフォームを完成させます。.
視覚的なチュートリアルをご希望ですか？ Forminator を使用して複数ステップの支払いフォームを作成する方法をステップバイステップで解説するこのビデオを見て、プロセス全体を実際に確認してください。
ステップ4: 顧客の詳細情報を収集する
ユーザーが商品やサービスを選択したら、連絡先と配送先の詳細情報を収集します。整理とユーザーフローを向上させるために、商品選択と個人情報を区切るために改ページを挿入してください。.
追加することを推奨するフィールド:
- 氏名：構造化された入力には、名前フィールド（単なる基本的なテキストフィールドではありません）を使用してください。この高度なフィールドを使用することで、不適切な形式で名前を入力することで発生する、よくあるフォームエラーを回避できます。
- 確認用メールアドレス：組み込みのメール確認オプションをご利用ください。これにより、無効または不正確なデータ修正の問題を防ぎ、配信精度が向上します。また、メールベースの条件付きロジック修正もサポートしています。
- 電話番号：国別のフォーマット設定を保証するため、国際検証を有効にした数値フィールドを追加してください。データの不整合を避けるため、数値フォーマットの修正を必ず含めてください。
- 住所:番地、市、州、国、郵便番号などを入力する複数行の住所フィールドを使用します。
- 配送日時：日付と時刻の選択フィールドを活用します。これらのフィールドは、同じ行の修正とCSS構文エラーの修正により、レイアウトとUXが向上します。
これらの入力では、ユーザーが画像（支払いの証明やデザインの参照など）を添付する必要がある場合、アップロード ファイルのインライン検証もサポートされます。.
ステップ5：支払い回収の設定
支払いステップの前に改ページを挿入して、フォームをきれいに区切ることができます。これにより、ユーザビリティが向上し、乱雑なUIによって発生する送信前エラーの修正が軽減されます。.
支払いフィールド（PayPalまたはStripe）を追加します。Forminatorでは、PayPalまたはStripeのいずれかを選択できる動的な支払い方法を提供しています。お好みに応じて、いずれかの支払い方法を追加してください。
- PayPal については、Forminator は最近、精度を高めるために PayPal 請求詳細の修正を導入しました。
- Stripe では、最新の秘密鍵暗号化修正により、安全な取引が保証されます。
計算フィールドの挿入：このフィールドは、選択されたすべての商品／サービスの価格を動的に合計します。計算フィールドの数式修正がサポートされ、誤ったロジックによる合計値の不一致を回避できるようになりました。
同意チェックボックス：カスタム利用規約のチェックボックスを必ず含めてください。このフィールドには、デフォルトのフィールドエラーメッセージの修正が適用され、ユーザーが必要な情報を正確に把握できるようになります。
支払いアカウント（PayPalまたはStripe）を接続する：Forminator ⟶ 設定 ⟶ 支払いに移動し、クライアントIDとシークレットキーを入力します。
テスト用のサンドボックスモードと実際の決済用のライブモードを切り替えます。手動アクティベーション修正により、認証情報を再入力することなく安全にモードを切り替えることができます。.
ステップ6：価格設定と計算の設定
製品フィールドと支払いフィールドの準備ができたので、価格を割り当て、フォームの動的価格設定のロジックを構成します。.
手順:
商品フィールドで計算を有効にする:各フィールド (選択、ラジオボタン、チェックボックス) に移動し、「計算を有効にする」をオンにします。各オプションに数値を割り当てます。
価格の割り当て:次のような値を追加します:
- モダンソファ: $500
- クラシックソファ: $350
- リクライニングチェア: $600
計算フィールドの設定：計算フィールドを追加します。数式ビルダーを使用して、選択した商品の価格を合計します。更新されたロジックエディターにより、誤ったデータの修正やAjax送信方法の修正に関する問題を回避できるようになりました。
フィールド名の変更：計算フィールドに「合計金額」や「今すぐ支払可能」など、わかりやすいラベルを付けます。ユーザーの混乱を防ぎ、空の入力に対するデフォルト値の修正をサポートします。
ステップ7: スタイルとカスタマイズのオプション
マルチステップの WordPress 支払いフォームが機能したら、スムーズでブランド化されたエクスペリエンスを実現するために外観をカスタマイズします。.
Forminatorの外観設定では、「マテリアル」「デフォルト」「テーマから継承」といったレイアウトスタイルを選択できます。さらにデザインを微調整し、フォント、幅、色をカスタマイズして、ブランドイメージに合わせることができます。.
また、セキュリティの改善修正とフォーミネーターアドオンのセキュリティ修正を活用して、フォームのスタイル設定によってパフォーマンスや安全性が損なわれないようにしてください。.
最後に、動作設定では、フォームの送信後に何が起こるかを定義できます。お礼のメッセージ、ページの再読み込みの修正、特定のページへのリダイレクトなどです。.
ステップ8: マルチステップ支払いフォームの公開
フォームを作成してカスタマイズしたら、生成されたショートコードをコピーして公開します。ショートコードブロックを使用して、任意のWordPressページに貼り付けます。「公開」をクリックしてフォームをテストしてください。.
フォームがステップ間でスムーズに遷移し、フィールドが適切に表示され（特に条件付きで表示されるフィールドが修正され）、支払いが遅延なく処理されることを確認します。.
また、フォームのプレビューを閉じる際の修正により、プレビュー モードが適切に終了するようになり、テスト中の混乱を防ぐことができます。.
ステップ9: 追加のヒントと高度な機能
フォームをさらに強化するには、条件付きロジックの使用を検討してください。例えば、特定の商品が選択された場合にのみ配送先フィールドを表示するなど、条件付き表示フィールドの修正により簡単に管理できます。.
複数の受信者を追加する修正を使用してメール通知を設定すると、管理者とユーザーの両方に通知が届きます。ダッシュボードでコンバージョンを追跡したり、送信内容を確認したりできるので、使用状況データの追跡に最適です。.
Mailchimp 、 Slack 、Google Sheetsなどのサードパーティ ツールと統合することもできます
以前にフォームをインポートしたのに表示されない場合は、「フォームのインポート」と「インポートされない」の修正により、フォームが正しく表示されるようになります。これらの統合と、プリセット修正やレポートページ修正の作成を組み合わせることで、ワークフローの監視と自動化に役立ちます。.
ステップ10: 最終プレビューとテスト
公開する前に、マルチステップフォーム全体をプレビューして、次の点を確認します。
- ステップ間のスムーズな移行
- 視覚的な一貫性と応答性
- 支払い処理は問題なく機能します
サンドボックスとライブ決済モードの違いに特に注意し、認証情報を正しく接続して両方の環境をテストしてください。アップロード完了の修正プログラムを使用してファイルのアップロードが正常に完了したことを確認し、超過ファイルの削除修正プログラムと超過ファイルの修正プログラムを使用してファイルサイズ制限を効率的に管理してください。.
また、関連する場合にユーザーに明確なアカウント登録成功メッセージが表示されるようにし、サイトに複数のフォームを埋め込む場合は、複数のフォームが修正され、複数のフォームが修正されて重複や重なりが防止されていることを確認します。.
適切なテストと修正を適用すると、Forminator を使用した WordPress 支払いフォームは完全に機能し、安全になり、コンバージョンが最適化されます。.
詳細はこちら： WordPressサイトに決済ゲートウェイを統合する方法
結論
Forminatorを使ったWordPress決済フォームの作成は、シンプルであるだけでなく、非常に効果的です。直感的なドラッグ＆ドロップビルダー、組み込みの決済連携機能、そして動的なフィールドオプションを備えたForminatorを使えば、コードを1行も書かずに、完全に機能するマルチステップフォームを構築できます。.
いくつかの製品を販売する場合でも、サービスの予約を受ける場合でも、イベントの支払いを収集する場合でも、Forminator はニーズに適応する強力なツールです。.
このプラグインは、計算や改ページの処理から、ページの再読み込みの修正、条件付きで表示されるフィールドの修正、アップロード完了の修正などの一般的な問題の解決まで、フォームの作成とパフォーマンスの両方を管理するユーザーフレンドリーな方法を提供します。.
したがって、支払い収集プロセスを合理化する準備ができたら、今すぐ Forminator を試してみましょう。
カスタムフォームの設定でサポートが必要な場合や、WordPress のチュートリアルをもっと詳しく知りたい場合は、Seahawk の専門チームにご相談ください。一緒に強力なツールを構築しましょう。.
