12 Replies Latest reply on Nov 13, 2017 7:00 PM by Jo Pitts

Changing Button style on a form via CSS

Jo Pitts Nov 13, 2017 12:54 PM

All,

I'm creating my first Marketo form, and started using the simple form theme, so I could overlay CSS from there.

I've added this into my custom CSS

.mktoForm .mktoButton {

border: 1px solid #f07d00;

color: #5e524d;

}

But for it is having no effect on the button when I do a preview.

What am I missing (given that I am both a marketo n00b and a CSS n00b, I will be missing something!)?

Cheers

Re: Changing Button style on a form via CSS

Sanford Whiteman Nov 13, 2017 1:01 PM (in response to Jo Pitts)

Please link to your page.
Like Show 0 Likes(0)

Actions
- Re: Changing Button style on a form via CSS
  
  Jo Pitts Nov 13, 2017 1:16 PM (in response to Sanford Whiteman)
  
  Here is my landing page - http://go.auranga.co.nz/AUR-2017-Test.html
  Here is what I am working towards achieving (including mouse over on the button) Register your interest
  
  Ultimately, I expect to be embedding the form directly, not via a Marketo LP
  
  Cheers
  Jo
  
  Like Show 0 Likes(0)
  
  Actions
  - Re: Changing Button style on a form via CSS
    
    Sanford Whiteman Nov 13, 2017 1:34 PM (in response to Jo Pitts)
    
    You would need to use !important on those because of the placement of the built-in Custom CSS <style> (i.e. above the Simple forms <style>). Or you could place your custom CSS in its own <style> tag that you place underneath the <form>, which is probably more manageable and would allow you to use the CSS cascade directly without !important.
    
    Like Show 0 Likes(0)
    
    Actions
    - Re: Changing Button style on a form via CSS
      
      Jo Pitts Nov 13, 2017 1:38 PM (in response to Sanford Whiteman)
      
      It does sound like !important is a bit of a kludge, so I'd rather dodge that.
      how do you mean in its own <style> tag that you place underneath the <form>?
      Assume I'm really n00bish, and struggling here
      Thanks in advance for the awesome help!
      
      Like Show 0 Likes(0)
      
      Actions
      - Re: Changing Button style on a form via CSS
        
        Sanford Whiteman Nov 13, 2017 1:53 PM (in response to Jo Pitts)
        
        how do you mean in its own <style> tag that you place underneath the <form>?
        Meaning you don't use the Form Editor's Custom CSS, since that makes it harder to override styles (it's better suited for adding non-conflicting additional styles, not changing them). Iinsert your styles in a separate
        
        <style> </style>
        
        That you place in the template/page underneath the <form>.
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: Changing Button style on a form via CSS
        
        Jo Pitts Nov 13, 2017 1:57 PM (in response to Sanford Whiteman)
        
        OK. I kind of understand.
        Out of interest, is it possible to add new themes over and above the 7 shipped, so that the them becomes the basis for any forms created?
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: Changing Button style on a form via CSS
        
        Sanford Whiteman Nov 13, 2017 2:22 PM (in response to Jo Pitts)
        
        It's not possible to add a new theme to the Theme Picker proper, but it's certainly possible to create a new theme that's stored in an all-inclusive CSS file.
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: Changing Button style on a form via CSS
        
        Jo Pitts Nov 13, 2017 4:03 PM (in response to Sanford Whiteman)
        
        Sanford,
        coming back to this idea of a separate <style> section.
        are you suggesting I take the embed code
        [code]<script src="//app-sn04.marketo.com/js/forms2/js/forms2.min.js"></script>
        <form id="mktoForm_1028"></form>
        <script>MktoForms2.loadForm("//app-sn04.marketo.com", "540-EFJ-058", 1028);</script>[/code]
        and after the <form id=...</form>
        add in a <style></style> loaded with CSS goodness?
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: Changing Button style on a form via CSS
        
        Sanford Whiteman Nov 13, 2017 4:27 PM (in response to Jo Pitts)
        
        Yes.
        
        P.S. To highlight code here, go into the Advanced Editor and click the >> button (BBCode like [code] isn't recognized).
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: Changing Button style on a form via CSS
        
        Jo Pitts Nov 13, 2017 4:37 PM (in response to Sanford Whiteman)
        
        Haha.. thanks. I was trying to work out where you got the nice formatting.
        
        I'll try and move my css into a <style> block. I also found moving to the 'plain' theme (rather than the 'simple' theme) makes the custom CSS work a lot better - I guess there is none being applied by default.
        
        Suddenly, the button code is working without !important.
        
        I truly appreciate the guidance!
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: Changing Button style on a form via CSS
        
        Sanford Whiteman Nov 13, 2017 6:48 PM (in response to Jo Pitts)
        
        If you want control over all styles, you should use this: MktoForms2 :; Destyle Marketo Form
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: Changing Button style on a form via CSS
        
        Jo Pitts Nov 13, 2017 7:00 PM (in response to Sanford Whiteman)
        
        Now that I like!
        It makes it much cleaner to start from scratch. Thanks Sanford!
        
        Cheers
        Jo
        
        Like Show 0 Likes(0)
        
        Actions

Go to original post