6
\$\begingroup\$

I am a total novice to web development, but I am trying to be a WordPress developer and have been actively at it for some weeks now. All self-taught with the world's best tool as my aid: the internet. Anyway, I was hoping that you guys could look at my (no doubt: shoddy) code and tell me what you think I could do to make it better. I made a contact form using the WP plugin Contact Form 7... this is the HTML I used for the form:

<div id="three-column">
  <div id="left">
    <p>[text* Subject akismet:author placeholder "Subject"]</p>
    <p>[email* Email akismet:author_email placeholder "Email"]</p>
    <p>[textarea* Message placeholder "Your Message"]</p>
  </div>
  <div id="center">
    <span>
    </span>
  </div>
  <div id="right">
    <p>[text* FirstName akismet:author placeholder "First Name"]</p>
    <p>[text* LastName akismet:author placeholder "Last Name"]</p>
    <p>[tel* Tel placeholder "Telephone"]</p>
    <p>[submit "Send"]</p>
  </div>
</div>

And now for the CSS...

/* FORM */

#three-column{
    width: 100%;
    margin-bottom:75px 0px 0px 0px;
}

#three-column #left{
    width: 47%;
    float: left;
    margin-right:0%;
}

#three-column #center{
    margin:0% 2%;
    float: left;
}

#three-column #right{
    width: 47%;
    float: left;
    margin-left:0%;
}

#three-column input[type="text"], input[type="email"], input[type="tel"]{
    border:none;
    border:2px solid #4274A5;
    font-size :20px;
    border-radius: 5px;
    width: 100%;
    padding: 18px 3px 18px 10px;
    font-family: 'Lovelo Black';
    color: #4274A5;
    margin-bottom:22px;
    height:20px;
}

#three-column textarea {
    font-size :20px;
    position: relative;
    color: #4274A5;
    padding: 18px 3px 3px 10px;
    border:2px solid #4274A5;
    min-width: 100%;
    max-width: 100%;
    font-family: 'Lovelo Black';
    margin-bottom:22px;
    min-height:127px;
    max-height:127px;
}

#three-column textarea:hover{
    -webkit-box-shadow: 0px 0px 22px 1px rgba(66,116,165,0.6);
    -moz-box-shadow: 0px 0px 22px 1px rgba(66,116,165,0.6);
    box-shadow: 0px 0px 22px 1px rgba(66,116,165,0.6);
}

#three-column #right input[type="submit"]{
    padding:18px 0px 18px 0px;
    background: #fff;
    color:#4274A5;
    border: 2px solid #4274A5;
    font-size: 20px;
    margin-bottom:22px;
    font-family: 'Lovelo Black';
    width:50%;
    height:60px;
}

#three-column #right input[type="submit"]:hover{
    -o-transition:.7s;
    -ms-transition:.7s;
    -moz-transition:.7s;
    -webkit-transition:.7s;
    transition:.7s; 
    background:#4274A5;
    color: #fff;
    border: 2px solid #4274A5;
}

body input[type=text].wpcf7-not-valid, body input[type=email].wpcf7-not-valid, body input[type=tel].wpcf7-not-valid, body textarea.wpcf7-not-valid {
    border: 2px solid #ec3c06!important;
}

body span.wpcf7-not-valid-tip {
    display: block;
    height:20px;
    margin-bottom:-20px;
    color: #ec3c06;
    border: none;
    position: relative;
    top: -22px;
    left: 10px;
    padding: 0;
    background: none;
    font-size: 15px;
}

body div.wpcf7-validation-errors {
    background: #ffe2e2;
    border: 2px solid #ff8a8a;
    color: #ec3c06;
}

body div.wpcf7-response-output {
    margin: 10px 0;
    padding: 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 5px;
}

body .wpcf7-mail-sent-ng {
    background: #fff2e2;
    border: 2px solid #ffbc8a;
    color: #e17731;
}

body .wpcf7-mail-sent-ok {
    background: #e8ffe2;
    border: 2px solid #6fdf51;
    color: #1ea524;
}

div.wpcf7-validation-errors {
    visibility:hidden;
}

div.wpcf7-mail-sent-ok {
    border: 2px solid #4274A5!important;
    background: white!important;
    color: #4274A5;
    font-family: 'Lovelo Black';
    font-size: 20px!important;
    position:relative;
    min-width:100%;
    float: none;
    clear:both;
    -webkit-box-shadow: 0px 0px 22px 1px rgba(66,116,165,0.6);
    -moz-box-shadow: 0px 0px 22px 1px rgba(66,116,165,0.6);
    box-shadow: 0px 0px 22px 1px rgba(66,116,165,0.6);
}

Just to give you an idea, I'm trying to style my form after the contact form on this WP theme (down torwards the bottom).

It's a nice contact box, but they don't allow for any adjustments on that theme, so I had to build and style my own. It also doesn't allow for akismet protection, so I was getting tons of spam emails.

Any advice would be very welcomed. I didn't use any media screen CSS to adjust the view for mobile sites because I attempted to make it fairly responsive, even as a two-column form, but if you think that would be optimal, please let me know.

