Adding custom HTML elements around UserCreationForm's default elements

Question

I am using widget_tweaks to add custom classes to input forms.
But how do I add entire HTML elements like this to beautify the username ?

<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" />
</div>

I am using a basic signup form but want to include custom HTML around it.

{% load widget_tweaks %}
    {% for field in form %}
    <div class="form-group mt-3 {% if field.errors %}alert alert-danger{% endif %}">
      {{ field.errors }}
      {{ field.label_tag }}
      {% render_field field class="form-control" %}
      {% if field.help_text %}<small class="text-muted">{{ field.help_text|safe }}</small>{% endif %}
    </div>
    {% endfor %}

Answer 1

I solved it like this, but am unsure if this is the right way.

    {% load widget_tweaks %}
    {% for field in form %}

    <div class="form-group mt-3 {% if field.errors %}alert alert-danger{% endif %}">
      {{ field.errors }}
      {% if field.label == 'Username' %}
      <label for="basic-url" class="form-label">{{ field.label_tag }}</label>
      <div class="input-group mb-3">
        <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
        {% render_field field class="form-control" %}
      </div>  
      {% else %}
        {{ field.label_tag }}
        {% render_field field class="form-control" %}
        {% if field.help_text %}<small class="text-muted">{{ field.help_text|safe }}</small>{% endif %}  
      {% endif %}      

    </div>
    {% endfor %}