How to remove grey lines and align the submit button on the back button?

I need to get rid of all the grey lines between elements and sections throughout the document. Please provide a CSS for that.

Does anyone ever want those lines, most people seem to ask to be rid of them, couldn't you go with the default of no grey lines?

I also need to have the Submit and Back buttons on the last page on the same line. Please advise.

Hi Pam,

Thank you for reaching out to to Jotform Support. You can definitely remove those grey lines by injecting custom CSS codes. Let me show you how with the cloned version of your form:

1. Copy the custom CSS codes below:

.form-pagebreak {

border: none;

}

.form-header-group.header-large {

    border: none;

}

2. In Form Builder, click on the blue roller paint icon.

3. Then select Styles.

4. And scroll down and paste the custom CSS codes into the text field.

To position the submit button in alignment with back button, you can inject the following CSS codes below:

button#input_109 {

    position: relative;

    top: 82px;

    left: 300px;

}

Here's what it looks like after injecting custom CSS codes:

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

Worked great.

One more question.

On the last page of the form, I'm using a FITB to get a signature. How can I make the field label "Signature" a larger and bolder font?

Hi Pam,

You can use this CSS code and add it at the bottom of the Custom CSS field to increase the size and boldness of the label in the signature field.

/* Increase font size and boldness - 16156681- */

span.FITB-inptCont label {

/* Increment or Decrement by 1 */

font-size: 16px !important;

/* Increment or Decrement by 100 */

  font-weight: 900 !important;

}

/* End of Code */

That's it, doing this will result to making the word "Signature" larger and bolder.

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

Something has changed and the submit button is no longer in alignment with the back button.

Hi Pam,

I checked your the codes you've added and found that there is an issue with the Top property of the Submit button. It is very easy to fix. Let me show you how:

button#input_109 {

    position: relative;

    top: 82px;

    left: 300px;

}

/* Change the value for the top property to 120px */

button#input_109 {

    position: relative;

    top: 120px;

    left: 300px;

}

Doing this will fix the alignment issue of the Submit and Back button.

Also, to avoid any other issues, please copy this whole code directly to your CSS field and replace the current code that you have.

/* Complete CSS customization code -  16156681 */

.form-label.form-label-auto {

  display: inline-block;

  float: left;

  text-align: left;

}

.FITB-inptCont {

  font-size: 18px;

}

span.FITB-inptCont label {

  color: #000 !important;

}

.form-pagebreak {

  border: none;

}

.form-header-group.header-large {

  border: none;

}

button#input_109 {

  position: relative;

  top: 120px;

  left: 300px;

}





span.FITB-inptCont label {

  color: #000 !important;

  font-size: 16px !important;

  font-weight: 900 !important;

}

/* End of Code */



Here is the screencast of the results.

Give it a try and reach out again if you have any other questions.

Still not working

Hi Pam,

I just cloned and tested the form, and I was unable to replicate the issue on my end as shown in the screenshot.

When I reviewed your form, I was able to replicate the issue. Would you allow us to make changes on your form so that we can investigate this issue further, since we are unable to replicate it on our cloned form?

Once we hear back from you, we'll be able to help you with this.

Yes, please make the necessary changes to align the buttons.

Thank you.

Hi Pam,

I have updated the custom CSS codes in your form and cleared your form cache. The submit and back buttons should be fixed now. See the screenshot of your form below

Let us know if you need any more help.