Session5a

Good Evening Future WordPress Developers,

Tonight’s recap will be in two parts just to cut down on the post length.

We have a bunch on vacation so we spent extra time delving into the Contact Form 7 plugin and the Real Simple CAPTCHA plugin. These work hand in hand if you want to protect your site from unwanted bots and crawlers filling out your contact form.

We took the basic contact form and added various fields from the Generate Tag command. Yes, adding a field does sometimes require improvising. If you don’t make these forms all the time one thing you learn after doing a few of these is to save the completed code somewhere so you don’t have to reinvent the form or parts there of later on. After all, we’re talking about HTML Code that makes the form tick.

So……..after I got home tonight I made an example form on one of the WPclinic site pages for y’all to look at as an example of a contact form with a variety of options. I did not make this from scratch. I took the Form Code I have on my AfterFiveJewelryAppraisal Site and quickly modified it. The premise of the form is for someone to use Tiberius’ building facility for seminar purposes. The form includes questions we need answered so Tiberius, sorry….Jim, can quote the event cost and possibly book the seminar.

Follow this link to the Web Page Form.

Now…………we need to go take the completed form code for this particular Contact Page, save it in a Word Document or Notepad, and file it away in a special folder. Between the two sets of ******** below is all the code that comprises this contact form:

**********************************************************************************

<p>Your First & Last Name (required)<br />     [text* your-name] </p>

<p>Your Best Email Address (required)<br />     [email* your-email] </p>

<p>Your Phone #<br />     [text your-phone] </p>

<p>IF YOU HAVE QUESTIONS ABOUT THE SEMINAR PROCESS, JUMP DOWN TO THE MESSAGE BOX. ……….OTHERWISE CONTINUE RIGHT HERE. <br />

<p>Purpose Of Your Seminar (choose one). <br /> [select menu-687 include_blank “Business” “Non-Profit” “Personal”]

<p>In what size room would you like the seminar conducted? (choose one). <br /> [select menu-368 include_blank “400 sq'” “800 sq'” “1,200 sq'”]

<p>Preferred Day and Time.<br />      [text your-time]

<p>Things we need to provide for you – Check those you will need.<br />

[checkbox checkbox-261 “Coffee and Danish” “Cokes for Breaks” “Lunch” “Writing Materials”]

<p># Of Seminar Attendees You Expect.<br />      [text your-items] </p]

<p>Your Message<br />     [textarea your-message]</p>

<p>You Must Type These Klingon Characters In The Box Below<br />

[captchac captcha-910 size:l]

[captchar captcha-910]

<p>[submit “Send”]</p>

**********************************************************************************

This form’s code includes required and non-required fields (* beside the actual field name indicates required), drop down choices, check box choices, CAPTCHA requirement, and various open text input.

From here, if you’re having difficulty making your own contact form, you can paste the above into the Form Section on your Contact Page and then modify or delete what you don’t need.

Now don’t forget that you also need to scroll down and look for Message Body on the right side. Why? Because you need to replace that code as well. This is the code that determines what information you will be sent in a completed form’s eMail.

Once more, when you modify the Form Code you also need to modify the corresponding code in the Message Body so you get the “right stuff” eMailed to you.

The corresponding Message Body code for the form code above is between the two sets of ******* below. Don’t forget to save it in a safe place along with the Form Code.

**********************************************************************************

From: [your-name]
Your Best Email: [your-email]
Your Phone#: [your-phone]

Purpose of the Seminar: [menu-687]
Size of room: [menu-368]
# of Seminar Attendees: [your-items]
Preferred Day and Time: [your-time]
Things we need to provide: [checkbox-261]

Message Body: [your-message]

— This e-mail was sent from a contact form on WordPress For Dummies (http://wpclinic.net)

**********************************************************************************

And yes, you do need to change the last line that says which website the eMail came from.

To make sure it actually works I then went to the Tiberius page, filled out the form and sent the request. Here is a screenshot (from Jing) to show it is functioning.

WP_Clinic_Contact_Form_Pic

Couple of parting thoughts. First, once you get used to this you’ll have less and less need for the saved code……….but it’s always great to have it handy for a quick copy/paste. No, it’s not cheating…..it’s a shortcut. Second, when you click the Generate Tag feature and select an option, it may not always bring things in. You could get a big blank area. If so, just click the Generate Tag feature again and the data should magically appear. Don’t ask why, it just works. Third, make sure the right eMail address is set in the Contact Form. That would be the top line in the Mail section of the Contact Form.

That’s about it for the Contact Form 7/Real Simple CAPTCHA Plugin. Those attending should be just shy of expert. Those that missed tonight should be able to absorb most of it from the above recap.

And as always……………don’t be afraid to call me. 214-912-4544. It’s faster than waiting a week.

There will be another Session 5 posting to cover the rest of tonight’s happenings.

In interweb service, friendship and business,

Tom (TR) Ryan