Example Form

class ExampleForm(FlaskForm):
    date = DateField(description="We'll never share your email with anyone else.")  # add help text with `description`
    datetime = DateTimeField(render_kw={'placeholder': 'this is a placeholder'})  # add HTML attribute with `render_kw`
    datetimelocal = DateTimeLocalField()
    time = TimeField()
    month = MonthField()
    color = ColorField()
    floating = FloatField()
    integer = IntegerField()
    decimalslider = DecimalRangeField()
    integerslider = IntegerRangeField(render_kw={'min': '0', 'max': '4'})
    email = EmailField()
    url = URLField()
    telephone = TelField()
    image = FileField(render_kw={'class': 'my-class'}, validators=[Regexp('.+\.jpg$')])  # add your class
    option = RadioField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
    select = SelectField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
    selectmulti = SelectMultipleField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
    bio = TextAreaField()
    search = SearchField() # will autocapitalize on mobile
    title = StringField() # will not autocapitalize on mobile
    secret = PasswordField()
    remember = BooleanField('Remember me')
    submit = SubmitField()

Render a form with render_form

{{ render_form(form) }}

Custom buttons with button_style and button_size

{{ render_form(form, button_style='success', button_size='block') }}

Custom buttons with button_map

{{ render_form(button_form, button_map={'submit': 'primary', 'cancel': 'secondary', 'delete': 'danger'}) }}

Render a form field with render_field

{{ render_field(form.username) }}
{{ render_field(form.password) }}
{{ render_field(form.remember) }}
{{ render_field(form.submit) }}

Render a form with render_form_row

{{ render_form_row([form.username, form.password]) }}
{{ render_form_row([form.username, form.password], col_map={'username': 'col-md-6', 'password': 'col-md-4'}) }}
{{ render_form_row([form.username, form.password], col_map={'username': 'col-md-2', 'password': 'col-md-8'}) }}
{{ render_form_row([form.username, form.password], col_class_default='col-md-2') }}
{{ render_form_row([form.remember]) }}
{{ render_form_row([form.submit]) }}

Test FormField and FormField

Telephone Form

IM Form

Contact Form