Skip to main content
Christine_LeBla
Christine_LeBla
Level 4
November 21, 2018
Question

re-style button in form builder

  • November 21, 2018
  • 2 replies
  • 8588 views

In the form editor, where you can drop in custom code - not sure why I do not see the result in the preview. Does page need to be published?

I have read other threads about building such styles into the base template; but for now I'd like to test this method:

.mktoForm .mktoButtonWrap.mktoPurpleCandy .mktoButton {

   background-color: #16149a !important;

   color: #ffffff !important;

   font-size: 18px !important;

   font-weight: bold !important;

   padding: 0 10px !important;

   transition: 0.3s !important;

} 

.mktoButton:hover {

   background-color: #6754b8 !important;

  } 

Thanks.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
November 21, 2018

Unfortunately, you're correct. 

On the strained rationalization bright side, the way the form is rendered in the Form Editor isn't going to reflect the surrounding DOM and document CSS anyway, so you could get drastically different layout from your production layout, even if did parse the Custom CSS.

    Dave_Roberts
    Dave_Roberts
    Level 10
    November 22, 2018

    Hey Christine,

    While you won't be able to see your Custom CSS in the "Field Details" menu inside the Form Editor, you should be able to click the "Preview Draft" button in the top right to be able to see your button styles change.

    If your updated button styles aren't showing up in the Preview Draft, here's a few ideas:

    In this case, it looks like you're writing styles to the "purpleCandy"-style button only -- I wonder if maybe you're not seeing the updates b/c you don't have the purpleCandy button chosen from the Button Styles panel?

    If you've got a different button in there, it's likely that your styles are getting ignored b/c they're written to only apply to the "button wrap" with a class of "purpleCandy".

    You could try:

    If you were to remove the ".mktoPurpleCandy" from your CSS, it would instead point at any button wrap that's got a button inside of it.

    Another solution might be to make sure you've got the purpleCandy button selected - you can find it by clicking "Edit" in the sidebar next to "Button Styles".

    *note: You shouldn't need to approve/publish anything to see your CustomCSS updates using the "Preview Draft" functionality. Any form styles that are on your template however will not show here, you'd need to place the form into the Landing Page and re-approve, then preview the page to be able to see 1) the styles from the Custom CSS on the form AND 2) any form styles that are on your template -- at the same time.

    For what it's worth, as much as possible, I avoid using the "Button Styles" picker or changing the "Form Theme" b/c it usually isn't "exactly" what you're looking for (in terms of branding/styles) and generally presents another layer (like the purpleCandy-specific stuff to dig thru when you're not using it). I think it's generally better practice to use the default button styles and "Simple" theme (1 of 7) and add your custom styles on top of that either into the Custom CSS for this form or to the template or external stylesheet. That way, you're moreso "adding" your brand instead of "removing" a brand (purpleCandy) and then trying to apply yours on top of that.

    Christine_LeBla
    Christine_LeBlaAuthor
    Level 4
    November 26, 2018

    Hi,

    Thank you for the information, some of which answered lingering questions I had.

    Checked all those things out, and it looked good on my end of things - even tried removing the purpleCandy reference + reverted the style overall to the 'simple' form theme instead & updated styles. Applied universal selector too. I have tried to no avail to target the button to change the color and nothing works. No problem viewing those same styles & editing in Chrome Dev Tools.

    Another super frustrating item everyone should be aware of is placement of the button. If you manually center it, it is not responsive so you won't see it on mobile phone display (it is wrapped in a span tag). - I tried targeting it with margin: 0 auto !important;  ...again, the system just does not like it. Also tried creating a media query with same. As a last result, I had to keep the button at its default left flush / left align position. Controls for this should certainly be built in at the form level for users.

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    November 26, 2018

    ...I tried targeting it with margin: 0 auto !important; ...

    You didn't say which selector you used, though.

    This selector works for me:

    span.mktoButtonWrap {
      margin: 0 auto !important;
    }
    Terms & ConditionsAccessibility statement

    Loading footer...