登録フォームを作成する

このガイドでは、メルマガ登録フォーム付きのLPを作成する手順を説明します。フォーム登録と同時にステップメール配信を開始する構成です。

全体の流れ

配信アカウントを作成
シナリオを作成
ファネル・ステップを作成
フォーム付きLPページを作成
サンクスページを作成

1. 配信アカウントを作成

フォーム登録先となる配信アカウントを作成します。

curl -X POST "https://api.utage-system.com/v1/accounts" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "メルマガ配信",
    "type": "mail"
  }'

レスポンス

{
    "data": {
        "id": "ac_abc123",
        "name": "メルマガ配信",
        "type": "mail"
    }
}

type にはメール配信なら mail、LINE配信なら line、両方なら mail_line を指定します。

2. シナリオを作成

配信アカウント内にシナリオを作成します。シナリオはステップメール等の配信シーケンスを管理する単位です。

curl -X POST "https://api.utage-system.com/v1/accounts/ac_abc123/scenarios" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "無料メール講座"
  }'

レスポンス

{
    "data": {
        "id": "sc_def456",
        "title": "無料メール講座",
        "open_title": null,
        "created_at": "2026-01-01 10:00:00"
    }
}

3. ファネル・ステップを作成

LP用とサンクスページ用の2つのステップを含むファネルを作成します。

# ファネル作成
curl -X POST "https://api.utage-system.com/v1/funnels" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name": "メルマガ登録ファネル"}'

レスポンス

{
    "data": {
        "id": "fn_abc123",
        "name": "メルマガ登録ファネル"
    }
}

# LP用ステップ作成
curl -X POST "https://api.utage-system.com/v1/funnels/fn_abc123/steps" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name": "登録ページ"}'

レスポンス

{
    "data": {
        "id": "st_step01",
        "name": "登録ページ",
        "order": 1
    }
}

# サンクスページ用ステップ作成
curl -X POST "https://api.utage-system.com/v1/funnels/fn_abc123/steps" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name": "サンクスページ"}'

レスポンス

{
    "data": {
        "id": "st_step02",
        "name": "サンクスページ",
        "order": 2
    }
}

4. フォーム付きLPページを作成

フォーム要素を含むページを作成します。フォーム要素は element_types_funnel?include=form で取得できる特殊な要素です。

フォーム要素タイプの確認

curl -X GET "https://api.utage-system.com/v1/element-types/funnel?include=form" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"

フォーム要素の階層構造

フォーム要素は通常の要素と異なり、内部に子要素を持つ特殊な構造です。

section > row > col > form
                       ├── form-input   （item=name: お名前入力欄）
                       ├── form-input   （item=mail: メールアドレス入力欄）
                       └── form-button  （送信ボタン）

form要素には scenario_id の指定が必須です。未指定の場合、フォーム登録が正しく動作しません。

ページ作成

ヘッダーテキスト + フォームの構成でLPを作成します。

