Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Pat 56 posts 147 karma points
    Jan 16, 2012 @ 16:17
    Pat
    0

    Issues with form design

    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.

  • Comment author was deleted

    Jan 16, 2012 @ 16: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

  • Pat 56 posts 147 karma points
    Jan 16, 2012 @ 16:25
    Pat
    0

    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.

  • Douglas Ludlow 210 posts 366 karma points
    Jan 16, 2012 @ 18:33
    Douglas Ludlow
    0

    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 39 posts 59 karma points
    Jan 16, 2012 @ 21:34
    bev0
    0

    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.

  • Pat 56 posts 147 karma points
    Jan 17, 2012 @ 02:53
    Pat
    0

    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.

  • Douglas Ludlow 210 posts 366 karma points
    Jan 17, 2012 @ 16:06
    Douglas Ludlow
    0

    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 Sign in or register to post replies

Write your reply to:

Draft