Question: Form fields below CTA

[Otton_Hernandez]

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 solution]

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

[SanfordWhiteman · Accepted solution]

Otton, pls mark my answer as the solution when you get a chance, thanks.

[Dave_Roberts]

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;}

[SanfordWhiteman]

The tab order though.