launchx/innovate/templates/innovate/signup.html

{% extends 'launchx/base.html' %}
{% load launchx_extras %}

{% block styles %}
    <link rel="stylesheet" href="{% static 'innovate/signup.css' %}">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
{% endblock %}


{% load crispy_forms_tags %}
{% block content %}
    <div id="payment-modal" class="custom-modal">
        <div class="custom-modal-content">
            <span class="close" id="payment-modal-close">&times;</span>
            <h1>How to pay</h1>
            <h3>Step 0:</h3>
            <a href="https://www.myschoolbucks.com/ver2/stores/catalog/getproduct?productKey=ZZVR1J3QQUX02D5&OPTZZVR1J3QQUX02D5=ZZVR1J3R37E0D5S">Click here to open the payment link</a>
            <br>
            <h3>Step 1:</h3>
            <p>Determine donation amount. Recommended $20 per team. Enter “Amount to Pay” and “School Name (For Non TJ Students)” fields. Then click the blue “Purchase” button. Do not click other forms (you are already filling out those forms on this registration form).</p>
            <img src="{% static 'innovate/img/step1.png' %}">
            <br>
            <h3>Step 2:</h3>
            <p>If you have a MySchoolBucks account, log in. Otherwise, click the green “Continue as Guest” button.</p>
            <img src="{% static 'innovate/img/step2.png' %}">
            <br>
            <h3>Step 3:</h3>
            <p>Enter all fields. Double check the information is correct. Click the blue “Continue” button.</p>
            <img src="{% static 'innovate/img/step3.png' %}">
            <br>
            <h3>Step 4:</h3>
            <p>Confirm all fields are correct. Then click the blue “Place Order” button. Screenshot or take a picture of your payment confirmation page and upload to this form. Thank you for donating to InnovateTJ!</p>
            <img src="{% static 'innovate/img/step4.png' %}">
        </div>
    </div>
    <form class="form col-sm-6 offset-sm-3" method="POST" action="" enctype="multipart/form-data">
        {% csrf_token %}
        {{ formset.management_form|crispy }}
        {% for form in formset %}
        {{ form.non_field_errors }}
        {{ form.errors }}
        {% for hidden in form.hidden_fields %}
            {{ hidden }}
        {% endfor %}
        <fieldset class="competitor-container container col">
            <legend class="header row">
                Competitor&nbsp;
            </legend>
            <div class="row">
                <div class="form-floating col-5">
                    {{ form.name }}
                    {{ form.name.label_tag }}
                </div>
                <div class="form-floating col-5">
                    {{ form.email }}
                    {{ form.email.label_tag }}
                </div>
            </div>
            <div class="row mt-2">
                <div class="form-floating col-5">
                    {{ form.school }}
                    {{ form.school.label_tag }}
                </div>
                <div class="form-floating col-5">
                    {{ form.county }}
                    {{ form.county.label_tag }}
                </div>
            </div>
        </fieldset>
        {% endfor %}
        {% for hidden in team_form.hidden_fields %}
            {{ hidden }}
        {% endfor %}
        {{ team_form.non_field_errors }}
        {{ team_form.errors }}
        <fieldset class="container col">
            <legend class="team-header row">
                Team Info
            </legend>
            <div class="form-floating row">
                {{ team_form.name }}
                {{ team_form.name.label_tag }}
            </div>
        </fieldset>
        <fieldset class="container col reciept">
            <legend class="team-header row">
                Team Payment (Optional)
                <button class="btn btn-light" type="button" id="payment-modal-open">How do I pay?</button>
            </legend>
            <div class="form-floating row">
                {{ team_form.reciept }}
            </div>
        </fieldset>
        <button class="mt-3 btn btn-light" type="submit">Sign Up!</button>
{% endblock %}

{% block scripts %}

<script src="{% static 'innovate/formsets.js' %}"></script>
<script src="{% static 'innovate/signup.js' %}"></script>
<script type="text/javascript">
    $(function() {
        $('form .competitor-container').formset({
            extraClasses: ['row1', 'row2', 'row3', 'row4']
        })
    })
</script>

{% endblock %}