mplodowski / formbuilder-plugin-public

https://octobercms.com/plugin/renatio-formbuilder
https://octobercms.com/plugin/renatio-formbuilder
2 stars 0 forks source link

Use HTML inside label in checkbox #34

Closed alendr closed 1 year ago

alendr commented 1 year ago

Hello,

Is It possible to create checkbox where you have inside label?

Why? In all form you need to have some kind of before submit button: I agree with Terms&Condition, and then you have like:

I agree with Terms&Condition.

Thanks.

mplodowski commented 1 year ago

Hi,

in this case I would duplicate checkbox field type to create custom checkbox. Then you can adjust this custom checkbox markup and add anchor tag like so:

<div class="{{ wrapper_class }}">
    <div class="form-check">
        <input
            id="{{ name }}"
            name="{{ name }}"
            class="{{ class }} form-check-input"
            value="1"
            type="checkbox"
            {{ default ? 'checked' : '' }}
            {{ custom_attributes|raw }}
        >
        <label for="{{ name }}" class="{{ label_class }} form-check-label">
            {{ label }} <a target="_blank" href="/terms">Terms & Conditions</a>
        </label>

        <div data-validate-for="{{ name }}" class="invalid-feedback"></div>

        {% if comment %}
            <div class="form-text">{{ comment|raw }}</div>
        {% endif %}
    </div>
</div>

Now in your form just change field type to your custom checkbox.

alendr commented 1 year ago

Hello,

This i need to duplicate inside your plugin folder updates/fileds ?

Thanks

mplodowski commented 1 year ago

No, everything I wrote can be done in the backend area. Go to Form Builder -> Field Types -> Find checkbox field on the list -> Click Duplicate button.

alendr commented 1 year ago

Aaaa great. I also tested if i duplicated and iside {{ label }} change to {{ label|raw }} its working also.

Thank you!