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>

[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>

[piersg · Accepted solution]

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.

[sharonlicari]

Hey @Moore 

Thank you for sharing this. 

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

Thank you

Sharon