Formatting flask-wtf submit button using bootstrap

Question

I'm using jinja to render a flask-wtf submit button as follows:

{{ wtf.form_field(form.submit) }}

This results in a button formatted in btn-default bootstrap format (white). I'd like to change this to btn-success bootstrap format (green).

How can I achieve this?

Snips

Answer 1

I presume you are also using flask-bootstrap.

On the flask-bootstrap Jinja2 macros you have:

    {% call _hz_form_wrap(horizontal_columns, form_type, True, required=required) %}
    {{field(class='btn btn-%s' % button_map.get(field.name, 'default'), **kwargs)}}
    {% endcall %}

You should use if you can the button_map to do it [see details in comments below]

Repudiation

I am indeed also using flask-bootstrap. I'm afraid I do not follow your suggestion though. Can you elaborate a bit further please? – Snips

please see if this helps on the docs: pythonhosted.org/Flask-Bootstrap/basic-usage.html#quick_form or pythonhosted.org/Flask-Bootstrap/basic-usage.html#form_field – Repudiation

Answer 2

As suggested by @dpgaspar the solution was to use button_map as follows:

{{ wtf.form_field(form.submit, button_map={'submit':'success'}) }}

Snips

what is 'submit' referencing in the button map dict? – Vivisectionist

correct me if i am wrong but it is the "name" attribute. i feel like flask-bootstrap docs are kind of weak here... – Vivisectionist

Answer 3

If you are using wtf.quick_form, use the form like this.

{{ wtf.quick_form(form, button_map={'submit':'success'}) }}

Staford

Answer 4

If you are using flask-bootstrap, use the form with button_map as suggested by @dpgaspar,

For whole form - wtf.quick_form:

{{wtf.quick_form(delete_form, button_map={'name_of_field': 'danger'})}}

For individual field, wtf.form_field:

{{wtf.form_field(delete_form.delete, button_map={'delete': 'success'})}}

Flask-Bootstrap official documentation says:

button_map – A dictionary, mapping button field names to names such as primary, danger or success. Buttons not found in the button_map will use the default type of button.

Rocambole