3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

What the heck is wrong with all these form makers?

by RedShifted
2 replies
  • WEB DESIGN
    • |
Ok look I've already posted 1 thread about this. Did not get much help and its a relatively simple question.

I have researched the heck out of this. There is simply no results the display under "how to make form rows smaller" or "how to make form rows more narrow". I just don't understand how to ask it.

I've read countless tutorials, youtube, have used jotform, emailmeform, and like 3 other form makers even 1 from godaddy.

NONE of these form makers have a simple option to make the rows smaller.

I can't have all this space from 1 row to the next because I can't fit the form where it needs to be. It seems all these form makers doublespace between rows or something. I've made the font smaller, and the space does not go away.

This has always been a persistent issue too over the years. I can program a lot of things but when it comes to simple forms, its always a major PITA just to get the sizing proper. And its always the rows that look like crap.

How do people make their forms so tight and compact?

I'm working in dreamweaver and no matter what I do my fields always look like:

Name _______

Email _______

Phone _______


I need there to be just a tiny bit of space between rows. Can ANYONE PLEASE inform me of what I'm doing wrong? The form generators I've been using simply don't seem to do this. But I look at websites all around and they have nice compact forms. Well the good sites do. I still see tons of sites that seem to suffer the same problem, the forms just take up too much space.

If anyone can help me in anyway this is 1 problem I have not been able to solve for literally years. And I can't keep building sites wasting hours just on the form like this its ridiculous. I'm spending more time on the forms I make then the site itself, and they still don't look right.

Heres an example of what I mean:
NJ Energy Experts - Efficient Attic Systems.

A form I did. The form I'm doing now is going up top on a header which doesn't have a lot of space. So it can't have those big gaps between the rows.
#form #heck #makers #wrong
  • Profile picture of the author VegasGreg
    Adjust the sizes in your CSS/Stylesheet settings.
    Signature

    Greg Schueler - Wordpress Fanatic... Living The Offline Marketing Dream...

    {{ DiscussionBoard.errors[5676012].message }}
  • Profile picture of the author iuditg
    You can easily fix. This is what you have to do.

    Firstly when you are using <input> tag, make sure you define a class or ID to that. Then while targeting with CSS you can fix the rows and cols issues easily using the width and height tag.

    For example,

    HTML Code:
    <label for="name">name</label>
<input type="text" name="name" value="name" placeholder="name" class="name">
    that is a simple Name input. Now this is how the styling would go:

    Code:
            

.name{width:100px;height:20px;} //The height and width will affect the box sizes.
label{display: block;} //Added display block as they label property would occupy the entire space. If you want them to use inline that is Name : ____ box then remove the display block and it would show in line.
    You can further style this as per your need and add variety of stuffs.

    Also, I would advise you to look at these awesome form tutorials which would really enhance your form skills as they did for me:

    Bring Your Forms Up to Date With CSS3 and HTML5 Validation | Webdesigntuts+
    Build a Neat HTML5 Powered Contact Form | Nettuts+

    Practice these 5-10 times each and you would be perfect. Then you can start experimenting and playing around with different things and eventually start designing your own forms.

    Hope this helps, if you need more help or support feel free to PM ME
    Signature
    {{ DiscussionBoard.errors[5676214].message }}

Trending Topics