Flask WTF forms adding a glyphicon in a form field
<p>I have a Flask Wtf form as follows:</p>

<pre><code>class URL_Status(Form):
    url = URLField("Enter URL",
                       validators=[url(), DataRequired()],
                       render_kw={"placeholder": "http://www.example.com"},)
    submit = SubmitField('Search', render_kw={"onclick": "loading()"})
</code></pre>

<p>now I would like to add a bootstrap glyphicon in the input filed i.e. 'url'. As far as I know from this <a href="http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box">link</a>. We need to write the code as follows:</p>

<pre><code>&lt;div class="form-group has-feedback"&gt;
    &lt;label class="control-label"&gt;Username&lt;/label&gt;
    &lt;input type="text" class="form-control" placeholder="Username" /&gt;
    &lt;i class="glyphicon glyphicon-user form-control-feedback"&gt;&lt;/i&gt;
&lt;/div&gt;
</code></pre>

<p>When I call the form in HTMl my html creates all the code except this line:</p>

<pre><code>&lt;i class="glyphicon glyphicon-user form-control-feedback"&gt;&lt;/i&gt;
</code></pre>

<p>Any suggestions how can I add this line from my class 'URL_Status' so that I am able to see a glyphicon with my input field. Thanks</p>

<p>I haven't used wtforms in a while. I think you need a custom widget:</p>

<pre><code>class CustomURLInput(URLInput):
    ...
    def __call__(self,....):
        ...
</code></pre>

<p>Take a look at this <a href="https://github.com/wtforms/wtforms/blob/9be964158fbcd1af52b345451bbd14751127dd37/wtforms/widgets/core.py#L159" rel="nofollow">https://github.com/wtforms/wtforms/blob/9be964158fbcd1af52b345451bbd14751127dd37/wtforms/widgets/core.py#L159</a>
for details.</p>

<p>and your url field:</p>

<pre><code>url = URLField(
    "Enter URL",
    validators=[url(), DataRequired()],
    render_kw={"placeholder": "http://www.example.com"},
    widget=CustomURLWidget()
)
</code></pre>

<p>Or you can do it in your template.</p>

python html twitter-bootstrap flask wtforms