問い合わせデータをAPIで送信する

formタグを使わず、JavaScriptから問い合わせデータを送信する方法です。

formタグのaction属性にカスタムURLをセットする代わりに、APIを使って、問い合わせデータをHyperFormに送信することができます。

実装方法

1. 送信元ドメインの許可設定をする

「HyperFormの管理画面 > フォーム設定 > セキュリティ」

にて「送信元ドメインを制限する」にチェックを入れ、ご自身のサイト(サービス)のドメインを許可してください。

[🌐ブラウザからJavaScript等で送信する場合]
ご自身のサイトのドメインを、HyperFormで許可してください。
そうすることでCORSリクエストで送信されるプリフライトを突破することができます。

[📱ブラウザ以外(ネイティブアプリ、Lambda等)から送信する場合]
任意のドメインを、HyperFormで許可してください。
そしてアプリからHyperFormにデータを送信する時には、そのドメインをOriginヘッダーにセットしてください。
ブラウザ以外のHTTPクライアントではOriginヘッダーの上書きが可能です。

2. API用のエンドポイントにリクエストを送信するコードを書く

APIで実装する場合、送信先エンドポイントは https://hyperform.jp/api/async/{your-form-id}/complete です。

例えばJavaScriptのFetch APIを使って実装する場合、以下のようなコードになります。

const response = await fetch('https://hyperform.jp/api/async/{your-form-id}/complete', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'my name',
        email: '[email protected]'
    })
})

注意点

  • APIで問い合わせデータを送信する場合、HyperForm側でデフォルトで搭載されているreCAPTCHAは無効になります。
  • スパム防止のため、同一のIPアドレスからの問い合わせについて、1分間に5回までのアクセス制限をかけております。
    • 制限に達した場合HTTP 429エラーが出力されます。