How to add a Contact Form

How to add a Contact Form

Medium Difficulty – Perfect for people who know some HTML code or don’t mind getting their hands dirty (with programming, not dirt).

Web forms are a great way to collect valuable data and can offer an interactive way to engage with your customers. With a form you could create a customer satisfaction survey, build a customer email database or allow your customers to book your services. While we are planning to implement contact forms in the future, you can embed custom forms into your using other web-based services like Wufoo, Survey Gizmo, JotForm and PollDaddy right now. Personally, my favourite is Wufoo – I like their easy to use tools, great functionality and their professional attitudes. My hot tip is to go and sign up to their free plan and use their pre-built templates and color themes. The rest of this tutorial is based on building your forms with Wufoo but the same should work with other services.

Example Site
Here’s one I created on my Lomovision website earlier: www.lomovision.net/contact. It’s a simple Contact Form but I’ve also set it up to allow customers to join my mailing list. All this information is stored on the Wufoo site and I have set it up to send me an email everytime someone adds their details to the form.

Tutorial

Step 1. Create your Contact Page
You can use an existing Custom Web Page but for this tutorial, let’s create a new one from scratch. To create a new Custom Web Page click on the Website tab, then Navigation, and then click the Create New Page button. Choose Custom Web Page from the Page Type and name it Contact (for sake of argument).

Open up the page you have just created and select the Blank Canvas template. Scroll down the page and press Save.

Step 2. Adding the table HTML to your page
To make this process easier you can download the sample code I used to create my own contact page. Unzip the file and openthe “example-code.txt” in a text editor, select all and copy the contents. We’re going to copy and paste this information into the WYSYWIG HTML editor in the custom page. Go back to your Contact page and scroll down until you see the “Contact” Content panel. Click on the HTML button to open the HTML Source Editor window.

Paste the example code into the page – it should now look like this:

Press the Update button in the bottom left area of the pop-up window and then press the Cancel button. Your WYSYWIG preview window should now look something like this:

Press Save to update all the changes on your page. Next we’re going to create a form using Wufoo that we will embed into the page.

Step 3. Creating a Wufoo contact form
Create a free account on Wufoo and start to build your contact form. For the moment, create something very simple and don’t get caught up fine-tuning the text or colors – we just want to get something into your page which you can customize at a later date. I would suggest using one of the pre-built templates as a starting point.

Once you have created your form, return to the Form Manager area and click the Code button.

You will then be presented with a range of options to get the form into your page. Select the Embed Form Code option (left) and then select and copy the code from the iFrame panel. To do this, click inside the box that contains the code and then copy the selection.

Return to the WYSYWIG editor on your PhotoMerchant Content page and click the HTML button (as you did before). We’re going to paste the Wufoo code by replacing the sample text that we’ve supplied in the example-code file. Select the phrase “This is where your form will go” and paste the Wufoo code in it’s place. Make sure that the <iframe appears just after the <td width=”450″> and that </iframe> is just before</td> (see screeshot).

Press Update and then Cancel. Your page should now look something like his:

Step 4. Tweak and match your design
Depending on the PhotoMerchant color theme you’ve chosen, you’ll now need to tweak the color combinations of the Wufoo theme to match your site. You may also need to change the width and height of the embedded iframe code to make your form wider and fill the width of the page. This is where some knowledge of HTML will come in handy or healthy dose of trial-and-error will get you through. Things you may want to change include:

• Change the font family in the Table and Wufoo theme to match the site’s theme
• Changing the color of the wufoo form background
• Add a width property to the table to allow your forms to fill out to match the page width
• Adding your contact details and links to social networks. (note: the contact information has been manually added and is not being sourced from any content in the Contact Details section of the PhotoMerchant Application Interface)

Tip: Open up the HTML Source Editor, select all the code and then copy it into another separate text file. As you tweak the code you may end up breaking the formatting – having a backup of code that works will allow you to go back a couple of steps quickly.

Step 5. An easier alternative
If editing the table and example code was too complicated, you can always go with the simpler layout option and forget about the tables. Open the HTML Source Editor and delete all the code. Press Update. Go back into Wufoo and copy the iframe code and paste it into the HTML Source Editor. You will have less control over the layout but you will still have control over the theme formatting inside the Wufoo theme editor.

Summary
This tutorial is a quite tricky for beginners. It’s even a little bit tricky for people who know some HTML. If you’re quite fluent with HTML and other web programming languages i’m sure you’d be able to find an even smarter implementation that the one presented above. The main point of these tutorials it to encourage you to experiment and see what’s possible.