site/_src/_includes/form-cla.html

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#individual" data-toggle="tab" role="tab">For Individuals</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#entity" data-toggle="tab" role="tab">For Entities (Organizations)</a>
    </li>
</ul>

<div class="tab-content">

    <div class="tab-pane active" id="individual" role="tabpanel">
        <form id="form-cla-individuals" class="form form--cla js-parsley" action="//formspree.io/{{ site.email.cla }}" method="POST">
            <p class="form-group">
                <input class="form-control" type="text" id="name" name="name" required>
                <label class="form-label" for="name">Your Full Name</label>
            </p>
            <p class="form-group">
                <input class="form-control" type="email" id="email" name="_replyto" required>
                <label class="form-label" for="email">Your Email</label>
            </p>
            <p class="form-group">
                <input class="form-control" type="text" id="org" name="org">
                <label class="form-label" for="org">Your Organization (if applicable)</label>
            </p>
            <p class="form-group">
                <input class="form-control" type="text" id="github" name="github">
                <label class="form-label" for="github">Your GitHub Account Name</label>
            </p>
            <p class="form-group">
                <input class="form-control" type="tel" id="phone" name="phone">
                <label class="form-label" for="phone">Your Phone Number</label>
            </p>
            <p class="form-group text-dimmed mini">
                Fields marked with an <span class="required">*</span> are required.
            </p>
            <p class="form-group text-dimmed">
                Agreed and accepted: By clicking and accepting this Agreement, I represent and warrant that I have authority to bind the
                entity named above (if applicable) to the terms and conditions of this Agreement.
            </p>
            <div class="form-group checkbox">
                <label>
                    <input class="agree" type="checkbox" value="agreement" name="agreement" required> I have read and agree
                    to the <a href="/cla/individual/">terms of this Agreement</a>
                </label>
            </div>
            <p class="form-group">
                <input class="btn btn-primary" type="submit" value="Send">
            </p>

            <div class="alert alert--success animation-slide-in-from-bottom hide">
                <svg class="alert__icon icon icon-success">
                    <use xlink:href="/assets/img/sprite.svg#icon-success"></use>
                </svg>
                <p>
                    <strong class="alert__title">Great to hear you’re contributing!</strong>
                    Thanks for submitting the agreement.
                </p>
            </div>
            <div class="alert alert--danger hide">
                <svg class="alert__icon icon icon-fail">
                    <use xlink:href="/assets/img/sprite.svg#icon-fail"></use>
                </svg>
                <p>
                    <strong class="alert__title">Ops, there was an error</strong>
                    Would you mind trying again?
                </p>
            </div>

            <input type="text" name="_gotcha" style="display: none;">
            <input type="hidden" name="_subject" value="New CLA submission (Individual)" />
            <input type="hidden" name="_cc" value="{{ site.email.cla_cc }}" />

            <div class="form__gdpr">
                <svg class="icon">
                    <use xlink:href="/assets/img/sprite.svg#icon-heart-protect"></use>
                </svg>
                <div class="text">
                    {{ site.data.gdpr.general | markdownify }}
                </div>
            </div>
        </form>
    </div>

    <div class="tab-pane" id="entity" role="tabpanel">
        <form id="form-cla-entities" class="form form--cla js-parsley" action="//formspree.io/{{ site.email.cla }}" method="POST"
            accept-charset="UTF-8">
            <p class="form-group">
                <input class="form-control" type="text" id="org-entity" name="org" required>
                <label class="form-label" for="org-entity">Name of organization, foundation, company or other entity</label>
            </p>
            <p class="form-group">
                <input class="form-control" type="text" id="name-entity" name="name" required>
                <label class="form-label" for="name-entity">Contact Person</label>
            </p>
            <p class="form-group">
                <input class="form-control" type="email" id="email-entity" name="_replyto" required>
                <label class="form-label" for="email-entity">Contact Email Address</label>
            </p>
            <p class="form-group">
                <input class="form-control" type="tel" id="phone-entity" name="phone">
                <label class="form-label" for="phone-entity">Contact Phone Number</label>
            </p>
            <p class="form-group text-dimmed mini">
                Fields marked with an <span class="required">*</span> are required.
            </p>
            <p class="form-group text-dimmed">
                Agreed and accepted: By clicking and accepting this Agreement, I represent and warrant that I have authority to bind the
                entity named above (if applicable) to the terms and conditions of this Agreement.
            </p>
            <div class="form-group checkbox">
                <label>
                    <input class="agree" type="checkbox" value="agreement" name="agreement" required> I have read and agree
                    to the <a href="/cla/entity/">terms of this Agreement</a>
                </label>
            </div>
            <p class="form-group">
                <input class="btn btn-primary" type="submit" value="Send">
            </p>

            <div class="alert alert--success animation-slide-in-from-bottom hide">
                <svg class="alert__icon icon icon-success">
                    <use xlink:href="/assets/img/sprite.svg#icon-check"></use>
                </svg>
                <p>
                    <strong class="alert__title">Great to hear you’re contributing!</strong>
                    Thanks for submitting the agreement.
                </p>
            </div>
            <div class="alert alert--danger hide">
                <svg class="alert__icon icon icon-fail">
                    <use xlink:href="/assets/img/sprite.svg#icon-fail"></use>
                </svg>
                <p>
                    <strong class="alert__title">Ops, there was an error</strong>
                    Would you mind trying again?
                </p>
            </div>

            <input type="text" name="_gotcha" style="display: none;">
            <input type="hidden" name="_subject" value="New CLA submission (Organization)" />
            <input type="hidden" name="_cc" value="{{ site.email.cla_cc }}" />

            <div class="form__gdpr">
                <svg class="icon">
                    <use xlink:href="/assets/img/sprite.svg#icon-heart-protect"></use>
                </svg>
                <div class="text">
                    {{ site.data.gdpr.general | markdownify }}
                </div>
            </div>
        </form>
    </div>

</div>