CTA above reCAPTCHA and Privacy Policy

[Moore]

I am trying to get my CTA above my privacy text in my form. I have it above my reCAPTCHA and need it up one more space. Any help would be greatly appreciated.

Here is my page and code.

https://info.patientmatters.com/intelliguide-meeting-request

<style>

/* following styles are for swapping positions of submit button and recaptcha field */

/* define the form as of table style display */
form {
display: table !important;
}
/* define the submit button section as table footer */
.hs_submit.hs-submit {
display: table-footer-group !important;
}

/* define the recaptcha section as table footer too */
/* now both elements are in the footer, script loads last, so underneath submit */
.hs_recaptcha.hs-recaptcha.field.hs-form-field {
display: table-footer-group !important;
}

/* add margin under submit button */
input.hs-button.primary.large {
margin-bottom: 40px !important;
}

/* end of submit-recaptcha swap style */

</style>

[sharonlicari]

Hey @Moore

Thank you for sharing this.

Hey @piersg @Anton @Chris-M any feedback you can share to @Moore?

Thank you

Sharon

[piersg]

Hmm you could use flexbox order to do this. Something like

form {
 display: flex;
 flex-direction: column;
}
.hs_submit.hs-submit {
 order: 3;
}
/* Use either of these methods to target the privacy disclaimer */
/* Method 1: targets using data attribute */
.form-columns-1[data-reactid=".hbspt-forms-0.2"] {
 order: 4;
}
/* method 2: targets using nth-child pseudo class */
form.hs-form fieldset:nth-child(4) {
 order: 4;
}
.hs_recaptcha.hs-recaptcha.field.hs-form-field {
 visibility: hidden !important;
 order: 5;
}

If you also remove the bottom margin on the button, this looks like:

[Moore]

wow, this works great. Thank you for the help.