Question: Form fields below CTA | Community
Skip to main content
Otton_Hernandez
Otton_Hernandez
Level 1
March 27, 2020
Solved

Question: Form fields below CTA

  • March 27, 2020
  • 3 replies
  • 3574 views

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!

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by SanfordWhiteman

    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

     

    3 replies

    SanfordWhiteman
    SanfordWhitemanAccepted solution
    Level 10
    March 27, 2020

    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
      SanfordWhiteman
      Level 10
      March 28, 2020
      Otton, pls mark my answer as the solution when you get a chance, thanks.
      Dave_Roberts
      Dave_Roberts
      Level 10
      May 12, 2020

      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
      SanfordWhiteman
      Level 10
      May 12, 2020

      The tab order though.

        Terms & ConditionsAccessibility statement

        Loading footer...