PS - On the original form, they have this cool success message validation which I love... it sort of floats in from the top. Mine doesn't do that, I utilized the existing Ajax validation and just styled it to match the theme. Any advice as to how to replicate the original markup would be great. My guess is using jQuery which I know absolutely NOTHING about!

HTML Source for form:

<p style="text-align: left;"><div class="container-fluid ">
      <div class="row-fluid">
        <div class="container">
          <div class="row">
            <div class="wpcf7" id="wpcf7-f1305-p59-o1"><form action="/contact/#wpcf7-f1305-p59-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1305" />
<input type="hidden" name="_wpcf7_version" value="3.5.4" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1305-p59-o1" />
<input type="hidden" name="_wpnonce" value="fa6e557936" />
</div>
<div id="three-column">
<div id="left">
<p><span class="wpcf7-form-control-wrap Subject"><input type="text" name="Subject" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" placeholder="Subject" /></span></p>
<p><span class="wpcf7-form-control-wrap Email"><input type="email" name="Email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" placeholder="Email" /></span></p>
<p><span class="wpcf7-form-control-wrap Message"><textarea name="Message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" placeholder="Your Message"></textarea></span></p>
</div>
<div id="center">
<span><br />
</span>
</div>
<div id="right">
<p><span class="wpcf7-form-control-wrap FirstName"><input type="text" name="FirstName" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" placeholder="First Name" /></span></p>
<p><span class="wpcf7-form-control-wrap LastName"><input type="text" name="LastName" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" placeholder="Last Name" /></span></p>
<p><span class="wpcf7-form-control-wrap Tel"><input type="tel" name="Tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" placeholder="Telephone" /></span></p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
</div>
</div>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
          </div>
        </div>
      </div>
    </div></p>
