How to place the submit button in the right part of screen?

Hello Jotform Team, so i need help with 2 issues,

Issue 1: I have embedded my jotform [https://www.jotform.com/build/240812898935470] in my web page[link below]. I am facing some alignment issues with the form in the mobile and Tablet views when i access the form through the webpage [www.communite.in].

So if you look at the form [link above], i have created fixed buttons for Search and Place Order(submit). I am trying to achieve the alignment [extreme right] so these floating buttons do not interfere with the form while customers are placing the order but at the same time they are available for customer to search or complete the order (so the customer does not have to scroll up or down for these features].

Could you please help me with way to address this issue so that i can achieve the exact alignment as i see in the desktop version.

I would really appreciate your help in resolving the issues above. Thanks so much.

Sameer

Hi Shambhavi,

Thanks for reaching out to Jotform Support . We can adjust the the position of the buttons on your form by modifying custom CSS codes that you currently have. It's easy to do. Let me walk you through it:

1. Copy the code below.

/* Adjust the the position of the buttons - 16328091 */



#previewButtons #multiSelect-checkbox-97, #input_97, #previewButtons #multiSelect-checkbox-97, #productSearch-input {

  right: 200px;

}



/* End code here */

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better? If you also can take a screenshot of what’s happening, that will help us to better understand what’s going on. We have a guide about how to do that here.

Meanwhile, I moved your other question to a new thread and helped you with that here.

Reach out again if there’s anything else we can help you with.

Hi Ronald , thanks so much. My issue is more about position of the button consistent across all views ie. Desktop, Mobile and Tablet. If you see my css code in the form style, I have already added code for the position of the button, but if you open the webpage ( www.communite.in) where I have embedded the form, on mobile you will see that position is not consistent with what you see on desktop.

Would appreciate if you could help me solve the issue. Thanks.

Hi Shambhavi,

Can you try replacing all your CSS code with the code below? This will make the buttons responsive on different devices. Here is the code:

/*Make the form responsive - 16328091*/

#previewButtons #multiSelect-checkbox-97, #input_97 {

  position : fixed;

  bottom : 355px;

  right: 500px;

  height : 40px;

  max-width : 80px;

  border: 3px solid black;

  font-size : 15px;

}



#previewButtons #multiSelect-checkbox-97, #productSearch-input {

  position : fixed;

  bottom : 400px;

  right : 555px;

  max-width : 125px;

  border : 3px solid black;

}



@media(max-width: 800px){

 #previewButtons #multiSelect-checkbox-97, #input_97 {

  position : fixed;

  bottom : 710px;

  right: 600px;

  height : 40px;

  max-width : 80px;

  border: 3px solid black;

  font-size : 15px;

}



#previewButtons #multiSelect-checkbox-97, #productSearch-input {

  position : fixed;

  bottom : 755px;

  right : 650px;

  max-width : 125px;

  border : 3px solid black;

}

}



@media (max-width: 600px) {

 #previewButtons #multiSelect-checkbox-97, #input_97 {

  position : fixed;

  bottom : 300px;

  right: 230px;

  height : 40px;

  max-width : 80px;

  border: 3px solid black;

  font-size : 15px;

}



#previewButtons #multiSelect-checkbox-97, #productSearch-input {

  position : fixed;

  bottom : 340px;

  right : 20px;

  max-width : 100px;

  border : 3px solid black;

}

}

#previewButtons #multiSelect-checkbox-175, #form-pagebreak-back_175 {

  position : fixed;

  bottom : 316px;

  left:100px;

  height : 40px;

  border : 3px solid black;

}



#input_110 {

  font-weight : bold;

  font-size : 10px;

  color : green;

}

#input_176 {

  font-weight : bold;

  font-size : 10px;

  color : blue;

}

#input_177 {

 font-weight:bold;

 font-size:15px !important;

}

.form-product-details b {

  color : orange;

  font-weight : bold;

  font-size : 15px;

}

.form-all {

margin-left:0 !important;

}

/*ends here*/

Here is the result:

You can follow the steps provided by my colleague on how to inject the CSS code to your form, or you can check our guide on how to do that.

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