Is there a way to either move or change the color of the save as draft button in Forms 11 update 3? In the button customize you can only change the color or all buttons.
This has worked for us in the Modern Designer:
.__SaveDraft {
background-color: #c4b8cf;
color: initial;
border-radius: 4px;
border: none;
box-shadow: rgba(0,0,0,0.19) 0 1px 0 0, rgba(0,0,0,0.253) 0 2px 3px 0, rgba(0,0,0,0.05) 0 1px 5px 0!important
}
We add this CSS to all of our forms:
/* Purple Save as Draft button */
input.draft-btn {
background-color: #c4b8cf;
color: #323232;
border: 1px solid #241831;
height: 32px;
}
Is this in the old designer or the new designer? The new designer doesn't seem to accept CSS codes the same way.
This has worked for us in the Modern Designer:
.__SaveDraft {
background-color: #c4b8cf;
color: initial;
border-radius: 4px;
border: none;
box-shadow: rgba(0,0,0,0.19) 0 1px 0 0, rgba(0,0,0,0.253) 0 2px 3px 0, rgba(0,0,0,0.05) 0 1px 5px 0!important
}
Try this in the JS section:
LFForm.changeActionButton("SaveAsDraft", {label: "New Wording"});
I was actually able to use JS to change the text, one last thing ... the position. I messed around with CSS options to move it to the right, no luck. Do you know what would work to right-justify it instead of it landing right beside the submit button?
You have a couple of options to do this, however if you always want the save as draft or secondary button to be on the right it would be best to use the first option.
If you choose to do the second option, it will work when there are two buttons inside the container itself but when there is only one (for example if you have the submit button only shown on the last tab when using pagination), you are going to end up with the single button (which would be the save as draft/secondary) on the left.
Go ahead and try that out and let me know if my solutions have helped you!
.action-btn-container.flex { display: inline-block !important; }
.action-btn-container.flex .action-btn { position: initial !important; }
.__SaveDraft { float: right !important; }
.action-btn-container.flex {justify-content: space-between ; }
Thank you everyone, this was so long ago. @████████, I never marked your response as answered in 2023, so I just did. @████████ your css script works for alignment as well. Once I figured out the classes in the dev tool I figured out how to move the buttons. I never went back and updated this post.