• Resolved svd89

    (@svd89)


    Hello Codepeople!

    I want to try to change the CSS on a Submit- Next- & Previous- button. I want to change colors, as wel as the alignment from left to more to the right side. I have tried multiple things which I have found in your documentation.: Directly into the ‘form context buttons’ rules within the advanced (form) settings, as in the ‘customize Form Designer but nothing happens. What am I doing wrong? Hope you can help me out. Many thanks in advance and have a great day!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author CodePeople2

    (@codepeople2)

    Hello @svd89

    Which CSS rules have you entered through the “Form Settings > Advanced Settings” tab?

    Another alternative would be to enter the styles directly through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab as follows:

    #fbuilder .pbSubmi,
    #fbuilder .pbPrevious,
    #fbuilder .pbNext{
    color: white !important;
    background-color: black !important;
    border-color: transparent !important;
    }

    Of course, using the preferred colors.

    If you prefer centering the buttons, you can include the following styles definitions too:


    #fbuilder fieldset{position:relative;}
    #fbuilder .pbNext,
    #fbuilder .pbSubmit{margin-left:52%;}
    #fbuilder .pbPrevious{margin-left:48%;transform:translateX(-100%);position:absolute;}

    For additional questions, please provide the link to the page containing the form to check your design modifications.

    Best regards.

    Thread Starter svd89

    (@svd89)

    Thank you so much! I can change the colors now, so that is great!
    Centering or align to the right doesn’t go so well. You can have a look right here.
    Thank you in advance!

    • This reply was modified 1 year, 6 months ago by svd89.
    Plugin Author CodePeople2

    (@codepeople2)

    Hello @svd89

    Please include the CSS rules with the !important modifier.


    #fbuilder fieldset{position:relative !important;}
    #fbuilder .pbNext,
    #fbuilder .pbSubmit{margin-left:52% !important;}
    #fbuilder .pbPrevious{margin-left:48% !important;transform:translateX(-100%) !important;position:absolute !important;}

    Best regards.

    Thread Starter svd89

    (@svd89)

    Thank you! You have been a great help. Really appreciate it.
    All the best!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Change CSS on Submit- Next- & Previous- button’ is closed to new replies.