\$\endgroup\$
  • 1
    \$\begingroup\$ Can you provide the generated HTML? Template code isn't very useful outside of your project (ie. I can't run it in a site like jsfiddle.net or codepen.io to see how it works). \$\endgroup\$ – cimmanon Nov 14 '13 at 16:09
  • \$\begingroup\$ I know this sounds bad, but I have no idea how to generate the HTML... :( \$\endgroup\$ – user2991456 Nov 15 '13 at 8:57
  • \$\begingroup\$ Cinnamon means what it looks like in the browser. Bring up the web page, view source, copy the relevant part. \$\endgroup\$ – Mr Lister Nov 15 '13 at 9:59
  • \$\begingroup\$ Thanks - I thought that's what he meant, but I was inspecting the element instead (using firebug) and couldn't see any valid source code... I'll add the code from the source view above (I believe) probably missing something though, knowing me. \$\endgroup\$ – user2991456 Nov 15 '13 at 10:24
7
\$\begingroup\$
#three-column input[type="text"], input[type="email"], input[type="tel"]

I'm pretty sure should be

#three-column input[type="text"], #three-column input[type="email"], #three-column input[type="tel"]

because your probably mean all inputs in #three-columns. The selectors after the commas don't get the #three-columns from the first one.


On the other hand,

#three-column #left

for a selector is not necessary; just

#left

will do. Because IDs should be unique, there is no way you can have another element on the same page which also has the id left.


Look out with giving things a color without also giving them a background-color. If the user of your webpage has different default settings than you, things like those will become unreadable.


Font-families should always end with a generic font family keyword, so

font-family: 'Lovelo Black';

is not enough. Use something like

font-family: 'Lovelo Black', sans-serif;

for a fallback, otherwise you won't know how the browsers handle a situation where Lovelo Black can't be displayed.


In

body input[type=text].wpcf7-not-valid, body input[type=email].wpcf7-not-valid, body input[type=tel].wpcf7-not-valid, body textarea.wpcf7-not-valid {
    border: 2px solid #ec3c06!important;

is the !important really necessary? If it is, it's good practice to precede the ! with a space, otherwise some older browsers will get confused. But do try to make the CSS work without it.
Also, starting the selector with body is superfluous, because inputs can't reside anywhere but in the body.


body span.wpcf7-not-valid-tip {
    display: block;

Does this absolutely need to be a span? It looks odd to have a span and then to change it into a block with CSS, while you can just as easily use a div and won't have to change it. (Of course, this depends on your HTML situation; you can't insert a div everywhere that you can put a span.)


box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

should be sorted so that the unprefixed version is last.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
\$\endgroup\$
  • \$\begingroup\$ That is brilliant stuff, so helpful. Thank you! As said, I'm a complete novice, so this is all good stuff. \$\endgroup\$ – user2991456 Nov 15 '13 at 8:51
  • \$\begingroup\$ You're welcome. Hope I didn't come across as too harsh; in some cases it's not easy to put in words why things should be written a certain way, so I may sound like "do this! do that!" without enough of an explanation. I'm not teacher, so, sorry. If you have questions, just ask. \$\endgroup\$ – Mr Lister Nov 15 '13 at 9:55
  • \$\begingroup\$ No, not too harsh at all... I really am a fish out of water, so all help is welcome and to be honest, it all makes sense... you explained well. One thing I have wondered (because I've heard it before) is not to use !important if you don't have to... why is that? I can guess that it would be that you shouldn't HAVE to if you're coding correctly. In this case, my code is in a child theme, so it is inheriting a lot of values from a parent (perhaps the parent also has background values for the boxes with color... not sure), so the !important was needed because it wasn't working without it. \$\endgroup\$ – user2991456 Nov 15 '13 at 10:29
  • \$\begingroup\$ !important plays havoc with the normal cascading rules. Normally, you can always ensure that your style is applied, by taking care that the specificity is high enough, or your style comes after the style in the stylesheet you want to overrule, or, to play it safe, put your style in an inline style attribute. But !important throws all those conventions out of the window and applies itself regardless. \$\endgroup\$ – Mr Lister Nov 15 '13 at 14:16
  • \$\begingroup\$ In other words, it's is a dirty trick that you should only use as a last resort. In fact, the only excuse you can have is if you want to override a stylesheet that a) contains !important itself, and b) you cannot make changes to. \$\endgroup\$ – Mr Lister Nov 15 '13 at 14:17
4
\$\begingroup\$

First off, your markup is invalid. You have a paragraph containing block elements (div, other paragraphs), when they are only allowed to contain inline elements.

The rest of your markup is less than optimal, to be polite. You have so many empty elements being used to simulate whitespace when there's absolutely no need.

There are no labels used here at all. There are still plenty of popular browsers that do not support placeholder text, so the user is left wondering what to do. Even if the browser does support placeholders, the user loses sight of what field is what.

This form does not adapt well to narrow viewports (eg. handheld devices).

Here's a quick demo of how the form's markup/styles can be improved from a structural standpoint:

http://cssdeck.com/labs/gis9h2nm

<form action="/contact/#wpcf7-f1305-p59-o1" method="post" class="wpcf7-form" novalidate="novalidate">
    <input type="hidden" name="_wpcf7" value="1305" />
    <input type="hidden" name="_wpcf7_version" value="3.5.4" />
    <input type="hidden" name="_wpcf7_locale" value="en_US" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1305-p59-o1" />
    <input type="hidden" name="_wpnonce" value="fa6e557936" />

    <fieldset class="contact-info">
        <legend>Your Contact Information</legend>

        <label class="wpcf7-form-control-wrap Name">Name <input type="text" name="Name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" placeholder="John Doe" required /></label>
        <label class="wpcf7-form-control-wrap Email">Email <input type="email" name="Email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" placeholder="jdoe@example.com" required /></label>
        <label class="wpcf7-form-control-wrap Tel">Phone Number<input type="tel" name="Tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" placeholder="(555) 555-5555" /></label>
    </fieldset>

    <fieldset class="message">
        <legend>Your Message</legend>

        <label class="wpcf7-form-control-wrap Subject">Subject <input type="text" name="Subject" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" required /></label>
        <label class="wpcf7-form-control-wrap Message">Message <textarea name="Message" cols="40" rows="5" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" required></textarea></label>
    </fieldset>

    <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" />
</form>

CSS:

form {
  -webkit-columns: 17em;
  -moz-columns: 17em;
  columns: 17em;
}

fieldset {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

fieldset.contact-info {
  min-height: 14em;
}

label {
  margin: .5em 0;
  display: table;  
}

label:last-child {
  display: margin-bottom: 0;
}

label input, label textarea {
  display: table;
  width: 15em;
}

You don't need to use a legend, but fieldsets are the ideal way to group similar form elements together.

\$\endgroup\$
2
\$\begingroup\$

One thing that I can see is that you are not consistent with the units you use for measurement on padding, margins you should be consistent with this as different browsers will display % and px differently.

I have heard that you should always try to use em as your unit instead (no reference link for this so I will not go into this in depth)

Whatever you want to do you, should always try to be consistent with the measurement that you use for these things.

Padding and Margins should always be done in static units like px (I am finding it hard to elaborate the explicit reason with text)

A 5% Margin on the left will change when someone zooms in or out, where as pixels won't change when you zoom in or out, meaning that the margin will stay relative to the zoom percentage. If you mismatch, you could end up with some blocks of code that get really big and some that get smaller when you zoom in or out on the browser.

Another thing, a minimum width probably shouldn't be a percentage even if it is 100%. if you want it to be a minimum of 500px put 500px.

\$\endgroup\$
  • 2
    \$\begingroup\$ There's no reason you have use px for margins/paddings over units like em, pt, cm, in, etc. Px resize with zooming just as much as any other unit does. \$\endgroup\$ – cimmanon Nov 14 '13 at 16:07
  • \$\begingroup\$ @cimmanon: I agree with you, I prefer Pixels or ems, the point is that you should use something static instead of something dynamic like percentages \$\endgroup\$ – Malachi Nov 14 '13 at 16:10
  • \$\begingroup\$ This is helpful to me, because on resize, even though things were looking mostly right, I did lose the margin. Thanks! \$\endgroup\$ – user2991456 Nov 15 '13 at 8:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.