SOLVED

Question: Form fields below CTA

Go to solution
Otton_Hernandez
Level 1

Question: Form fields below CTA

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!

2 ACCEPTED SOLUTIONS

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Question: Form fields below CTA

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

 

View solution in original post

SanfordWhiteman
Level 10 - Community Moderator

Re: Question: Form fields below CTA

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

View solution in original post

4 REPLIES 4
SanfordWhiteman
Level 10 - Community Moderator

Re: Question: Form fields below CTA

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
Level 10 - Community Moderator

Re: Question: Form fields below CTA

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

Re: Question: Form fields below CTA

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
Level 10 - Community Moderator

Re: Question: Form fields below CTA

The tab order though.