Remove the color and orange bar on my notification email

Is there a way to band the confirmation to remove the orange and brand it with the colors im using?

Hi cwimacommunications,

Thanks for reaching out to Jotform Support.

You can easily remove the orange bar on Notification E-mails using Custom CSS Code. Let me show you how:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Settings.
2. In the menu on the left side of the page, click on Emails.
3. Then click on Edit button to customize e-mail.
4. To show clearly, I clicked on Full screen button.
5. Then click on Source Code button to find the code of orange bar.
6. After finding the code line, change the bgcolor (A.K.A. background color) of the bar. (I personally change the color #FF6100 with #373791). Then click OK button.
7. If you want to remove the bar totally, you need click on the colorful bar and click the Delete Row button.
8. You can also change the Font Family by clicking on T button on the left corner of the navigation bar.
9. Click on A button on the navigation bar, then you can change the text color as well.

Give it a try and let us know if you have any other questions.

can we update it to our branded colors I have the source code for that.

/* Background */

.form-all {

  background-color: #FFFFFF !important;

}

/* Header text */

.form-header-group .form-header, 

.form-header-group .form-subHeader {

  color: #D45AA1 !important;

}

/* Button styling */

.form-submit-button {

  background-color: #01CED6 !important;

  border: none !important;

  color: #fff !important;

  font-weight: bold !important;

  font-size: 16px !important;

  border-radius: 8px !important;

  padding: 12px 24px !important;

  cursor: pointer !important;

  transition: background 0.3s ease !important;

}

.form-submit-button:hover {

  background-color: #00b6bd !important; /* Slightly darker on hover */

}

/* Signature line */

.signature-pad-wrapper canvas {

  border-bottom: 2px solid #8458AD !important;

}

/* Textbox, Textarea, Dropdown, Number, Address inputs */

input.form-textbox, 

textarea.form-textarea, 

select.form-dropdown,

.form-address-table input,

.form-address-table select,

.form-matrix-table input,

.form-matrix-table select,

.form-number-input-box,

.form-spinner-input {

  border: 1px solid #707172 !important;

  box-shadow: none !important;

  outline: none !important;

  border-radius: 6px !important;

  padding: 6px !important;

}

/* Radio buttons & checkboxes wrapper */

.form-radio-item, 

.form-checkbox-item {

  border: 1px solid #707172 !important;

  border-radius: 6px !important;

  padding: 6px 10px !important;

  margin-bottom: 6px !important;

}

/* Focus effect (optional: highlight border when active) */

input.form-textbox:focus, 

textarea.form-textarea:focus, 

select.form-dropdown:focus {

  border-color: #D45AA1 !important; /* pink on focus */

  box-shadow: 0 0 3px #D45AA1 !important;

}

Hi cwimacommunications,

Are you still referring to the notification email? If so, note that the code you provided is element-specific. This means that not all the elements will be affected if you will not use a specific CSS selector. To further help you, can you tell us the changes you want on the notification email so we can check it on our end?

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