Payment Form を使用すると、Stripe や PayPal でのオンライン支払いを受け入れる手間が軽減されます。 支払いと寄付を数分で受け取ります。 製品、サービス、オンラインコースなどを販売します。
支払いページや寄付ページを簡単に作成できます あなたのウェブサイト または ページ を使用して寄付または XNUMX 回限りの支払いを受ける 支払いと寄付 のセクションから無料でダウンロードできます。
また、フォームに必要なフォーム フィールドを構成する機能も提供し、収集されたフォーム データを電子メールで送信する電子メール アドレスを指定することもできます。
すべてのフォーム データも保存され、 設定 > フォーム送信 スタジオの一角。 さらに詳しく.
お問い合わせフォーム経由で送信されたすべてのデータは、お問い合わせフォームの設定で指定された電子メール ID にも転送されます。 あなたの アカウントのメールアドレス がデフォルトとして採用されます。
チェック： アカウントのメール アドレスを変更します。
ここで扱われる内容：
支払いと寄付のセクションを追加
- ページにセクションを追加できます。 既存のページにセクションを追加することも、 新しいページを作成する あなたのウェブサイト内。
- あなたのページで、をクリックしてください 青+アイコン 追加する 新しいセクション あなたのページに。
- 今すぐ セクションカテゴリ 左側にあります。
- 選択する フォーム （1）カテゴリーをクリックし、 支払いと寄付 タブ (2) から選択できます さまざまなレイアウト 支払いと寄付 (3) セクション。
- 任意のセクション レイアウトを選択し、クリックしてページに追加します。
支払いフォームの管理
- ソフトウェアの制限をクリック コンテンツを編集する （1）ボタン。
- 管理するオプションがあります コンテンツ （2） レイアウト （3） 形式 （4） 設定 （5）と、 電子メール通知 とします。
- ヒット Save (7) 変更をフォームに適用します。
コンテンツ
フォームフィールドの管理
[フォーム フィールドの管理] で、訪問者がこのフォームに入力するフィールドを指定できます。
- ソフトウェアの制限をクリック 新しいフィールドを追加 (1) ボタンをクリックしてフォームにフィールドを追加します。
- 編集または削除 (2) すでに追加されているフィールド。
- ドラッグ·アンド·ドロップ （３）フォーム内のフィールドの順序を変更する。
- をセットする 行動喚起ボタンのラベル (4) フォームの場合。
- をクリックすると、 +フィールドを追加 ボタンをクリックするとポップアップが開き、フォームフィールドを選択できます。
- キャプチャ 名 あなたのクライアントの。
- あらゆる小さな情報をキャプチャします。 短いテキスト フィールド。
- 詳細な情報/メッセージは、 ロングテキスト フィールド。
- キャプチャ メール あなたのクライアントの。
- 任意のキャプチャ 数値情報 クライアントから。
- から選択するサービスを追加します 落ちる ウェイ
- 単一選択: サービスのラジオ選択を追加します。
- 複数選択: 複数選択用のチェックボックス フィールドを追加します。
- 加える 日付ピッカー クライアントがあらゆるイベントの日付を選択できるようにします。
- 加える ライン フォームフィールドの間。
- キャプチャ 住所 あなたのクライアントの。
- キャプチャ ウェブサイト あなたのクライアントの。
- キャプチャ 電話 数 あなたのクライアントの。
- 加える 時間 フィールドを使用して、クライアントがイベント時間を自分で指定できるようにします。
- 加える セパレーター フォームフィールドの間。
- その 同意フィールド このオプションを使用すると、ニュースレターの許可を取得し、プライバシーと利用規約に同意できます。
- を使用してクライアントのレビューを取得します 星 階段, 数字のスケール, スマイリースケール.
メールアドレスと金額フィールドは必須フィールドであり、削除できません。
フォームスタイル
- フォームをポップアップとして表示 – これを有効にすると、コールトゥアクションボタンをクリックしたときに、ポップアップウィンドウでフォームが開きます。
- 行動喚起ボタンのラベル – 設定する 行動喚起ボタンのラベル フォーム。
- 見出しポップアップ – フォームを指定してください 見出し、 もしあれば。
- アップロードまたは削除 （１）フォームのフォームイメージ。
- 加える Title (2)、および説明 (3) フォームについて。 説明を追加する前に確認してください この 記事。
見出し
- 見出し – 指定する セクションの見出し (1) [支払いフォーム] セクション。
- ボタンとアイコン – 詳細はこちらをご覧ください ボタンとアイコン とします。
レイアウトの管理
- 以下を行うには、 コンテンツを編集する （1）ボタン。
- 選択する レイアウト (2) タブ。
- まず レイアウト あなたのセクション（3）と Save (4) 変更。
スタイルオプション
- ソフトウェアの制限をクリック コンテンツを編集する (1)ボタン。
- 選択する 形式 (2)タブ。
- セクション要素のスタイルを変更し、 Save (3) お客様の変更。
フォームのデザインは、視覚的に魅力的で使いやすいユーザーエクスペリエンスを実現する上で重要な要素です。
セクションには複数のスタイル オプションがあります。
Form Fields
ピクサ ことができます フォーム 〜へ 完全に カスタマイズ 外観 of フォーム フィールド。 ボーマン スタイリング オプション 適用する 〜へ を フィールド in お支払い フォーム and 与える フォーム 大きい コントロール が の フォーム ルックス and 感じています on ウェブサイトをご覧ください。
- 形状： ウェブサイトの美観に合わせて、入力フィールドの形状（長方形、丸型、丸型、テキストなど）を選択します。
- 塗りつぶし： このトグルを有効にすると、フォーム フィールドに背景の塗りつぶし色が適用されます。
- ベースカラー: 塗りつぶしオプションが有効な場合のフィールドの背景色を設定します。
- 概要： 各フィールドの境界線（アウトライン）のオン/オフを切り替えます。
- アウトラインの色: アウトラインが有効な場合のフィールドの境界線の色を選択します。
- フィールドテキストの色: フォーム フィールド内でユーザーが入力するテキストの色を設定します。
- 高さ： 小、中、大、特大から選択して、フィールドの高さを調整します。
- ラベル： フォーム フィールド ラベルをフィールドの内側に表示するか、外側に表示するかを選択します。
- ラベルの色: フィールド外に配置されたラベルの色を定義します。
- ラベル内側の色: フィールド内に配置されたラベルの色を設定します (プレースホルダー スタイルのラベルに役立ちます)。
- フィールド間の間隔: スライダーを使用して、各フォーム フィールド間の垂直間隔 (ピクセル単位) を設定します。
アラインメント
- フォームコンテンツの水平方向の配置を管理します 水平方向の配置 とします。
- フォームコンテンツの垂直方向の配置を管理します。 垂直方向の配置 とします。
テキスト
- 以下を行うには、 文字スタイルの変更 (1) ボタンをクリックしてアクセスします。 設計 セクションと フォントのサイズとスタイルを管理します。
- 特定します Title (2) フォームのフォント スタイル。
- 特定します 詳細説明 (3) フォームのフォント スタイル。
間隔
- 特定します 画像の幅 (1) パーセントで表した画像。
- 特定します 画像とテキストの間のスペース (3) パーセント。
- 特定します タイトルの下のスペース (4) パーセント。
見出し
- 水平に揃える セクションの見出しテキスト。左、中央、右に設定できます。
- 有効/無効にする 分配器 セクションの見出しとセクションのコンテンツの間。
- をセットする 仕切りの厚さ (ピクセル単位)。
- 特定します 仕切りの色 カラーピッカーから。
- 選択する ディバイダースタイル をドロップダウンから選択します。
- をセットする 見出しの幅 セクション タイトルの表示幅を定義します。最小値は 50% です。
- 特定します 見出しの下のスペース セクション内（px単位）。
画像
- 画像の切り抜き： 選択する Iメイジクロップ リスト項目の場合。 画像を正方形、円形、横長、縦長、オリジナルに設定できます。
- コーナー半径: リスト項目の各辺に共通の角半径または異なる角半径を選択し、数値 (px) を設定します。 Cまたは半径 リスト項目の画像。 もっと知る.
- ホバーアニメーション: に選択します。 セクションの画像をアニメーション化する トグルを有効にしてホバー時に表示します。 ライブページでこの機能を確認してください.
- アニメーションスタイル: 選ぶ アニメーションスタイル カーソルを合わせたときに画像が表示されます。
- シェイプマスク: このトグルを有効にすると、画像リスト セクションの画像にシェイプ マスクが適用されます。有効にすると、選択したシェイプによって画像がそのフォームに視覚的にクリップされます。
- 形状を選択: 画像に適用するさまざまな定義済み形状から選択します。これにより、丸型、ダイヤモンド型、ドロップ型などのユニークな形で画像を表示して、コンテンツをクリエイティブにスタイリングできます。
使い方 コーナー半径 フィールドでは、さまざまな形状のリスト アイテム イメージを作成できます。 ここで 500 px を指定すると、画像は円形で表示されます。
- 分割コーナーを選択した場合は、コーナーごとに異なるコーナー半径を設定できます。
イメージボーダー
- 境界線の有効化/無効化 トグルを切り替えて画像の周囲を移動します。
- を選択してください 共通の境界線 画像のすべての側面に、または 別々に境界線を付ける それぞれの側に。
- 特定します 幅 国境の。 0 に設定すると、境界線は表示されません。画像の各辺の境界線の幅を個別に設定するオプションもあります。
- まず 境界線の色 カラーピッカーから。
- 優先するものを選択してください ボーダースタイル をドロップダウンから選択します。
- を決定する モバイルの境界線の幅 デスクトップ用に選択された幅に合わせて配置します。
ポップアップボタン
これらのスタイル オプションはポップアップ ボタン用であり、ボタンをクリックすると支払いフォームが開きます。
- ボタンのサイズ - 小、中、大などのオプションからボタンのサイズを選択します。
- ボタン上のスペース – ボタンの上の垂直間隔を調整します (パーセンテージ単位)。
- ボタンのスタイル – デフォルトやカスタムなど、ボタンのスタイルを選択します。
- ボタンの色 – ボタンの色のスタイルを選択します。オプションには、「デフォルト」、「反転」、「カスタム」があります。
- ボタンテキスト – ボタンのテキストの色をカスタマイズします。
- ボタンの背景 – ボタンの背景色を選択します。
フォームボタン
これらの設定により、ページのデザインやレイアウトに合わせてフォーム送信ボタンをカスタマイズできます。
- ボタンのサイズ - ボタンのサイズ (小、中、大) を選択します。
- ボタン上のスペース – ボタンの上の垂直間隔を調整します (パーセンテージで指定します)。
- ボタンのスタイル – デフォルトやカスタムなど、ボタンの全体的なスタイルを選択します。
- ボタンの色 – ボタンの色のスタイルを設定します。オプションには、「デフォルト」、「反転」、「カスタム」があります。
- ボタンテキスト – ボタンに表示されるテキストの色をカスタマイズします。
- ボタンの背景 – ボタンの背景色を選択します。
- ボタンの配置 – ボタンの配置 (左、中央、右) を選択します。
- ボタンの幅 – ボタンの表示幅を調整します。オプションには、「デフォルト」、「大」、「特大」、「全幅」があります。
見出しボタン
これらの設定は、セクションの見出しとともに配置されるボタンの外観と間隔を制御します。
- ボタンのサイズ - ボタンの全体的なサイズ (小、中、大) を選択します。
- ボタン間のスペース – 複数のボタン間の間隔を調整します (vw で測定)。
- ボタンの上のスペース – ボタン上の垂直間隔を設定します (パーセンテージで測定)。
- ボタンの幅 – ボタンの表示幅を選択します。「デフォルト」、「大」、「特大」、「全幅」から選択できます。
- テキストリンクのサイズ – ボタンに関連付けられたテキスト リンクのフォント サイズを指定します (px 単位で測定)。
- 画像ボタンのサイズ – 画像ベースのボタンのサイズを調整します (px 単位で測定)。
見出しソーシャルアイコン
フォーム内のソーシャル共有アイコンを表示およびカスタマイズします。
- アイコンサイズ – ソーシャル アイコンのサイズを調整します (px 単位で測定)。
- アイコンの種類 – クラシック、ソリッド、アウトラインなどのオプションなど、アイコンのスタイルを選択します。
- アイコンの色 – アイコンの色を選択します。オプションには、「リンクテキスト」、「カスタム」、「ブランドカラー（ソーシャルプラットフォームのオリジナルカラー）」があります。
- アイコンの背景色 – 視認性とスタイルを向上させるために、アイコンのカスタム背景色を設定します。
設定
- 以下を行うには、 コンテンツを編集する （1）ボタン。
- フォーム設定をカスタマイズするには 設定 (2)タブと Save (3) お客様の変更。
フォーム名
- 名前を入力してください 支払いフォームを特定する Pixpa Studio内。この名前はウェブサイトの訪問者には表示されません。
支払方法
- フォームの支払方法を更新できます。
- PaypalとStripeからお選びいただけます。 インドのお客様は Razorpay と PayUMoney を追加することもできます さらに詳しく.
一度に XNUMX つの支払い方法のみをフォームに関連付けることができます。
提出後のアクション
送信後のアクションとして、次のことを選択できます。 成功メッセージを表示する （1）または URLにリダイレクト とします。
の場合 成功メッセージを表示する （1）：
- 特定します 支払い成功メッセージ（2） ユーザーがフォームを送信した後に表示されるものです。
- 任意のスクリプトを追加することもできます 後払い成功 HTML (3) ボックス。
- の場合 RURLへのeダイレクト設定（⚙️）アイコンをクリックすると、任意の内部/外部ページを指定できます。 もっと知る.
フォームデータの同期とエクスポート
- フォームデータをMake.comに送信する。 さらに詳しく.
- フォームデータをZapier.comに送信する。 さらに詳しく.
- フォームデータをCSVファイルとしてエクスポートします。 さらに詳しく.
電子メール通知
ここから、フォームの送信が成功したときにウェブサイト所有者として受け取る通知のメールの件名をカスタマイズできます。さらに、ユーザーまたは顧客がフォームを送信して支払いを行った後に送信される成功メールをパーソナライズすることもできます。
- 有効にします ウェブサイトの所有者へのメール 支払いフォームが送信されるたびにメール通知を受け取るオプション。
- 対象分野支払いフォーム送信メールの件名を指定してください。 {WEBサイト} 件名にウェブサイト名を自動的に含めるための変数です。複数のウェブサイトを管理している場合に特に便利です。
- メールフィールド支払いフォームの通知を受け取りたいメールアドレスを最大3つまで入力してください。
- 成功を有効/無効にする 顧客へのメール オプションを選択します。
- 特定します 件名 成功メールの.
- 追加する メール本文 成功メールに、{TRANSACTION_ID}、{AMOUNT}、{NAME} などの変数を追加できます。これらの変数は取得され、メールで送信されます。
支払いの確認と支払い方法の追加
- に行きます 支払いと寄付 (1) のセクションから無料でダウンロードできます。
- ここでは、受け取ったすべての支払いを表示できます。
- チェック 日付、受取金額、メール (2) 支払いの。
- 任意のフォーム送信をクリックします (3) 支払いの取引詳細を表示します。
- などのトランザクションの詳細を確認します トランザクション ID、名前、使用された支払い方法、および支払い方法のトランザクション ID 右の引き出しから。
- すべての支払いの詳細を CSV形式 (4).
支払方法を追加
- に行きます 設定 セクション (1) をクリックし、 支払いを受け入れる オプション (2) を左側のメニューから選択します。
- 次に、有効な支払い方法と無効な支払い方法を確認します。
- ソフトウェアの制限をクリック 有効化ボタン (3) 支払い方法を有効にする、またはその逆。
- つながり、 Stripe or ペイパルビジネス。 インドのお客様も有効にすることができます ペイモニー or ラゾルペイ.
支払いと寄付 プレミアム機能 でのみ使用できます。 プロフェッショナルプランとアドバンスプラン.
ライブの支払い/寄付フォームは次のとおりです。
フォームでのスパマーを減らすために、Google キャプチャ セキュリティがフォームで自動的に有効になります。