2019-05-18

Craft CMS の Freeform プラグインを試してみる #craftcms


Craft CMS のフォーム系のプラグインはいくつかあるんですが、とりあえず Freeform プラグインの LIte 版を試してみた。

Freeform plugin for Craft CMS | Solspace
https://solspace.com/craft/fre...

Form系のプラグインとしては

あたりが他にはありそう。最後のはFreeformと同じところが最近作ったものらしい。

結果としては、 Sprout Forms でもよかったのではないか？という気がしたのだけど、管理画面でフォームの項目を管理できて、エントリに設定できるかどうか？というのでとりあえず選んでみた感じ。

Freeform プラグインには Lite 版と Pro 版がある

Freeform には Lite と Pro があって、フィールドの種類やエクスポート形式、条件分岐とかの機能差がある様子。

Freeform plugin for Craft CMS | Solspace
https://solspace.com/craft/fre...

フォームの項目を設定する

とりあえずインストールして、フォームの項目を設定していく。

プロジェクトによってはフォームは自由に追加していくという要件が多いので管理画面でやれるのは便利。

とはいえ、どこまでのパターンを用意できるか？は結局難しいところもあったりしそう。

とりあえず上のキャプチャに見えてるの以外では、このくらいのパターンが用意されている。

ラベルとかは自由に変えられる

設定系

通知先とかの設定は右カラム。

通知先は複数指定できそう。メール用のテンプレートも設定可能。なければ新規に作成できる。設定自体は別画面で行う形式。

メール文面の設定はこんな感じで。

自動返信メールの設定が若干わかりにくいのだけど、フォームのフィールドのうちメールアドレス欄の設定でできる。

ここで Email Template を選ぶことでテンプレートを新たに選ぶ形でやれば問題ない。

Format パターンの選択

フォームの項目がどういう風に出力されるかもいくつかパターンが選べる。
右カラムの Formatting Template のところ。

用意されているパターンはこんな感じ。

とりあえず、今はすでにHTMLがあるパターンなのでどれで出力してもあまり大差なし。

Craft Freeform 2.x - Formatting Templates | Solspace Documentation
http://docs.solspace.com/craft...

ここまでできればとりあえずフォームの項目としては問題なさそう。

フォームの出力調整

今回HTMLはTable の形だったので見よう見まねでやってみた。

<table class="form-table">
<tbody>
{% for row in form %}
    <tr>
        {% for field in row %}
            {% set columnClass = "freeform-column " ~ form.customAttributes.columnClass %}
            {% if field.type == "submit" %}
                {% set columnClass = columnClass ~ " freeform-column-content-align-" ~ field.position %}
            {% endif %}

            <th>{{ field.renderLabel }}{% if field.required %}<i class="required">必須</i>{% endif %}</th>
            <td{% if field.required %} class="error"{% endif %}>
                {{ field.renderInput({
                  class: (field.required ? " form-required" : ""),
                }) }}
                {% if field.required %}<span class="error">必須項目です</span>{% endif %}

                {# FOR FREEFORM PAYMENTS #}
                {% if field.layoutRows is defined %}
                    {% for layoutRow in field.layoutRows %}
                        <div class="freeform-row {{ form.customAttributes.rowClass }}">
                            {% for layoutField in layoutRow %}
                                <div class="{{ columnClass }}">
                                    {{ layoutField.render({
                                        class: "freeform-input",
                                        labelClass: "freeform-label" ~ (layoutField.inputOnly ? " freeform-input-only-label" : "") ~ (layoutField.required ? " freeform-required" : ""),
                                        errorClass: "freeform-errors",
                                        instructionsClass: "freeform-instructions",
                                    }) }}
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                {% endif %}
            </td>
            </tr>
        {% endfor %}
    </tr>
{% endfor %}
</tbody>
</table>

後述する感じで、Matrix にフォームのブロックを追加したのでそのブロックの出力を指定していく形で。

色々ききながらやってて、これだったら必要なフィールドの分用意した方が早かったな、という感想。

Craft Freeform 2.x - Formatting Templates | Solspace Documentation
http://docs.solspace.com/craft...

最後の方にある感じで。マトリックスのフィールド毎にブロックを用意する感じで。

案件とかだとある程度デザインも決まってる中でフォームを量産していくだろうから、これのパターンはとりあえず決まった中になるだろうしその方法でもよさそう。

エントリにフォームを表示するフィールドの設定

フィールドの選択にFreeform Form っていうタイプが追加される。

これを追加することで、エントリ側で追加するフォームを選択することができる。

とりあえずやりたかったのはこれだからよかったよかった、という感じ。

懸念点

英語である

別に使う分には不便ないような気がするのですが、日本語じゃないと拒否反応があるという場合もやはりあり、、、ここは翻訳を開発元に送るなどしてサポートするしかなさそう。

確認画面はない

入力画面、確認画面、完了画面というかんじで、確認画面は必要と言われることが多い時は、JSで対応するとかするしかなさそう。

まぁここは仕方ない。

もう少し触ってみて思いついたら追記していきます＆他のフォームも試してみようと思います。