Forms Pardot

<style>
    html {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    body {
        color: #4A4A4A;
        font-size: 16px;
        background-color: #FFFFFF;
        font-family: Arial, Arial, Helvetica, sans-serif;
        margin: 0;
    }

    h3 {
        color: #4A4A4A;
        font-size: 24px;
        margin: 1em 0;
        font-weight: bold;
        letter-spacing: -1px;
    }

    a {
        color: #d40000;
        text-decoration: none;
    }

    .form-field {
        margin-bottom: 20px;
    }

    .form-field p.error {
        margin: 5px 0 0;
    }

    .form-field.error input {
        background: rgba(255, 88, 88, 0.05);
        border-color: rgba(255, 88, 88, 0.47);
    }

    label,
    form.form p label {
        font-size: 14px;
    }

    .field-label {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
    }

    label.inline {
        font-size: 14px !important;
    }

    span.description {
        color: #4A4A4A;
        display: block;
        font-size: 14px;
        margin-top: 5px;
    }

    input[type="text"],
    textarea {
        background-color: white;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #8e8e8e;
        border-radius: 3px;
        color: #000000;
        padding: 5px;
        width: 100%;
        font-size: 16px;
    }

    input[type="text"],
    input[type="submit"] {
        max-width: 230px;
    }

    input[type="submit"] {
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        background-color: #1BD2FF;
        color: #012149;
        padding: 10px;
        border-radius: 3px;
        width: 100%;
        max-width: 230px;
        border: none;
        border: 1px solid #1BD2FF;
    }

    input[type="submit"]:hover {
        background-color: #d40000;
        color: #ffffff;
        border: 1px solid #d40000;
    }

    input[type="checkbox"] {
        vertical-align: top;
    }

    p.error,
    p.errors {
        color: #d40000;
        font-size: 14px;
    }

    p.errors {
        margin: 15px 0;
    }

    .email-pref label.inline {
        font-weight: 600;
    }

    .top-bar {
        background: rgb(26, 39, 51);
        height: 53px;
        width: 100%;
    }

    .ccga-logo {
        width: 100%;
        background-color: #ffffff;
    }

    .ccga-logo-inner {
        max-width: 1168px;
        margin: 0 auto;
        padding: 10px 30px;
    }

    .main-content {
        max-width: 1168px;
        margin: 0 auto;
        padding: 30px;
    }

    .main-content-inner {
        max-width: 600px;
    }

    @media(max-width: 768px) {
        .ccga-logo {
            text-align: center;
        }
    }
</style>

<form accept-charset="UTF-8" method="post" action="https://engage.thechicagocouncil.org/l/557772/2020-11-18/blb46q" class="form" id="pardot-form">

    <style type="text/css">
        form.form p label {
            color: #000000;
        }

        form.form p.required label,
        form.form span.required label {
            background: none;
            padding-left: 0;
        }
    </style>

    <p class="errors">Please correct the errors below:</p>

    <p class="form-field  first_name pd-text required required-custom   error ">

        <label class="field-label" for="557772_201475pi_557772_201475">First Name *</label>

        <input type="text" name="557772_201475pi_557772_201475" id="557772_201475pi_557772_201475" value="" class="text" size="30" maxlength="40" onchange="" onfocus="">

    </p>
    <div id="error_for_557772_201475pi_557772_201475" style="display:none"></div>

    <p class="error no-label">This field is required.</p>

    <p class="form-field  last_name pd-text required required-custom   error ">

        <label class="field-label" for="557772_201477pi_557772_201477">Last Name *</label>

        <input type="text" name="557772_201477pi_557772_201477" id="557772_201477pi_557772_201477" value="" class="text" size="30" maxlength="80" onchange="" onfocus="">

    </p>
    <div id="error_for_557772_201477pi_557772_201477" style="display:none"></div>

    <p class="error no-label">This field is required.</p>

    <p class="form-field  email pd-text required required-custom   error ">

        <label class="field-label" for="557772_201479pi_557772_201479">Email *</label>

        <input type="text" name="557772_201479pi_557772_201479" id="557772_201479pi_557772_201479" value="" class="text" size="30" maxlength="255" onchange="" onfocus="">

    </p>
    <div id="error_for_557772_201479pi_557772_201479" style="display:none"></div>

    <p class="error no-label">This field is required.</p>

    <p class="form-field  zip pd-text     ">

        <label class="field-label" for="557772_201481pi_557772_201481">Zipcode</label>

        <input type="text" name="557772_201481pi_557772_201481" id="557772_201481pi_557772_201481" value="" class="text" size="30" maxlength="32" onchange="" onfocus="">

    </p>
    <div id="error_for_557772_201481pi_557772_201481" style="display:none"></div>

    <p class="form-field  All_Newsletters pd-checkbox     ">

        <label class="field-label" for="557772_201483pi_557772_201483">All Newsletters</label>

        <span class="value">
            <span><input type="checkbox" name="557772_201483pi_557772_201483_2147359" id="557772_201483pi_557772_201483_2147359" value="2147359" onchange=""><label class="inline" for="557772_201483pi_557772_201483_2147359">Subscribe</label>
            </span>
        </span>

        <span class="description">I would like to receive all Newsletters</span>

    </p>
    <div id="error_for_557772_201483pi_557772_201483" style="display:none"></div>

    <p class="form-field  Global_Insight pd-checkbox     ">

        <label class="field-label" for="557772_201485pi_557772_201485">Global Insight</label>

        <span class="value">
            <span><input type="checkbox" name="557772_201485pi_557772_201485_2147361" id="557772_201485pi_557772_201485_2147361" value="2147361" onchange=""><label class="inline" for="557772_201485pi_557772_201485_2147361">Subscribe</label>
            </span>
        </span>

        <span class="description">Weekly summary of the Council's research and events</span>

    </p>
    <div id="error_for_557772_201485pi_557772_201485" style="display:none"></div>

    <p class="form-field  Weekly_Update pd-checkbox     ">

        <label class="field-label" for="557772_201487pi_557772_201487">Events Update</label>

        <span class="value">
            <span><input type="checkbox" name="557772_201487pi_557772_201487_2147363" id="557772_201487pi_557772_201487_2147363" value="2147363" onchange=""><label class="inline" for="557772_201487pi_557772_201487_2147363">Subscribe</label>
            </span>
        </span>

        <span class="description">Weekly listing of upcoming Council events</span>

    </p>
    <div id="error_for_557772_201487pi_557772_201487" style="display:none"></div>

    <p class="form-field  This_Week_s_Reads pd-checkbox     ">

        <label class="field-label" for="557772_201489pi_557772_201489">This Week's Reads</label>

        <span class="value">
            <span><input type="checkbox" name="557772_201489pi_557772_201489_2147365" id="557772_201489pi_557772_201489_2147365" value="2147365" onchange=""><label class="inline" for="557772_201489pi_557772_201489_2147365">Subscribe</label>
            </span>
        </span>

        <span class="description">Council President Ivo H. Daalder’s must-read guide to the news, op-eds, and essays of the week.</span>

    </p>
    <div id="error_for_557772_201489pi_557772_201489" style="display:none"></div>

    <p class="form-field  Event_Announcements pd-checkbox     ">

        <label class="field-label" for="557772_201491pi_557772_201491">Event Announcements</label>

        <span class="value">
            <span><input type="checkbox" name="557772_201491pi_557772_201491_2147367" id="557772_201491pi_557772_201491_2147367" value="2147367" onchange=""><label class="inline" for="557772_201491pi_557772_201491_2147367">Subscribe</label>
            </span>
        </span>

        <span class="description">Notifications of individual events as they are posted</span>

    </p>
    <div id="error_for_557772_201491pi_557772_201491" style="display:none"></div>

    <p class="form-field  Live_Stream_Announcements pd-checkbox     ">

        <label class="field-label" for="557772_201493pi_557772_201493">Live Stream Announcements</label>

        <span class="value">
            <span><input type="checkbox" name="557772_201493pi_557772_201493_2147369" id="557772_201493pi_557772_201493_2147369" value="2147369" onchange=""><label class="inline" for="557772_201493pi_557772_201493_2147369">Subscribe</label>
            </span>
        </span>

        <span class="description">Day-of notifications of live streaming event video</span>

    </p>
    <div id="error_for_557772_201493pi_557772_201493" style="display:none"></div>

    <p class="form-field  Global_Cities_Insights pd-checkbox     ">

        <label class="field-label" for="557772_201495pi_557772_201495">Global Cities Insights</label>

        <span class="value">
            <span><input type="checkbox" name="557772_201495pi_557772_201495_2147371" id="557772_201495pi_557772_201495_2147371" value="2147371" onchange=""><label class="inline" for="557772_201495pi_557772_201495_2147371">Subscribe</label>
            </span>
        </span>

        <span class="description">Monthly round-up of the Council's global cities related research and events</span>

    </p>
    <div id="error_for_557772_201495pi_557772_201495" style="display:none"></div>

    <p class="form-field  Global_Food_for_Thought pd-checkbox     ">

        <label class="field-label" for="557772_201497pi_557772_201497">Global Food for Thought</label>

        <span class="value">
            <span><input type="checkbox" name="557772_201497pi_557772_201497_2147373" id="557772_201497pi_557772_201497_2147373" value="2147373" onchange=""><label class="inline" for="557772_201497pi_557772_201497_2147373">Subscribe</label>
            </span>
        </span>

        <span class="description">Weekly round-up of the latest news, research, and policy developments on global agriculture</span>

    </p>
    <div id="error_for_557772_201497pi_557772_201497" style="display:none"></div>

    <p class="form-field  Public_Opinion_Insights pd-checkbox     ">

        <label class="field-label" for="557772_201499pi_557772_201499">Lester Crown Center on US Foreign Policy Updates</label>

        <span class="value">
            <span><input type="checkbox" name="557772_201499pi_557772_201499_2147375" id="557772_201499pi_557772_201499_2147375" value="2147375" onchange=""><label class="inline" for="557772_201499pi_557772_201499_2147375">Subscribe</label>
            </span>
        </span>

        <span class="description">Monthly round-up of public opinion related research and events from the Council’s Lester Crown Center on US Foreign Policy.</span>

    </p>
    <div id="error_for_557772_201499pi_557772_201499" style="display:none"></div>

    <p class="form-field %%form-field-css-classes%% pd-captcha required hidden  error %%form-field-dependency-css%%"></p>
    <div class="g-recaptcha" data-sitekey="6LfVnCYTAAAAAB4x9xlkeTsV8CO6np5UMhNjRNNZ">
        <div style="width: 304px; height: 78px;">
            <div>
                <iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6LfVnCYTAAAAAB4x9xlkeTsV8CO6np5UMhNjRNNZ&amp;co=aHR0cHM6Ly9lbmdhZ2UudGhlY2hpY2Fnb2NvdW5jaWwub3JnOjQ0Mw..&amp;hl=en&amp;v=r8jtf1oixV0IGff4hgB4EzDF&amp;size=normal&amp;cb=h0rioxsxqb2f" role="presentation" name="a-9ufmb8dfvzp9" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" width="304" height="78" frameborder="0"></iframe>
            </div>
            <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
        </div>
        <iframe style="display: none;"></iframe>
    </div>
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>

    <p></p>
    <div id="error_for_Recaptchapi_Recaptcha" style="display:none"></div>

    <p class="error no-label">Invalid CAPTCHA</p>

    <p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
        <label for="pi_extra_field">Comments</label>
        <input type="text" name="pi_extra_field" id="pi_extra_field">
    </p>

    <!-- forces IE5-8 to correctly submit UTF8 content  -->
    <input name="_utf8" type="hidden" value="☃">

    <p class="submit">
        <input type="submit" accesskey="s" value="Submit">
    </p>

    <script type="text/javascript">
        // <![CDATA[
        var anchors = document.getElementsByTagName("a");
        for (var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            if (anchor.getAttribute("href") && !anchor.getAttribute("target")) {
                anchor.target = "_top";
            }
        }
        // ]]>
    </script>
    <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="">
</form>