Customizing my Social Media Intake Form

Culturemb

Asked on July 15, 2021 at 12:16 PM

Hello!
I am working on my "Social Media Intake Form" and I am adding a "save and continue later" button. It is at the bottom of the form. But it is showing up as a white button with white text and I can't seem to fix the formatting. The "Print" and "Submit" buttons are fine.
Can you please help me with this?
Kind Regards,
Dana Green

Page URL: https://form.jotform.com/203058791514153
Ariel JotForm Support

Replied on July 15, 2021 at 4:08 PM

Hi there,

Try injecting the following CSS code:

button.sacl-button.form-sacl-button {
    cursor: pointer;
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
    border-radius: 32px;
    padding: 8px 18px;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0px -1px 0px #142353;
    border: 1px solid #3d4f8b;
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
    box-shadow: inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
    background: #305096;
    background: -moz-linear-gradient(top, #5277c8 0%, #305096 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5277c8), color-stop(100%,#305096));
    background: linear-gradient(top, #5277c8 0%, #305096 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5277c8', endColorstr='#305096', GradientType=0 );
}
button.sacl-button.form-sacl-button:hover {
    color: #ffffff !important;
    border: 1px solid #3d4f8b !important;
    background: #4668af;
    background: -moz-linear-gradient(top, #6f93e1 0%, #4668af 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6f93e1), color-stop(100%,#4668af));
    background: linear-gradient(top, #6f93e1 0%, #4668af 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f93e1', endColorstr='#4668af', GradientType=0 );
}

Once applied, it should look something like so:

Remember to view the form in "Live mode" to see the changes.

Give it a try and let us know if you need further assistance.

Related Guide: How to Inject Custom CSS Codes