WordPressのFormgong

Formgongプラグインを入れ、アクセスキーを貼り、接続を試します。ブロックとショートコードはテンプレートを使えます。ホストのメールは使いません。

WordPressで Plugins、Add New を開き、「Formgong」を検索して Install Now、続けて Activate を押します。ディレクトリのプラグインページ: https://wordpress.org/plugins/formgong/。サイトがプラグインディレクトリをブロックしている場合は、https://formgong.com/downloads/formgong-wordpress.zip をダウンロードし、Plugins、Add New、Upload Plugin でアップロードします。WordPress 7.1、WooCommerce、Storefrontテーマで確認し、Plugin Check は通ります。
Settings、次に Formgong を開きます。ダッシュボードのアクセスキーを貼ります。キーは公開です。フォームは送れますが、受信箱は読めません。自分でFormgongをホストしない場合はアドレスを https://formgong.com のままにします。Send a test submission を押します。テストは plugin-test@example.com を使い、接続ウィザードは終えません。終えるには公開ページから送信します。
Formgongブロックを追加してサイドバーでテンプレートを選ぶか、ショートコード [formgong template="aula"] を追加します。template 属性は下の一覧のどのスラッグも受けます。lattice、html-contact、nps、clinic-appointment を含みます。省略すると Settings に保存したテンプレートを使います。スラッグ plain は組み込みの問い合わせフォームを強制します。
フォームには、現在のページアドレスを持つ隠しフィールド _page_url があります。それが http または https で、先頭の www を除いてホストが参照元と一致するとき、Formgongはそれを送信ページとして保存します。別オリジンへのPOSTは参照元にサイトのホームだけを送ることが多いので、本当のページを記録するのはこのフィールドです。
スタイルはフォームに閉じます。クラスを二重にし、all: revert があるので、Storefront、Astra、Twenty Twenty-Five は入力欄を組み替えません。スキンは plain、lattice、aula、shop、clinic です。
公開して公開中のページからテストを送ります。TelegramはFreeを含むどのプランでも即時です。Freeでは送信ごとに1件の宛先へメールが届きます。Proは送信ごとに最大3件、Businessは最大5件へメールします。エディターが formgong/form ブロックに対応していないと言うときは、プラグインを有効にして読み直します。ページが空に見えるときは公開ページを見てください。ブロックはフロントで描かれます。Custom HTMLブロックは下のHTMLを今も置けます。WordPress.comでは、そのブロックのformタグにホスティング付きの有料プランが必要です。

WordPress.orgのFormgong Formgongプラグインをダウンロード (zip)

テンプレートのスラッグ

スラッグはショートコードの template 属性にするか、ブロックと Settings で同じテンプレートを選びます。サイト名はブランドのままです。スターターと業種の名前は、エディターではサイトの言語に従います。

サイトテンプレート

craftline — Craftline
orrery — Orrery
lattice — Lattice
lattice-estate — Lattice Estate
shoal — Shoal
lattice-atelier — Lattice Atelier
soglia — Soglia
halftone — Halftone
ocra — Ocra
arcwell — Arcwell
aula — AULA
goldleaf — Goldleaf
quell — Quell
kavelle — Kavelle
burrow — Burrow
selune — Selune
brightmoss — Brightmoss
averin — Averin
sorrel — Sorrel
odera — Odera
tamsa — Tamsa
fernlow — Fernlow
stilla — Stilla
somna — Somna

スターターのレイアウト

html-contact — HTMLの問い合わせフォーム
ajax-contact — AJAXの問い合わせフォーム
tailwind-contact — Tailwindの問い合わせフォーム
modal-contact — ポップアップの問い合わせフォーム
dark-contact — ダークモードの問い合わせフォーム
minimal-contact — 最小の問い合わせフォーム
ai-builder — Lovable と Bolt のプロンプト

NPS

nps — NPSアンケートフォーム

業種別フォーム

clinic-appointment — 診察予約フォーム
patient-intake — 初診受付フォーム
insurance-quote — 保険見積もりフォーム
insurance-claim — 保険金請求フォーム
order-inquiry — 注文のお問い合わせフォーム
returns — 返品（RMA）フォーム
wholesale — 卸売のお問い合わせフォーム
real-estate — 物件見学の申し込み
course-enrollment — 講座申込フォーム
salon-booking — サロン予約フォーム
auto-service — 整備予約フォーム
legal-inquiry — 法律相談のお問い合わせフォーム
renovation-estimate — リフォーム見積もりフォーム
job-application — 求人応募フォーム
event-registration — イベント参加申込フォーム
catering — ケータリング依頼フォーム
tour-booking — ツアー予約フォーム
fitness-trial — ジム体験予約フォーム
saas-demo — 法人向けデモ依頼フォーム
newsletter-signup — ニュースレター登録フォーム
customer-feedback — お客様アンケート（感想）フォーム
customer-survey — 顧客アンケートフォーム
rsvp — 出欠確認（RSVP）フォーム
support-request — サポート依頼フォーム
waitlist — ウェイトリスト登録フォーム

HTML

<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="ja">
  <label>お名前 <input type="text" name="name" autocomplete="name" placeholder="山田 太郎" required></label>
  <label>メールアドレス <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>メッセージ <textarea name="message" placeholder="ご用件をご記入ください" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>この欄は空のままにしてください<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">送信</button>
</form>

WordPress の問い合わせフォーム →

キーを取得