Wraptasを使って問い合わせフォームを設置する方法

Wraptasのコードブロックを使ったフォーム設置方法です。

設定方法

  1. Wraptas管理画面 > サイトデザイン編集 > コンテンツエリア >「コードブロックを使ったHTML挿入機能をONにする」にチェックを入れる
  2. Notion側でコードブロック（ /code ）を使ってフォームをマークアップする
  3. formタグのaction属性に、HyperFormが発行したカスタムURLをセットする
  4. コードブロックの言語にHTMLを設定する
コード埋め込みでのHTML挿入機能と、自動的にWraptasのサイト上でそのままHTMLとして入力されます。 injectHtml injectHtml__codeBlock というクラス名のdivで囲まれた状態になります。 HTML のコードがすべて自動で変換されるので、実際にサンプルコードなどでHTMLを表示しておきたい場合には Markup などに変更して利用してください。 ...demo.wraptas.site

サンプル

<form method="post" action="https://hyperform.jp/api/yourid">
  <label>お名前</label>
  <input name="お名前" type="text" required>
  <label>メールアドレス</label>
  <input name="email" type="email" required>
  <label>お問い合わせ内容</label>
  <textarea name="お問い合わせ内容"></textarea>
  <input name="個人情報の利用についての同意" id="consent-check" type="checkbox" value="同意します" required>
  <label for="consent-check">個人情報の利用についての同意</label>
  <button type="submit">送信</button>
</form>