How to move fields in the form builder?

Please look at my form, https://form.jotform.com/231497077683165

I would like to bring the checkbox, "Do you want to split your credit card payment?" down on the right side so that it fills in the blank space.

This is what the form looks like:

and this is how I want it to look:

Thank you for your help. Feel free to edit the form, if that is easier.

Hi Charlie,

Thanks for reaching out to Jotform Support. You can use custom CSS to move the field. Let me show you how:

1. In Form Builder, click on the Paint Roller icon .
2. In Form Designer, select Styles, scroll down to Inject Custom CSS and add this code:

#cid_22{

   margin-bottom: -100px;

}

li#id_24{

display: inherit;

top: 149px;

}

3. Click Save.

Checkout the screenshot below to seem the result:

Give it a try and let us know how it goes.

My apologies. I realized that I had accidentally placed some of the elements in the wrong place.

By using the code you provided and rearranging the elements correctly, I now get this:

However, I want it to look like this:

I'd like to get rid of the massive white space between the divider line and the credit card payments api.

Thank you again and my apologies for the trouble.

There is also the problem that in moving the checkbox, it goes behind the credit card element and prevents the user from being able to click on the checkbox.

Hello Charlie,

Thanks for getting back to us. To correct that space on the top, correct the position and make the field responsive, please add the following code:

ul#section_26 {

  position: relative;

}



li#id_24 {

  position: absolute;

    right: 0px;

    top: 56px;

}



#id_25, #id_27 {

  display: none;

}



@media screen and (max-width: 480px) {

  li#id_24 {

    position: relative;

    top: inherit;

  }

}

Follow the steps of my colleague and add this code in a new line after the end of the existing code. This is the result:

Reach out again if you need any other help

Thank you but that still doesn't quite work. There are two problems:

1. The divider line above "My Products" disappears
2. The checkbox is positioned behind the stripe api so it is impossible to check the box.

The positioning of the "do you wish to split your credit card payments" element is correct but it is not functional. I need it to be functional, please.

Thank you again.

Hello Charlie,

Thanks for the feedback. You're right, the checkbox wasn't working, and the divider line was gone. My bad, sorry about the confusion. I corrected the code and now the divider line is available, and the checkbox is working.

Replace my previous code with this one:

ul#section_26 {

  position: relative;

}



li#id_24 {

  position: absolute;

    right: 0px;

    top: 115px;

    z-index: 999;

}



#id_25 {

  display: none;

}



@media screen and (max-width: 480px) {

  li#id_24 {

    position: relative;

    top: inherit;

  }

}

Result:

Reach out again if you need any other help.

That worked! Thank you!