新規投稿
フォローする

【フォームブリッジ】 チェックボックスの選択項目の下にそれぞれ説明文を追加したい

フォームブリッジで作成したチェックボックス選択肢にリンク付き説明文を追加したいのですが、実装方法が分かりません。

どのようにカスタマイズしたらできるのか、どうかご教授下さい。

 

1

5件のコメント

Avatar
koichi

杉田 典子さん

こんにちは。

 

以下で各チェックボックスの要素を取得できます。

fb.getElementByCode('チェックボックスのフィールドコード').getElementsByClassName('fields')[0].childNodes[i]

ここに説明文のdiv要素を追加します。

CHECKBOX_DESCRIPTION配列に各説明文を定義しておき、繰り返し処理にすれば簡潔に書けます。


(() => {

    'use strict';

    fb.events.form.mounted = [state => {

        // 説明文の配列
        const CHECKBOX_DESCRIPTION = [
            ['説明文1', 'http://www.yahoo.co.jp/'],
            ['説明文2', 'https://www.google.com/'],
            ['説明文3', 'https://www.bing.com/']
        ]

        for (let i = 0; i < CHECKBOX_DESCRIPTION.length; i++) {
            const el = document.createElement('a');
            el.textContent = CHECKBOX_DESCRIPTION[i][0];    // 説明文
            el.href = CHECKBOX_DESCRIPTION[i][1];    // リンク
            el.setAttribute('target', '_blank');
            el.setAttribute('rel', 'noopener noreferrer');
            el.style.marginLeft = '30px';
          fb.getElementByCode('チェックボックスのフィールドコード').getElementsByClassName('fields')[0].childNodes[i].appendChild(el);
        }

        return state;

    }];

})();
1
Avatar
杉田 典子

ご教授いただき、ありがとうございます。

こちらのコードを参考にして希望通りの動きが出来ました。

0
Avatar
杉田 典子

追加で質問させて頂きます。

スマートフォンで表示する際に説明文&リンクが非表示となってしまいますが、

表示は出来ないのでしょうか。

別のカスタマイズで表示可能でしたら、こちらもご教授頂けると幸いです。

0
Avatar
koichi

「スマートフォン用フィールドの設定」を使われてますか?

この場合はHTMLの要素が変わるため、コードが異なります。

 

前段は省略しますが、

fb.getElementByCode('チェックボックスのフィールドコード').getElementsByClassName('el-button mobile-button el-button--default')[i]

で各チェックボックスの要素を取得できますので、これらに対して説明文の要素をappendChildで追加します。

for (let i = 0; i < CHECKBOX_DESCRIPTION.length; i++) {
    const el = document.createElement('a');
    el.style.display = 'block';
    el.textContent = CHECKBOX_DESCRIPTION[i][0];    // 説明文
    el.href = CHECKBOX_DESCRIPTION[i][1];    // リンク
    el.setAttribute('target', '_blank');
    el.setAttribute('rel', 'noopener noreferrer');
    el.style.marginLeft = '30px';
  fb.getElementByCode('チェックボックスのフィールドコード').getElementsByClassName('el-button mobile-button el-button--default')[i].appendChild(el);
}

0
Avatar
杉田 典子

ありがとうございます。

スマートフォン用は別の要素で取得しなければいけないのですね。

ご教授いただいたコードでやってみます。

0
サインインしてコメントを残してください。