WebflowでCMSデータをラジオボックスで送信する方法

Webflow
CMS
Embed
lowコード
Web

今回は、Webflowのフォームの中でラジオボタンのバリューをCMSアイテムと紐付けする方法について説明します。

自分は、ユーザープロフィールのカテゴリーの選択や日程設定に使っていますが、基本的にCMSデータを送信する必要がある時、幅広いシチュエーションで使えます。

最初は、出来上がっているサイトをみてみましょう。

このフォームにラジオボックスがあって、それらの名前はCMSコレクション「カテゴリー」と全く一緒です。

実際にコレクションに新しいアイテムを入れると、その名前のもう一つのラジオボックスが自動的に増えます。


その仕組みを詳しく見てみましょう。

一般的に、Webflowでラジオボックスをフォームに入れると、そのバリューをCMSと紐づくことができません。

なので、ある技を使います

まずは、コレクションリストを入れます。そして、コレクションアイテムの中にHTML Embedを入れます。

HTMLでこのようなコードを書きましょう:

HTMLコード:

<Label>

<input type="radio" class="category-radio" name="category" id="{Slugにしました}" value="{送信したいデータ}">

  {表示名}

</Label>

{ }の代わりに「Add Field」のボタンを使って自分のコレクションのデータを入力しましょう。


このHTMLを保存すると、ラジオボックスとして表示されます。


WebflowのフォームのラジオボタンをCMSと紐づいてダイナミックなデータを送信する方法について説明します。

関連チュートリアル