oTree Forum >

Add text to the input in a Formfield

#1 by Leon

Hey everyone :)

I have a float form field and I want a percentage sign that is displayed within the form field after the participant types in a number. Is there any way to implement that easily?

#2 by BonnEconLab (edited )

You can do so by using a raw HTML widget, see https://otree.readthedocs.io/en/latest/forms.html#raw-html-widgets.

Assuming that your FloatField is called “percentage”, the following should do the job:

<div class="mb-3 _formfield">
    <label class="col-form-label" for="id_percentage">Please enter a percentage</label>
    <div class="controls input-group">
        <input type="text" class="form-control" inputmode="decimal" id="id_percentage" max="100" min="0" name="percentage" required="" value="">
        <span class="input-group-text">%</span>
    </div>
    {{ formfield_errors "percentage" }}
</div>

See https://otree.readthedocs.io/en/latest/forms.html#raw-html-widgets and https://getbootstrap.com/docs/5.0/forms/input-group/.

#3 by Leon

Thanks a lot

Write a reply

Set forum username