Monday, 19 December 2011 11:50

Contact Form Hell

Rate this item
(0 votes)
Dante and Virgil in Hell Dante and Virgil in Hell
I need a contact form, you would think that it shouldn't be too hard to find, well think again.

Spammers are rude little vermin who should be ridiculed and shunned by all when they are found. Spamming: It's just rude!

It would be especially nice to have A.A.S (Active Anti Spam) like the GOVCO where by the frelling spammers would be targeted by drones and obliterated. Them, their families and their little dogs too.


 

Here are my modest requirements.

  • It must be GPL.
  • Have working anti-spam captcha, Working.
  • It is not all gunked up with table markup.
  • It follows the MVC
  • It's not all gunked up with markup.

There are a lot of great programmers out there and while they are awesome on the PHP side, the HTML side of things is really lacking.

  FORMS and FORM ELEMENTS ARE BLOCK LEVEL ELEMENTS 

You do not need to wrap them in other block level elements, and wrapping them in tables is just farbot! I am just tired of chiseling forms out of archaic structures. Am I being too harsh?

Here is a example of what I mean.

<form id="form3" action="#" method="post" onsubmit="return checkform(this);">
  <h3><span>Contact Us</span></h3>
  <fieldset>
    <legend>Contact form</legend>
    <p class="first">
      <label for="name">Name</label>
      <input type="text" name="name" id="name" size="30" />
    </p>
    <p>
      <label for="email">Email</label>
      <input type="text" name="email" id="email" size="30" />
    </p>
    <p>
      <label for="phone">Phone</label>
      <input type="text" name="phone" id="phone" size="30" />
    </p>
  </fieldset>
  <fieldset class="last">
    <p>
      <label for="message">Message</label>
      <textarea name="message" id="message" cols="30" rows="10"></textarea>
    </p>
  </fieldset>
  <p class="submit">
    <button type="submit">Send</button>
  </p>
</form>

Lets clean out what we do not need

<form id="form3" action="#" method="post" onsubmit="return checkform(this);">
<fieldset>
<legend>Contact form</legend>
  <label for="name">Name</label>
  <input type="text" name="name" id="name" />
  <label for="email">Email</label>
  <input type="text" name="email" id="email" />
  <label for="phone">Phone</label>
  <input type="text" name="phone" id="phone" />
</fieldset>
<fieldset class="last">
  <label for="message">Message</label>
  <textarea name="message" id="message"></textarea>
</fieldset>
<button class="button" type="submit">Send</button>
</form>

Now the presentation of the form is a cakewalk with CSS

@charset "utf-8";
/* CSS Document */
#form3 {
    width:310px;
    border: 2px dashed #ccc;
    padding:8px;
    background:#000}
#form3 fieldset {
    background:#2c2c3c;
    border:2px solid #ff0;
    border-radius:10px;
    padding:20px; margin:0 0 6px 0}
#form3 legend {
    border:solid #ff0 2px;
    border-radius:8px;
    padding:4px;
    background:#2c2c3c;
    color:#d6d6d7;
    font-size:123%} 
#form3 label {
    display:block;
    font:weight:600;
    font-size:100%;
    color:#d6d6d7;
    text-transform: uppercase;
} 
#form3 input {
    display:block;
    width:250px;
    height:19px;
    margin:6px 0 6px 10px;
    border-radius:6px;border:1px solid:#ccc} 
#form3 textarea {
    display:block;
    width:240px;
    height:100px;
    margin: 6px 0 6px 10px;
    padding:5px;
    border-radius:10px} 
#form3 button.button {
    display:block;
    width:248px;
    height:32px;
    margin:10px 0 10px 34px;
    border-radius:6px;
    border:solid #ff0 1px;
    background:#2c2c3c;
    color:#d6d6d7;
    text-transform: uppercase;
    font-weight: 800;    
    }
#form3 .last {
    border-bottom: solid #ff0 1px;
}
<

Put the two data together with the presentation and it looks like this. DEMO

I am still working on this but feel free to let me have it while it is in process, by using the comments...

Related items (by tag)

More in this category: « Free Joomla Plugin

Submit Commment

Leave a comment

Make sure you enter the (*) required information where indicated.
Basic HTML code is allowed.

I Use Hostpapa

I recommend them

The Pitch

Banner
  • Site Updates
    Site Updates The site has undergone an extensive renovation. It's mostly there but there are still some bits to be cleaned up…
Dah Joat -Specialization is for insects
  
You are @Dah Joat *|*The Nerdery *|*Contact Form Hell