Yesterday I was speaking to my colleague George Machlan about the teachers directory here at learnoutlive. Since he linked back to the directory from his own site, his ranking shot to the top very quickly and he receives regular traffic from our site by students looking for English teachers.
He mentioned that he is thinking about creating a little landing page so that students coming from our site to his will have an easier time of getting in touch with him.
My immediate response was: “Absolutely!“
Every day I notice many students are clicking on the links of teacher’s websites in our directory, but to be honest… if I imagine I’m a student and I arrive at some of these websites it’s often not very clear how to contact/book lessons with the teacher. It’s not that teachers fail to include a contact form and payment buttons, but it’s that many webpages are simply too cluttered.
This is exactly why I’ve started writing this little series about how to create an online teaching website. This is the second part. You can find part one here.
I’m building an example online teaching website while I’m writing this tutorial and you can check out the page here as I’m working on it: http://learngermanviaskype.wordpress.com/
We started out last time with a simple WordPress setup on wordpress.com. Today I want to show you how you can include a contact form and payment buttons, the most critical elements for running an online teaching business.
Please note that the following information is specifically focused on wordpress.com. If you already have your own WordPress installation, even better! The principle is the same, although the steps vary a bit (let me know in the comments if you want to know more about self-hosted WordPress systems)
How To Add A Contact Form
The most important aspect of an online teaching website is the contact form. Everything starts from the moment you talk to a potential student. Therefore, we need a way for them to contact you!
1. Creating A New Page
Pages -> Add New Page
Give the page a title. I chose “contact teacher” but you might even go ahead and call it “Free Trial Lesson” if that’s how you roll (offering free trial lessons is highly recommended and certainly increases the amount of leads)
2. Launching Your Contact Form
After naming the page click the little icon marked in the screenshot.
You’ll see an overlay with the form options:
This is the basic setup of the contact form. More or less we can keep it the way it is but since we’re going for an online teaching website, we have to make a few adjustments. First of all, let’s change that text-field where it says “Website” to a field where students can enter their Skype ID so you can easily contact them.
3. How To Edit Fields
To do this move the mouse over the little (-) symbol next to the Website field and click edit.
As soon as you do that you’ll get some more options on the right side where you can edit the options of this field.
For our online teaching purposes, I just renamed the Label from “Website” to “Your Skype ID”, left the field type as Text and checked the Required field which means that without entering the Skype ID the form will not be sent. It’s good to have the email of a student but it’s even better to have the Skype ID because it allows you to react faster. And in the online teaching world, fast reaction time is an important asset.
When finished, click Save this field.
What else can we do?
Let’s say you’d like to receive some more information about a student’s learning status when they request a lesson. No problem!
4. How To Add More Fields
Simply click on “Add a new field” and you’ll be able to create a field from scratch.
The magic here is all in the Field Type. Depending on what type you choose you get different options. In our case I’ve chosen Drop Down which allows me to add a variety of preselected options users can choose from. This way whenever someone comes to my online teaching page, they can easily include their learning status with a simple click.
When you’re done hit Save.
Then you’ll see a preview of your form. You can easily change the order of the fields by dragging them.
This is a really basic form we got now and I would recommend not to add too many options! The more fields you make people fill out the less likely it becomes that they’ll follow through to the end. You know how annoying it is to fill out these forms yourself. Have a heart!
In the past, I have had great success by even using only 3 fields (name, email, skype ID) and while other teachers always told me I should include more options it generated lesson requests en masse, many of them leading to paying clients down the road.
5. Getting The Code
No matter how you choose to compose your contact form, when you’re done hit the blue button that says “Add this form to my post”.
You’ll then be teleported back to your page editing screen.
Do you see all of that code? This is your contact form! You can add text before or after the code (example: “Request a lesson with me below”) but make sure not to break the code.
Everything set? Hit Publish. And voilá!
6. Getting Rid Of Clutter
A you can see there’s the Sharing and Liking section again which just distracts people. We don’t want them to get lost on Twitter or Facebook. We want them to do one thing and one thing only: fill out the contact form. Look here (step 9) how to disable these sections. (Also you can disable them permanently by going through Settings -> Sharing
Also, don’t forget to turn off the comments on the Contact Form page. (Remember? Look at step 8 here)
7. Getting A Payment Button
Okay, now we’ve got the lesson request / contact form. What if students want to purchase lessons? We’re going to need some payment buttons. (Please note that since we’re working with WordPress.com and not the self-hosted WordPress in this tutorial, our options are a bit limited and we have to do some workarounds, but again, I want to show that even without investing a single cent it’s possible to launch an effective online teaching website.)
Go to Paypal’s button generator page (click here)
There you’ll be able to set the button type (select Buy Now), give it a name and price. It’ll also show you a preview.
This is a very basic button and there isn’t much more too it. Simple is the best!
Once you’re done, hit .. Done.
At the bottom, don’t forget to enter your Paypal email address where the monies will be sent to.
When done, hit “Create Button”
8. Save the Image Of The Button
Now you’ll see the code for your button and a preview. Unfortunately, due to the constraints of WordPress.com (on self-hosted blogs this is no problem) we can’t just copy the code to get the button, but here’s a workaround:
Simply do a right click on the graphic and click “Save image as…” (Chrome) or “Save image as…” (Firefox) etc.
9. Get the Link
Switch the tabs where it shows the code to “Email”. Select and copy the link.
10. Putting everything together.
Back in WordPress, create a new page (Pages -> Add New Page) and give it a title, e.g. “My Rates”, “Bookings”, etc.
Now we’re adding the image of the button and pasting the link into the field where it says: “Link URL”
Once the image and the link are inside, add some descriptions to the button.
When done, hit publish and … you’re done!
Here’s my example! I repeated the above steps to create three different buttons with different lesson packages. Check out the demo site below:
How About You?
Is your site simple enough that people can easily request trial lessons or contact and pay you? Or are your potential clients drowning in a sea of information which is all very titillating but in the end just interferes with the business side of things…
Now it’s your turn! Time to get busy…
Was this tutorial helpful for you? I certainly enjoyed writing it. But…what else would you like to see? Leave a comment!