商品と価格を並べるだけで、2通りの注文フォームが手に入ります。合計がリアルタイムで計算され、自分のフォーム受信先に送信されるコピー可能なHTMLと、印刷できる紙の注文用紙です。
各商品と価格を追加し、集めたいお客様の情報を選び、フォーム受信先のアドレスを貼り付けます。数量入力欄と合計の自動計算が付いた注文フォームのHTMLが作成され、そのままサイトに組み込めます。さらに、同じリストから作られた印刷用の紙の注文用紙も手に入り、マルシェ、イベント、電話注文に使えます。
作成されたフォームが送信する内容
小規模な販売者の多くは、本格的なオンラインストアを必要としていません。年末年始の予約注文を受けるパン屋、野菜セットを販売する農家、チームウェアを販売するクラブに必要なのは、リスト、各商品の横の数量、購入者の連絡先だけです。このツールはまさにそれをシンプルなHTMLで書き出すので、カスタムコードを使えるどのサイトビルダーでも動作します。
フォームのaction属性にあるアドレスへ、method postで送信されます。そのアドレスは、フォームバックエンドサービスや自分のサーバーのスクリプトなど、フォームの送信を受け付けるものでなければなりません。このページが注文を受け取ったり保存したりすることはありません。
合計はoutput要素の中にあり、output要素の内容はフォームと一緒に送信されません。これは意図的です。訪問者はブラウザーで数値を書き換えられるため、販売者は常に数量から金額を計算するべきだからです。
スクリプトがなくてもフォームは送信できますが、合計はコードに含まれる短いスクリプトで計算されます。スクリプトが無効な場合、合計はゼロのままになります。
注文フォームは商品と数量を集めます。予約フォームは日付、時間、サービスを集めます。予約には、予約フォーム作成ツールを使ってください。
はい。コードではof-で始まるシンプルなクラス名を使った小さなstyleブロックを使っているので、ページの他の部分に影響を与えずに色、フォント、余白を変更できます。
受信先が受け取るのは数量であり、信頼できる合計ではありません。このJavaScriptによる小さなサーバー側の例では、自分の価格表から注文の金額を計算し、不明な項目は無視します。
価格は自分の側にあるので、ページを書き換えた訪問者も支払額を変えられません。
フォームのタイトル
通貨記号
フォーム受信先のアドレス（注文の送信先）
商品と価格
商品{n}
価格{n}
商品{n}を削除
商品を追加
任意のお客様情報の項目
配送先住所
備考
プレビュー
{v}の数量
合計
プレビューからは何も送信されません。フォームは入力した受信先アドレスに送信されます。
HTML
HTMLをコピー
紙のフォームを印刷
紙の注文用紙
注文用紙
商品
価格
数量
小計
お名前
電話番号またはメールアドレス
注文合計
無料で始める · クレジットカード不要