Customizing my Social Media Intake Form

  • Profile Image
    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


  • Profile Image
    Ariel_P
    Answered on July 15, 2021 at 04: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