Rainmaker Web Design » Wade Sonenberg

Using Contact Form 7 in a Modal/Lightbox Window

Wade Sonenberg — Wed, 23 Jun 2010 07:08:41 +0000

We just wrapped up a modal contact form utilizing Takayuki Miyoshi’s “Contact Form 7″ plugin for Wordpress. Thought we’d share process, we’ve been using both lightbox style modals via jQuery and CF7 for some time – just not together until now.

About Contact Form 7

CF7 is a wonderful plugin for inserting contact forms of all types in Wordpress web sites. It supports multiple forms, multiple emails, and even has a handy interface to handle the HTML for you. You simply paste a short code in your post or page in order to insert the contact form, which looks something like: [contact-form 1 "My Contact Form"]

You may also use the plugin as part of your Wordpress theme, which is exactly what we’ll do in the steps below:

Install CF7

Download and install Contact Form 7 if you have not.
Upload the Images

Upload the two image files to your theme’s directory ( wp-content/themes/your-theme/images/ )
Download them here.

Add a new CF7 Form

You may use the editor to create any form you like, or you may copy & paste the code below into the “Form” section of the CF7 admin area:


Contact Information
Your Name:[text* name id:evalName]
Phone:[text* evalPhone id:evalPhone]
Email:[email* evalEmail id:evalEmail]



Utility Information
Avg. Electric Bill:[text evalBill id:evalBill]
Electric Company:[text evalUtility id:evalUtility]
Property Type:[radio evalResCom id:evalRes  "Residential" "Commercial"]
Additional Notes:[textarea evalNotes id:evalNotes]
[submit id:evalSubmit]



Site Information
Site Address:[text evalAddress id:evalAddress]
Site Address 2:[text evalAddress2 id:evalAddress2]
City:[text evalAddress2 id:evalAddress2] 
State:[select menu-838 id:evalState include_blank "AL" "AK" "AZ" "AR" "CA" "CO" "CT" "DE" "FL" "GA" "GU" "HI" "ID" "IL" "IN" "IA" "KS" "KY" "LA" "ME" "MD" "MA" "MI" "MN" "MS" "MO" "MT" "NE" "NV" "NH" "NJ" "NM" "NY" "NC" "ND" "OH" "OK" "OR" "PA" "PR" "RI" "SC" "SD" "TN" "TX" "UT" "VT" "VI" "VA" "WA" "WV" "WI" "WY"] Zip: [text evalZip id:evalZip]

Click “Save” at the bottom.

Insert HTML/PHP Markup for Your Theme

sidebar.php
Add the link that will activate the lightbox and show the form. We’ve chosen to insert it in the sidebar, but you may place it where ever you wish in your theme.

<a id="reqEval" href="/contact/" title="Free Site Evaluation">Request a Free Evaluationa>

*Note, we’ve directed the link towards the contact page in case the visitor doesn’t have javascript enabled.

functions.php:
(If you’re not running Wordpress 3.0 yet, this will tell WP to use jQuery’s newest version)
Add:

//== USE JQUERY 1.4 INSTEAD OF DEFAULT ==//
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
wp_enqueue_script('jquery');
}

header.php
a.) In the section, add:

b.) Immediately after the tag, add:



/images/close.png" alt="[X] Close" />
Request a Free Site Evaluation
Fill out the form to request a solar site evaluation. There is no cost or commitment, and we never share your information.

*note the [contact-form 1 "Contact form 1"] parameter of the do_shortcode() function. If you already have CF7 forms running, you’ll need to change this.
Style.css
Insert the following styles in your style sheet:

/* EVAL FORM */
div#curtain{
background:url('images/curtainbg.png');
height:1000px;
width:100%;
position:absolute;
top:0;
z-index:999;
display:none;
}

div#evalcontainer {
text-align:left;
position:absolute;
overflow:hidden;
width:800px;
height:470px;
left:50%;
top:30px;
margin-left:-400px;
border:3px solid orange;
background:#F6F3F1;
z-index:1000;
display:none;
font-size:80%;
}
div#evalcontainer h2{
margin:0 0 10px 0;
padding:5px 15px;
background:#FFEE82;
border-bottom:1px solid #C6B865;
}
div#evalcontainer h3{
position:relative;
top:-12px;
left:50px;
margin:0;
padding:0;
background:#F6F3F1;
width:200px;
text-align:center;
}
div#evalcontainer p{
margin:0 10px 10px 10px;
}
div#evalcontainer label{
width:120px;
float:left;
text-align:right;
margin-right:10px;
}
div#evalcontainer input[type=text]{
width:150px;
border:1px solid #ccc;
background:#FFFBF4;
}
div#evalcontainer select, div#evalcontainer textarea{
border:1px solid #ccc;
background:#FFFBF4;
}
div#evalcontainer input[type=text]:focus{
background:#fff;
}

