Set WTForms submit button to icon

Question

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.

Barrelhouse

Answer 1

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)

Sanferd

Answer 2

if you want to render a submit field with an image icon instead of submit label text, in your html template, you can do something like this:

(assuming your form field name is isubmit):

<button type="submit" style="border: 0 none; background: none;" name="isubmit" value="x"><img src="/static/previousButton.png"></button>

note: value has to be non-empty, but it doesn't matter what it is; only img will be displayed.

Concordant

Answer 3

I had a similar problem, so, you can do this to use wtforms, and simply call {{ render_temple(form) }} in html to get this result.

class InlineButtonWidget(object):
    def __init__(self, class_=None):
        self.class_ = class_

    def __call__(self, field, **kwargs):
        kwargs.setdefault('type', 'submit')
        kwargs["class"] = self.class_
        title = kwargs.pop('title', field.description or '')
        params = html_params(title=title, **kwargs)

        html = '<button %s>%s</button>'
        return HTMLString(html % (params, escape(field.label.text)))


class InlineButton(Field):
    widget = InlineButtonWidget()

    def __init__(self, label=None, validators=None, text='Save', **kwargs):
        super(InlineButton, self).__init__(label, validators, **kwargs)
        self.text = text

    def _value(self):
        if self.data:
            return u''.join(self.data)
        else:
            return u''

Usage:

class BookForm(FlaskForm):
    text = Markup('<i class="fas fa-sign-in-alt"></i> Submit')
    submit = SubmitField(text, widget=InlineButtonWidget(class_="btn btn-info")) #This class_ param it's applied in the class of the button in HTML.

Output:

Html code

Display

My reply is based on this post WTForms creating a custom widget.

Allonym