Set WTForms submit button to icon

python flask jinja2 wtforms iconic
taylormade201 picture taylormade201 · Aug 25, 2016 · Viewed 9.5k times · Source

I want a submit button that displays an icon rather than text. The button is a field in a WTForms form. I am using Bootstrap and Open Iconic for styling and icons. How do I set the submit field to display an icon?

class MyForm(Form):
    submit = SubmitField('')

{{ form.submit }}

This post refers to an icon method, but I can't find any more information on it.

Answer

davidism picture davidism · Aug 25, 2016

The example you linked is using macros provided by Flask-Bootstrap. The macros make it easy to construct forms with Bootstrap, but might not be flexible. For example, they probably don't support using Open Iconic icons instead.

Typically, you don't need to specify the submit button in the form, as it doesn't contribute useful data. Render the submit as a button in the template manually and set whatever content you need.

<button type=submit class="btn btn-primary"><span class="oi oi-check" title="Submit"></span></button>

If you do need a SubmitField in your form, you can set the label to a Markup string with the HTML. The Markup is needed to tell Jinja it's safe to render without escaping.

from markupsafe import Markup
submit_value = Markup('<span class="oi oi-check" title="Submit"></span>')
submit = SubmitField(submit_value)

Related questions

Render an editable table using Flask, Jinja2 templates, then process the form data returned

I'm using Flask and Jinja2 and I need to make an editable table with multiple rows. This is what the table will look like: And here's HTML for that: <form action="/support/team-members-update" method="post"> <table> &…

Read More
Disabled field is considered for validation in WTForms and Flask

I have some fields in page disabled as for example:(using jinja2 templating system) <html> <body> <form action="" method=POST> {{ form.name(disabled=True) }} {{ form.title }} -- submit button -- </form> </…

Read More
Add input fields dynamically with wtforms

I'm not quite sure how approach this matter. I hope i get there. For example I have a table full of addresses on a page. The count of these are dynamic (could be 5 or 10 or any other count). And I …

Read More