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

実装方法

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

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

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

Untitled

[🌐ブラウザから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]'
    })
})

注意点