Customize the style of a django.forms.BooleanField() containing a django.forms.CheckboxInput()

Question

I included a contact-form on my webpage which looks like so:

I would like to style the "CC myself" - checkbox in the following ways:

1. The text "CC myself" is centered vertically within its box.
2. The checkbox should be right next to the text "CC myself".
3. The "forward"-symbol should be between text and checkbox, but directly next to the text and with more horizontal distance to the checkbox (on its right-hand side).

This is how I defined the contact form in forms.py:

from django import forms

class ContactForm(forms.Form):
    # * Sender
    from_email = forms.EmailField(
        required=True,
        label='Your Email',
        widget=forms.TextInput(attrs={'placeholder': 'jsmith@example.com'}))

    # * Optional CC to sender
    cc_myself = forms.BooleanField(
        required=False,
        label='CC myself',
        widget=forms.CheckboxInput(attrs={'class': 'fa fa-share'}))

    # * Subject
    subject = forms.CharField(required=True, label='Subject')

    # * Message
    message = forms.CharField(
        widget=forms.Textarea(attrs={'placeholder': 'Dear Andreas ..'}),
        required=True,
        label='Message')

In the home.html template then, the form is displayed like so:

<form style="margin-left: auto;margin-right: 0;" method="post" action="{% url 'contact' %}">
    {% csrf_token %}

    <!-- * Neat autoformatting of the django-form via "pip install django-widget-tweaks"
    Docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
    {% for hidden in sendemail_form.hidden_fields %}
        {{ hidden }}
    {% endfor %}

    {% for field in sendemail_form.visible_fields %}
    <div class="form-group">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {{ field|add_class:'form-control' }}
        {% for error in field.errors %}
        <span class="help-block">{{ error }}</span>
        {% endfor %}
    </div>
    {% endfor %}


    <div style="text-align:center" class="form-actions">
        <button type="submit" class="btn btn-success">
            <!-- Search icons: https://fontawesome.com/icons?s=solid (syntax: class="fa fa-name-of-icon"))
            Docs on how to implement: https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration/41281304#41281304-->
            <span class="fa fa-paper-plane"></span> Send Message
        </button>

        <!-- Add horizontal space: https://stackoverflow.com/questions/31198170/want-to-add-spacing-between-buttons/31199399#31199399 -->
        &nbsp;
        <!-- Add cancel-button redirecting to "home" according to the following docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
        <a href="{% url 'home' %}" class="btn btn-secondary">
            <span class="fa fa-times"></span> Cancel
        </a>
    </div>

</form>

---

Edit on CSS-styling (bootstrap 4.x) employed in my project:

In my base.html wrapped around all my templates, the following is included:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Docs for including fontawesome: https://stackoverflow.com/a/41281304/12298276 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

---

Edit after trying out the first suggestion of @Danoram:

The result looks like this (only modification is the place of the "forward" - symbol inside the checkbox:

I would like to display the help_text='Decide if the message should be forwarded to you.' below the checkbox in grey, just like with the other fields. Also, the checkbox is still much bigger regarding its height compared to the label text "CC myself". And last but not least, the formatting of the entire contact-form column has gotten distorted. Especially the latter should be fixed, otherwise I can't implement it this way.

Answer 1

This was my best attempt (conserving the size of the checkbox).

Using an if check to render the cc field separately.

Although to do this I had to remove the classes from the checkboxinput and put them directly into the html

forms.py

cc_myself = forms.BooleanField(
        required=False,
        label='CC myself',
        widget=forms.CheckboxInput())

home.html

<form style="margin-left: auto;margin-right: 0;" method="post" action="{% url 'contact' %}">
    {% csrf_token %}

    <!-- * Neat autoformatting of the django-form via "pip install django-widget-tweaks"
        Docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
    {% for hidden in sendemail_form.hidden_fields %}
    {{ hidden }}
    {% endfor %}

    {% for field in sendemail_form.visible_fields %}
        {% if field.label == 'CC myself'%}
            <div class="row form-group">
                <div class="col-3 col-lg-2 col-xl-auto">
                    <label>{{ field.label }} <label for="{{ field.id_for_label }}" class="fa fa-share"></label></label>
                </div>
                <div class="col-2">
                    {{ field|add_class:'form-control' }}
                </div>
            </div>

        {% else %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field|add_class:'form-control' }}
                {% for error in field.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>

        {% endif %}
    {% endfor %}


    <div style="text-align:center" class="form-actions">
      <button type="submit" class="btn btn-success">
        <!-- Search icons: https://fontawesome.com/icons?s=solid (syntax: class="fa fa-name-of-icon"))
                Docs on how to implement: https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration/41281304#41281304-->
        <span class="fa fa-paper-plane"></span> Send Message
      </button>

      <!-- Add horizontal space: https://stackoverflow.com/questions/31198170/want-to-add-spacing-between-buttons/31199399#31199399 -->
      &nbsp;
      <!-- Add cancel-button redirecting to "home" according to the following docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
      <a href="{% url 'home' %}" class="btn btn-secondary">
        <span class="fa fa-times"></span> Cancel
      </a>
    </div>

  </form>