<style type="text/css"> /* Start custom form CSS generated by https://jennamolby.com/pardot-form-style-generator/ */ /* Load the custom font */ @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); #pardot-form { font-family:'Roboto', sans-serif; } #pardot-form .form-field { margin:0; padding:5px 0 0 0; } /* The input fields */ #pardot-form input.text, #pardot-form textarea.standard, #pardot-form select, #pardot-form input.date { background-color:#FFFFFF; border:solid 1px #E0E0E0; font-size:15px; color:#757575; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; width:100%; font-family:'Roboto', sans-serif; box-sizing:border-box; } /* the input fields on focus */ #pardot-form input.text:focus, #pardot-form textarea.standard:focus, #pardot-form select:focus, #pardot-form input.date:focus { border-color:#cccccc; outline: none; } #pardot-form span.value { margin-left: 0; } /* the field labels */ #pardot-form label { font-size:15px; color:#757575; font-weight:normal; padding-top:5px; padding-bottom:5px; float:none; text-align:left !important; width:auto; display:block; } /* the submit button */ #pardot-form .submit input { margin:0; background-color:#2CA4BF; border:solid 1px #2CA4BF; font-size:16px; color:#FFFFFF; font-weight:normal; padding-top:10px; padding-bottom:10px; padding-right:30px; padding-left:30px; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; } /* the submit button hover */ #pardot-form .submit input:hover { background-color:#1988a1; border-color:#1988a1; color:#FFFFFF; } /* the spacing around the submit button */ #pardot-form .submit { margin:0; padding-top:10px; padding-bottom:0px; text-align:center; } /* hide the regular checkbox */ .pd-checkbox input { opacity: 0; position: absolute; } /* position the label */ .pd-checkbox input, .pd-checkbox label { display: inline-block; vertical-align: middle; margin: 5px; cursor: pointer; } .pd-checkbox label { position: relative; } /* style the unchecked checkbox */ .pd-checkbox input+label:before { content: ''; background:#ffffff; border: 1px solid#c7c7c7 ; display: inline-block; vertical-align: middle; width: 20px; height: 20px; padding: 0px; margin-right: 10px; text-align: center; font-size: 15px; line-height: normal; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* style the checked checkbox */ .pd-checkbox input:checked+label:before { content: "\2713"; background:#2CA4BF; color:#FFFFFF; border-color:#2CA4BF; } form.form p.no-label { margin-left: 0 !important; } /* hide the regular radio button */ .pd-radio input { opacity: 0; position: absolute; } /* position the label */ .pd-radio input, .pd-radio label { display: inline-block; vertical-align: middle; margin: 5px; cursor: pointer; } .pd-radio label { position: relative; } /* style the unchecked radio button */ .pd-radio input + label:before { content: ''; background:#ffffff; border: 1px solid#c7c7c7; display: inline-block; vertical-align: middle; width: 20px; height: 20px; padding: 0px; margin-right: 10px; text-align: center; font-size: 15px; line-height: normal; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .pd-radio input + label:before { border-radius: 50%; } /* style the selected radio button */ .pd-radio input:checked + label:before { content: "\25CF"; background:#2CA4BF; color:#FFFFFF; border-color:#2CA4BF; } /* Custom Addition for Label Position */ form.form p label { text-align: left !important; } </style> <form accept-charset="UTF-8" method="post" action="%%form-action-url%%" class="form" id="pardot-form"> %%form-opening-general-content%% %%form-if-thank-you%% %%form-javascript-focus%% %%form-thank-you-content%% %%form-thank-you-code%% %%form-end-if-thank-you%% %%form-if-display-form%% %%form-before-form-content%% %%form-if-error%% <p class="errors">Please correct the errors below:</p> %%form-end-if-error%% %%form-start-loop-fields%% <p class="form-field %%form-field-css-classes%% %%form-field-class-type%% %%form-field-class-required%% %%form-field-class-hidden%% %%form-field-class-no-label%% %%form-field-class-error%% %%form-field-dependency-css%%"> %%form-if-field-label%% <label class="field-label" for="%%form-field-id%%">%%form-field-label%%</label> %%form-end-if-field-label%% %%form-field-input%% %%form-if-field-description%% <span class="description">%%form-field-description%%</span> %%form-end-if-field-description%% </p> <div id="error_for_%%form-field-id%%" style="display:none"></div> %%form-field-if-error%% <p class="error no-label">%%form-field-error-message%%</p> %%form-field-end-if-error%% %%form-end-loop-fields%% %%form-spam-trap-field%% <!-- forces IE5-8 to correctly submit UTF8 content --> <input name="_utf8" type="hidden" value="☃" /> <p class="submit"> <input type="submit" accesskey="s" value="%%form-submit-button-text%%" %%form-submit-disabled%%/> </p> %%form-after-form-content%% %%form-end-if-display-form%% %%form-javascript-link-target-top%% </form>