x First time here? Check out the FAQ
Join us a the Umbraco event of the year - get your Codegarden 14 early bird ticket today
  • Avatar56posts147karma

    Issues with form design

    Pat started this topic January 16, 2012 @ 04:17

    Hey,

    I need to make a basic form, where there are just 4 input text fields, each with a label next to them, and a submit button underneath.

    Sort of like this:

    Name ........... Telephone .............

    Email ............ Company ..............

                  SUBMIT

    I have no idea how to though! The basic form is just all under each other, and looks quite nasty.


  • Avatar4941posts9865karma
    HQComment with ID: 103473
    Tim Geyssens posted this reply January 16, 2012 @ 04:19

    Hey,

    You should be able to get the result you want by styling the form with css, so simply disable the default stylesheet and take full control


  • Avatar56posts147karma
    Comment with ID: 103478
    Pat posted this reply January 16, 2012 @ 04:25

    Hi Tim,

    I thought that'd be what I would have to do, but I can't seem to locate a CSS file for it.


  • Avatar209posts349karma
    Comment with ID: 103514
    Douglas Ludlow posted this reply January 16, 2012 @ 06:33

    You just need to add a reference to the stylesheet (or add <style> tags) in the head of the template that the form is being used in. View the source of the page with the form to figure out the html/class/id structure of the form and then go from there as far as styling it.

    The default template resides at ~/umbraco/plugins/umbracoContour/css/defaultform.css. But don't edit it. Do as Tim suggests and disable it in the actual form settings (check "Disable default stylesheet') and then create/modify your own stylesheet. I provide the path for it here so that you can see how the form is styled by default as a reference.


  • bev0 posted this reply January 16, 2012 @ 09:34

    Go to your contour form, hit Setting tab, put a check in the "Disable default stylesheet" checkbox.

    Then in your template, create a css file that would style those form fields.


  • Avatar56posts147karma
    Comment with ID: 103579
    Pat posted this reply January 17, 2012 @ 02:53

    Hi, I have disabled the default one.

    I have found the CSS, made a copy of it and had a look through it, seems a bit confusing. Am used to CSS, but defining where the different textfields go is confusing me.

    Any hints etc would be appreciated.


  • Avatar209posts349karma
    Comment with ID: 103686
    Douglas Ludlow posted this reply January 17, 2012 @ 04:06

    You'd probably want to do something with floats or absolute positioning.

    For floats, have a look at http://css.maxdesign.com.au/floatutorial/. Take a look at tutorial 4.


Please login or Sign up To post replies