Hi there, 

I plan to ask subjects to enter an integer ranging from 0 to 100 in a survey question. In this question, I want to add a percent sign (%) after the input box. How do I achieve this?

Let's say in class player, we have
q_belief=models.IntegerField(blank=True, min=0, max=100)

and q_belief is called in the survey page.

What to do to customize {{ formfield player.q_belief }}, so that the input box displayed as "[_________]%"?

Thank you for any help!

Try including this in your HTML template instead of {{ formfield player.q_belief }}:

<div class="input-group input-group-narrow">
  <input type="number" class="form-control" id="id_q_belief" name="q_belief" value="" min="0" max="100" step="1">
  <span class="input-group-text">%</span>
</div>
{{ formfield_errors 'q_belief' }}

See https://otree.readthedocs.io/en/latest/forms.html?highlight=html#raw-html-widgets. The crucial aspect is that the input’s name attribute has to equal the name of the player field in your Python code (__init__.py).

Thank you for your reply!

I followed your suggestion and I got the input box with a percent sign on my page. 

But when I input an integer and click the next button to submit this page, the input box becomes empty and the value I entered before was not saved.

Could you please help me to fix this followed-up problem?

Thank you again for your helpful suggestions!

Well, troubleshooting without knowing your code is difficult ...

I can only venture a guess: Maybe you forgot a to include form_fields in your page class?

That is,

class YourSurveyPage(Page):

    form_model = 'player'
    form_fields = ['q_belief']

See https://otree.readthedocs.io/en/latest/forms.html.

Or you may have misspelled the name of the field in your HTML code.

Sorry I didn't make my problem clear.

I just checked myt code and I indeed include form_fields in the page class and there is no misspelling.

Here is a simplified version of my code:
------------------------------------
[__init__.py]
------------------------------------
class Player(BasePlayer):
    q_belief= models.IntegerField(
    blank=True,
    min=0, max=100
    )
    
class Questionnaire(Page):
    form_model = 'player'
    form_fields = [['q_belief']
----------------------------------
[Questionnaire.html]
----------------------------------
{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Questionnaire
{% endblock %}

<div class="input-group input-group-narrow">
  <input type="number" class="form-control" id="id_q_belief" name="q_belief" value="" min="0" max="100" step="1">
  <span class="input-group-text">%</span>
</div>
<p>(Please enter an integer ranging from 0 to 100.)</p>
{{ formfield_errors 'q_belief' }}

    {% next_button %}

{% endblock %}

Look forward to your reply! 
Many thanks!

There is a typo in the sample code I just uploaded:

form_fields = [['q_belief'] --> form_fields = ['q_belief']

In the text editor, it is right.

I find that your reply in #2 has already solvesd my problem! There are lines of code that I comment out in the html file, which lead to the sumbit error I mentioned earlier (still don't know why, but it doesn't matter). Once I delete them, the code works well!

I really appreciate your help!