• ガイド
  • Form App

HTMLフォームへの導入方法

Table of contents

  1. Step 1 - Form Appの追加とフォームエンドポイントの取得
  2. Step 2 - form要素のactionにエンドポイントを設定
  3. Step 3 - input要素やtextarea要素で送信したいデータの入力欄を作成します
  4. 動作確認

Step 1 - Form Appの追加とフォームエンドポイントの取得

Appを追加 > タイプを選択して追加 をクリックし、Form App を選択してAppを追加します。
スクリーンショット2022-11-2513.33.03.png

スクリーンショット2022-11-2513.37.12.png

次にフォームを作成します。フォームを作成 ボタンをクリックし、名前を付けてフォームを作成します。
スクリーンショット2022-11-2513.39.19.png

最後に フォーム設定 > セットアップ に移動して、エンドポイントを取得します。
スクリーンショット2022-11-2513.43.21.png

Step 2 - form要素のactionにエンドポイントを設定

Step 1 で取得したエンドポイントを、HTMLのform要素のaction属性に貼り付けます。

下記サンプルコードの {spaceUid}{formUid} には、あなたのスペースとフォームのUIDがそれぞれ入ります。

methodは必ず post としてください

<form method="post" action="https://{spaceUid}.form.newt.so/v1/{formUid}">
</form>

Step 3 - input要素やtextarea要素で送信したいデータの入力欄を作成します

form要素の内部に、送信したいデータに応じてinput要素やtextarea要素を追加します。

input要素, textarea要素には必ずname属性を設定してください。 Form Appは、name属性の値を使って投稿データのスキーマを作成します。

ブラウザ標準の入力UIおよびバリデーション機能を活用したい場合は、type属性やrequired属性などを活用します。

最後に、button要素を追加してtype属性を submit として設定完了です。

<form method="post" action="https://{spaceUid}.form.newt.so/v1/{formUid}">
  <input type="text" name="name" required />
  <input type="email" name="email" />
  <textarea name="body"></textarea>
  <button type="submit">Submit</button>
</form>

動作確認

HTMLをブラウザで開き、フォームに値を入力してSubmitボタンをクリックしてみます。投稿データがForm Appに送信され、受信トレイにて実際に送信されたデータが表示されれば成功です。
スクリーンショット2022-11-2513.58.25.png

NewtMade in Newt