2 Replies Latest reply: Sep 4, 2013 12:37 AM by CWLMedia RSS

    Can someone please walk me through how to apply CSS styles to webforms?

    CWLMedia Community Member
    CWLMedia Sep 3, 2013 4:52 PM

      Hey all,

       

      Okay, so, granted, I'm not great with any form of code, but I figure CSS is generally supposed to be fairly simple.
      The supposed "integration" between Muse and Business Catalyst however, is not; It's getting there, but there's still a whole lot left to be desired.

       

      I've been playing around whilst setting up my own website (for far too long now, I might add!), and managed to style a lovely simple contact form in Muse, which initially did nothing but e-mail me the webform results after submission, but after updates to Muse (probably not recent ones, but I haven't checked 'till recently), it now follows a workflow in BC and adds the customer details to the CRM database (yay!).

       

      That's all well and good, but what happens when a client wants a more complex webform? What happens when they want ReCaptcha?
      Well for a start the ReCaptcha module just DOES NOT seem to work in webforms. I don't have a clue as to why, but a) visibly it LOOKS broken, and b) it always comes back with an error as if the words were entered in incorrectly - even when they are definitely entered correctly. So that's one issue: Is there a way I can fix that, or is this a BC issue and we all just have to sit and wait for the team to eventually MAYBE get round to fixing it, like so many other bugs in the system a lot of us pay a lot of money to become partners of?

       

      The other issue, I hope, is much more simple:

      Forms created in BC, as we all know, show up in a fairly basic manner - no bells or whistles. But I'm looking at it using firebug and I can't actually see any "classes" applied to each text (header) element of the webform; I can see classes applied to the actual form fields, but it's the headers above I want to style (such as "First Name", "Last Name" etc.) and any other text such as the "* required" line at the top - am I just being blind?

       

      What's the process/workflow for editing/styling a BC created contact form (or any form for that matter, as I've got a newsletter subscription form to style too!) - I can't seem to find any step by step instructions for how to accomplish this?

       

      I'm aware I need to be in the ModuleStylesheets.css file, but that's about all I know for certain with regards to where I need to be and what I need to do. I've tried following through some tutorial videos but if I manage to find a video which mentions styling contact forms, they seem to always skip over the part where they actually do the styling!

       

      I need someone to basically walk me through the whole process of defining the font (I want to use a webfont already listed and applied in the stylesheets doc), colour and size of the form headers, and preferably also how to style the submit button - and if possible, for each state.

       

      As I say, the Muse version works fine, but I feel this is something I "NEED" to know.

       

      So in short, I'm asking if anyone out there can spare the time to walk me through how to take my contact form (and newsletter form) from this: http://www.kontentkatalyst.com/contact.html to this: http://www.kontentkatalyst.com/contact2.html by styling the form generated by BC.

       

      And if anyone knows what's happened to ReCaptcha and has a fix for it, that'd be lovely too!

       

      Thanks

        • 1. Re: Can someone please walk me through how to apply CSS styles to webforms?
          Simon Darby Community Member
          Simon Darby Sep 3, 2013 6:58 PM (in response to CWLMedia)

          I don't know anything about Muse sorry, but you should be able to overwrite the BC styles with your new styles either by using the same styles names, or adding all new ones (my preference). For example, I often use Bootstrap as a starter template, and it has some nice form styles already setup (easy to customize). Put all your new form CCS in a custom style sheet (custom.css for example) and place the link to it below all other stylesheets in your header so it overrides the BC standard stylesheet. You need to be sure that you remove styles from the inputs too if you have a replacement stlye (check Bootsrap if only to see how that works). For example, Bootstrap applys an overall class called .form which goes in the form tag like <form class="form"> which pretty much takes care of a lot of formatting. And while it's obvious, you need to keep the same ID tags, and javascript validation. BTW, some of classes you could not find are associated with the form element, like 'input' has styles, so you need your own input style too (again, Bootstrap takes the pain out of wrting all that fresh, and it's easy to alter).

          • 2. Re: Can someone please walk me through how to apply CSS styles to webforms?
            CWLMedia Community Member
            CWLMedia Sep 4, 2013 12:37 AM (in response to Simon Darby)

            This is where I apologise for being new to code languages etc.

             

            My problem is I don't know where, which bits, and what to edit/add. I need a full walkthrough if someone can spare the time. Just enough of a walk through to accomplish what I outlined in the original post..

             

            I need to be able to do this using Muse and BC collaboration...

             

            I do like the idea of bootstrap for those who are a bit further on than me with regards to HTML/CSS and whatnot, but not something I'll be touching any time soon! I'm barely comfortable with Muse, and BC just seems to make things unnecessarily more complicated, the more I learn!

             

            I'm sure if someone were willing to take a little time to take me through step-by-step what I need to do to style my forms, I'll understand the process a lot better. Just needs to be done between Muse and BC is all!