Question: Form fields below CTA

Question

Hello everyone!

I'm working on making some updates to a form and I have a request to add a disclaimer below the CTA. Moving the field from the form editor is not possible, is there any other way to achieve this or it's just not supported?

Thanks!

SanfordWhiteman · Accepted Answer

Use my form reordering JS, ref'd many times over past years.

Download these files and reupload to your Design Studio (pls don't use my server as a CDN!):

https://s3-us-west-2.amazonaws.com/s.cdpn.io/250687/teknkl-formsplus-tag-0.2.3.js

https://s3-us-west-2.amazonaws.com/s.cdpn.io/250687/teknkl-formsplus-reorder-0.2.3.js

Include those files after the form embed, then reorder as desired.

Demo:

https://codepen.io/figureone/pen/ZoVeRy?editors=1010

Dave_Roberts · Answer

Another way of going about this using CSS is to use the display:flex rule on the form element and then reorder the form rows.

I think it's easiest (albeit counter-intuitive) to put the row (field(s)) you want to be below the button at the very top of the form so that you can target it with css as the "first form row".

Using the flexbox "order" property, you can then set all form rows (.mktoFormRow) to an order of "1",

set the button row (.mktoButtonRow) to an order of "2",

and then set the 1st form row (.mktoFormRow:nth-of-type(1)) to "3" to move it below the button.

In CSS, it might look something like this:

/* use display flex on parent (form) element to reorder children */
form.mktoForm {display:flex !important;}

/* move the 1st row on the form below the button */
form.mktoFormRow {order:1;}
form.mktoButtonRow {order:2;}
form.mktoFormRow:nth-of-type(1) {order:3;}

Sign up

Login with SSO

Login to the community

Login with SSO