div#evalContact {
border:1px solid #ccc;;
float:left;
width:380px;
margin:20px 0 43px 12px;
}
div#evalSite {
border:1px solid #ccc;;
clear:left;
float;left;
width:380px;
margin:12px 0 0 12px;
}

div#evalUte {
border:1px solid #ccc;
float:right;
width:380px;
margin:20px 12px 0 0;
}
#evalZip{
width:67px !important;
}
#evalNotes{
height:100px;
margin:0 0 0 12px;
}
#evalSubmit {
padding:0 20px;
text-shadow:0 0 2px #000;
color:#fff;
background:url('images/evalsubmitbg.png');
border:1px solid #382213;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-family:'arial black';
font-size:18px;
margin:10px 12px 15px 0;
float:right;
}

#evalClose {
float:right;
margin:3px 3px 0 0;
border:none !important;
}
#evalClose img{
border:none !important;
}
/* END EVAL FORM */

			<a id="reqEval" href="http://rainmakerwebdesign.com/dev/gssolar/contact/" title="Free Solar Site Evaluation"><img src="http://rainmakerwebdesign.com/dev/gssolar/wp-content/themes/sandbox/images/request.png" alt="" />a><br />(602) 493-1135

Canoe for Sale

Wade Sonenberg — Tue, 22 Jun 2010 01:05:30 +0000

Just in case any body is looking, I’m selling my Mad River 17′ Square-back Canoe. Asking $600.

Mad River, Orion Expedition Model
Three seats, middle one is removed in photos for expeditions
Oar locks for the middle seat
Square back for mounting a trolling motor

Selling the boat because I got a Jon Boat for my birthday. This boat has been awesome, paddling equally well on Chattahoochee trout trips, Chattooga white water, and multi-day expeditions down the Oconee and through the Okefenokee swamp. It handles like a much smaller boat in rapids, yet still tracks well and is a breeze to paddle when loaded down with 600+ pounds of paddlers and gear.

Here’s some photos, email me if interested. Dog not included.

Matt Mullenweg Wordpress Interview

Wade Sonenberg — Mon, 03 May 2010 22:25:30 +0000

For those of you not familiar with Matt, he’s one of the original developers of that little software package we call Wordpress. No news or insight into WP 3.0, but some of the answers are fascinating – I especially like his analogy for Wordpress.com vs. Wordpress.org…

Thanks to Anthony Brewitt for the great find.

Google to Penalize Slow Loading Websites

Wade Sonenberg — Fri, 16 Apr 2010 21:55:17 +0000

Something that has been hinted upon for a couple years, was finally announced – Big G is working a penalty for slow load time into their algorithm. According to Google’s Webmaster Central blog, the penalty at this time is a minor one, and only affects:

less than 1% of search queries
only queries in English made through Google.com

As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there.

It goes on to say that the penalty doesn’t count as much as “Relevancy of the page” – but what else does?

You can check your website’s load time at Pingdom.

Some tips to speed up web page load times:

Reduce HTTP requests
- Combine all javascript files into one
- Combine all CSS files into one
- Use CSS Sprites to reduce number of background images needed
Reduce the number of images on a page
Optimize images to reduce their file size
Use an Expires or a Cache-Control Header
Minify CSS and Javascript
Use HTML and CSS over images where ever possible.

Facebook Networking for Business: It works

Wade Sonenberg — Wed, 07 Apr 2010 20:46:55 +0000

Just thought I’d share an example with everyone, saw this on Facebook today – the names & pics have been blurred to protect the innocent:

Building a good network, and asking for help couldn’t be more easy. Ten years ago, this would have taken hours and hours, now just 15 seconds.

Keeping Your Website’s Copyright Date Current with PHP

Wade Sonenberg — Wed, 07 Apr 2010 04:08:18 +0000

It seems it’s more prevalent around the turn of the calendar year, but why not cross it off your yearly list without even doing anything?

50% Off for Green Companies

Wade Sonenberg — Tue, 06 Apr 2010 10:15:23 +0000

We’re offering a 50% discount on all web projects for green businesses from now until Earth Day

That’s right, until April 22, 2010 we’re slashing all web design, SEO, and social media marketing projects in half. As a web design & marketing firm, we’re limited in how much we can recycle, eliminate waste, and cut our carbon foot prints…. so we’ve decided to put our money where our mouth is and try to give eco-friendly businesses a leg up.

How it will work:

We’ll run the same free cost estimates at half our hourly rates for qualifying businesses that commission their project by days end April 22nd, 2010. By qualifying businesses, we mean businesses that make a substantial portion of their revenues by marketing, selling, or producing green products and services. “Substantial” will be at our sole discretion, but we mean to help as many green businesses as we can in hopes that we can make this planet a little cleaner and greener for us and our children.