curl -X POST "https://api.utage-system.com/v1/funnels/fn_abc123/steps/st_step01/pages" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "メルマガ登録LP",
    "page_title": "無料メール講座｜3日間で学ぶマーケティング入門",
    "pc_width": 800,
    "elements": [
      {
        "type": "section",
        "background_color": "#1a1a2e",
        "padding_top": 60,
        "padding_bottom": 60,
        "children": [
          {
            "type": "row",
            "children": [
              {
                "type": "col",
                "children": [
                  {
                    "type": "text",
                    "content": "<h1 style=\"text-align: center; color: #ffffff;\">無料メール講座</h1><p style=\"text-align: center; color: #cccccc;\">3日間で学ぶマーケティング入門</p>"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "section",
        "padding_top": 40,
        "padding_bottom": 40,
        "children": [
          {
            "type": "row",
            "children": [
              {
                "type": "col",
                "children": [
                  {
                    "type": "text",
                    "content": "<h2 style=\"text-align: center;\">今すぐ無料で受講する</h2><p style=\"text-align: center;\">メールアドレスを入力して登録ボタンを押してください</p>"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "section",
        "padding_top": 20,
        "padding_bottom": 60,
        "children": [
          {
            "type": "row",
            "children": [
              {
                "type": "col",
                "children": [
                  {
                    "type": "form",
                    "scenario_id": "sc_def456",
                    "children": [
                      {
                        "type": "form-input",
                        "item": "name",
                        "input_type": "text",
                        "label": "お名前",
                        "required": 1
                      },
                      {
                        "type": "form-input",
                        "item": "mail",
                        "input_type": "email",
                        "label": "メールアドレス",
                        "required": 1
                      },
                      {
                        "type": "form-button",
                        "action": "form",
                        "content": "無料で受講する",
                        "button_color": "btn-red"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }'

レスポンス

{
    "data": {
        "id": "pg_form01",
        "title": "メルマガ登録LP",
        "content_type": "elements",
        "pc_width": 800,
        "step_url": "https://utage-system.com/p/xxxxx/",
        "page_url": "https://utage-system.com/page/pg_form01"
    }
}

form要素の主要プロパティ

プロパティ	説明
`scenario_id`	登録先シナリオのID（必須）
`children`	フォーム内の子要素（form-input, form-button）

form子要素の種類

要素タイプ	説明
`form-input`	フォーム入力欄。`item`（`name` / `mail` / `phone` / `kana` / `zipcode` 等）と `input_type`（`text` / `email` / `tel` 等）で入力項目を指定。`label`・`required`（0/1）等も指定可
`form-button`	フォーム送信ボタン。`action`（必須、`form`）と `content`（ボタンテキスト）、`button_color`（テーマ。`btn-red` / `btn-green` 等）を指定

フォームの子要素タイプと利用可能なプロパティの詳細は、要素プロパティAPIで types=form,form-input,form-button を指定して取得できます。

5. サンクスページを作成

フォーム登録後に表示されるサンクスページを、次のステップとして作成します。

curl -X POST "https://api.utage-system.com/v1/funnels/fn_abc123/steps/st_step02/pages" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "サンクスページ",
    "page_title": "ご登録ありがとうございます",
    "pc_width": 800,
    "elements": [
      {
        "type": "section",
        "padding_top": 80,
        "padding_bottom": 80,
        "children": [
          {
            "type": "row",
            "children": [
              {
                "type": "col",
                "children": [
                  {
                    "type": "text",
                    "content": "<h1 style=\"text-align: center;\">ご登録ありがとうございます</h1><p style=\"text-align: center;\">ご入力いただいたメールアドレスに確認メールをお送りしました。<br>メールに記載の手順に従って受講を開始してください。</p>"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }'

レスポンス

{
    "data": {
        "id": "pg_thanks01",
        "title": "サンクスページ",
        "content_type": "elements",
        "pc_width": 800,
        "step_url": "https://utage-system.com/p/yyyyy/",
        "page_url": "https://utage-system.com/page/pg_thanks01"
    }
}

完成したファネル構造

メルマガ登録ファネル (fn_abc123)
├── 登録ページ (st_step01)
│   └── メルマガ登録LP (pg_form01)  ← フォーム付き
└── サンクスページ (st_step02)
    └── サンクスページ (pg_thanks01)

登録ページの step_url にアクセスすると、フォーム付きLPが表示されます。フォームからの登録完了後、シナリオ「無料メール講座」の配信が開始されます。

はじめに

ガイド

全体の流れ

1. 配信アカウントを作成

2. シナリオを作成

3. ファネル・ステップを作成

4. フォーム付きLPページを作成

フォーム要素タイプの確認

フォーム要素の階層構造

ページ作成

form要素の主要プロパティ

form子要素の種類

5. サンクスページを作成

完成したファネル構造

次のステップ

エラーハンドリング

APIリファレンス

​全体の流れ

​1. 配信アカウントを作成

​2. シナリオを作成

​3. ファネル・ステップを作成

​4. フォーム付きLPページを作成

​フォーム要素タイプの確認

​フォーム要素の階層構造

​ページ作成

​form要素の主要プロパティ

​form子要素の種類

​5. サンクスページを作成

​完成したファネル構造

​次のステップ

エラーハンドリング

APIリファレンス

全体の流れ

1. 配信アカウントを作成

2. シナリオを作成

3. ファネル・ステップを作成

4. フォーム付きLPページを作成

フォーム要素タイプの確認

フォーム要素の階層構造

ページ作成

form要素の主要プロパティ

form子要素の種類

5. サンクスページを作成

完成したファネル構造

次のステップ