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.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies