9 Replies Latest reply: Jul 4, 2013 8:39 PM by Liam Dilley RSS

    BC Web Form check boxes running into text

    William Noel Community Member

      How to fix alignment of BC web form.

      check boxes running into text.

      see screen shot

       

      Screen Shot 2013-07-03 at 11.18.35 PM.png

        • 1. Re: BC Web Form check boxes running into text
          Liam Dilley CommunityMVP

          Quick option add a space after the input field.

          More full and proper sollution is to have a good CSS formation for your forms and margin/float those checkbox elements etc.

          As a useability note, the less vertical scroll you have on forms the better.

          • 2. Re: BC Web Form check boxes running into text
            William Noel Community Member

            Liam,

             

            The contact form and the login form look nice - they dont have checkbox items.

             

            This application form looks bad, all check boxes fields are cramed up.

            - your suggestion "space after input field" not sure where I do that? In the BC form creator?

             

            Thank You for your help!

            • 3. Re: BC Web Form check boxes running into text
              Liam Dilley CommunityMVP

              You can 100% change the html of any form. Depends on how you added a form to the page.

              If you have done it raw html then you go the page and edit the html. If you have added it as a module then you go to the form itself and customise web form. Then grab the html, edit it in your prefered editor and paste it back in.

               

              I NEVER do a default BC form, I remove all templates and construct them within the framework I have built.

              • 4. Re: BC Web Form check boxes running into text
                thetrickster888 Community Member

                Anything that looks bad on a website can be fixed by CSS? The best bet for you is to edit the markup of that form with the checkboxes and add a class to those checkbox input elements... for instance a class of "form-checkbox" and then in your CSS file, include this CSS code:

                 

                .form-checkbox { margin-right: 5px; }

                 

                or even:

                 

                .form-checkbox { margin-right: 1em; }

                 

                That will put a margin to the right of your checkbox input elements either 5px wide or 1em wide (which is essentially one length of your font size).

                 

                If you don't know how to add/edit html markup to your form then you could try adding this CSS to your CSS file:

                 

                form input[type='checkbox'] { margin-right: 5px; }

                 

                or

                 

                form input[type='checkbox'] { margin-right: 1em; }

                 

                if you want to use EMs instead of pixels.  I would highly recommend learning a bit more about CSS and HTML because it would save you time posting to these forums for these simple fixes.  CSS styles your webpage's content and every web designer should know CSS and fix this issue pretty quickly.  Muse is a good tool but unfortunately it doesn't teach you the underpinnings of the web which you'll need if you want to do any sort of customization outside of what Muse or other WYSIWYG tools.

                 

                Good luck. Let me know how it goes.

                • 5. Re: BC Web Form check boxes running into text
                  William Noel Community Member

                  Liam,

                   

                  Yes - I started doing what you said

                  - edit html in Dreamweave

                  - I always copy the raw html from BC and paste in the div class of my page.

                   

                  You remove all templates in the BC from? 

                  Do I go to > customize web form > cell properties >table properties and  "clear class" in the BC form, is that the same as "remove all templates" like you said?

                   

                  Or is there another trick to removing all templates?

                   

                  Thank You!

                  • 6. Re: BC Web Form check boxes running into text
                    William Noel Community Member

                    thetrickster,

                     

                    Thank You for your help

                     

                    Here is my css for the web form - with the added checkbox and radio button elements you suggested.

                    I don have the last two lines written correctly - can you show how it should be?

                     

                    .box, .box_mini {

                        padding: 35px;

                        background: #052C47;

                        form input:[input type='checkbox'] margin-right: 10px;

                        form input:[input type="radio"] margin-right: 10px;

                    }

                    • 7. Re: BC Web Form check boxes running into text
                      Liam Dilley CommunityMVP

                      I do not use tables at all anywhere on sites, I remove the tables and depending on layout add classes and relevent html to elements.

                      To be fair this is basic HTML and CSS knowledge. It is worth doing to get your forms looking a lot better, I do not think BC will be changing the way forms work any time soon so its something that everyone needs to know to be able to get more out of them for the time being.

                      • 8. Re: BC Web Form check boxes running into text
                        William Noel Community Member

                        Thanks Liam,

                        I got the CSS finally right and now its fixed.

                        • 9. Re: BC Web Form check boxes running into text
                          Liam Dilley CommunityMVP

                          Look to make a common set to use for all your forms.