Why we’re doing it:

While chatting last week, it came up that we’re in little position to green our business aside from offering green hosting, operating a paperless office, and telecommuting – the last two we already do! So we figured that if we can help a few green companies be a little more competitive, or offer their employees a little something extra – then it’s well worth tightening our belts for a couple months to do the right thing.

Limitations:

The program is limited to the first $20,000 in discounted services, if we reach it we’ll be happy to reach out to other firms in order to accommodate as many green companies as we can.
Rainmaker Web Design will make the sole decision of who qualifies, feel free to contact us to discuss.
All discounted projects must be contracted by midnight April 22nd, 2010

SEO Friendly CSS Galleries

Wade Sonenberg — Tue, 30 Mar 2010 05:36:08 +0000

We’re compiling a list of SEO Friendly CSS galleries for designers who are interested in getting a little link love while showcasing their work. To be considered, the galleries must either have a direct, do-follow link from the actual gallery or a direct do-follow link from a sub-page featuring the work.

We’ll update this page regularly, and hopefully provide an Excel download once the list grows a little bit – so feel free to comment with anybody we missed.

http://wpelites.com/

Google Local Search: An In Depth Look

Wade Sonenberg — Tue, 30 Mar 2010 05:03:18 +0000

The introduction of Google’s Local Search into it’s regular results (Universal Search) has been a real game changer as more, and more categories and locations are offered up near the top of organic searches. We’re going to cover the bases on what to do to improve your business’s rankings in the local search results & a few pot holes to steer away from. Please note, it’s no substitute or an organic search engine strategy, but can compliment one very well since many of the same content and inbound linking principals still apply.

Your Site’s Contact Page
- First of all – have a contact page! Title it “Contact” as is the convention around the web, and name it something like “contact.html” or “contact-my-company.php.”
- Include a full address including city, state, and zip code within the locale that you’re targeting.
- Include a local phone number, i.e. – make sure the area code matches the the targeted location’s.
- Have multiple locations? If you run a multi-national corporation, why not hire an SEO company to rank your locations because it gets a little tricky and is outside the scope of this post.
Title Tags, Meta Tags, and Your URL
- Use a hCard in your website’s head section. Learn here, create here. Simply use it as the markup/HTML for that part of your contact page.
- City/State in Contact Page Title Tag
- City/State in Index Page Title Tag
- Location in URL (Ex. – AthensGAWebDesigners.com)
Your Local Business Profile
- 1st, go to Google’s Local Business, and claim your business’s profile if you haven’t yet.
- Profile using local phone number (area code matching the target location)
- Location in Profile Title
- Service/Product in Business Category Fields
Customer/Client Reviews
- Customer Reviews are Important!
- And it’s not just the reviews on Google Maps itself -
- Google feeds it’s listings with dozens if not hundreds other third party review sites. For example: Kudzu.com, Yelp, InsiderPages, and many industry specific review services.
Pitfalls & What not to do
- Don’t List a 1-800 number on your profile or on your contact page, I know it makes no sense. Have one, get your web guys to use an image to display it.
- Negative Reviews – I know they’re hard to stop, but if you can contact the reviewer & ask them to remove it – do it.
- Don’t use multiple Business Profiles with:
  1. The same business name
  2. The same phone number
  3. The same address (this one is particularly detrimental)

What is Google Wave? Two Video Perspectives

Wade Sonenberg — Thu, 25 Mar 2010 04:34:34 +0000

So what is Google Wave, what can it do for my business, and how can I get an invite to try the thing out?

Can’t help you with the third, but hopefully these two videos will help out. The first is a great introduction , in my opinion much better than the techno jargon filled Google intro on their site. The second, is pretty darn entertaining but shows off a good bit of what Google Wave can do….

Rainmaker Web Design » Wade Sonenberg

Using Contact Form 7 in a Modal/Lightbox Window

About Contact Form 7

Install CF7

Upload the Images

Add a new CF7 Form

Contact Information

Utility Information

Site Information

Insert HTML/PHP Markup for Your Theme

Request a Free Site Evaluation

Canoe for Sale

Matt Mullenweg Wordpress Interview

Google to Penalize Slow Loading Websites

Some tips to speed up web page load times:

Facebook Networking for Business: It works

Keeping Your Website’s Copyright Date Current with PHP

50% Off for Green Companies

We’re offering a 50% discount on all web projects for green businesses from now until Earth Day

How it will work:

Why we’re doing it:

Limitations:

SEO Friendly CSS Galleries

Google Local Search: An In Depth Look

Your Site’s Contact Page

Title Tags, Meta Tags, and Your URL

Your Local Business Profile

Customer/Client Reviews

Pitfalls & What not to do

What is Google Wave? Two Video Perspectives

What is Google Wave?

What can you do with it?