Page 46
8.6 Add a Contact Form
Note: this will only work with web hosting services that have PHP. If you are
unsure of whether or not your web host supports PHP, check with your web
hosting company. Dot Mac accounts do not have this ability.
Adding a Contact Form to one of your pages is simple and easy, and requires both the
Content and Layout windows. You will need three external files - we've created these
files for you, so you don't have to worry about the technical details. Just follow the five
steps below to add a contact form to your ShutterBug site.
Step 1: Download the Required Files
First download the three required files - contactform.html, mailtit.php, thankyou.html.
The following zip file contains the three files - Download the zip file.
contactform.html - this is the form that the visitor submits to you.
mailit.php - this is the magic php code that emails the form submission text to you.
thankyou.html - this is the thank you message that will be displayed when the form is
submitted.
Step 2: Insert Your Email Address
The two HTML files are basic HTML and can be edited in an HTML editor to suit your
purpose (edit font color, size, etc.), or you can just leave the HTML files as they are.
The PHP file must be edited to add your email address. You can use TextEdit to
change the email address. Open the PHP file and look at the first couple of lines. You
will see a line that reads: $to = "someone@somewhere.com";
Replace the portion that says someone@somewhere.com with your email address or
the address where the form is to be submitted. Do not remove the quotations or the
semi-colon or anything else from the page. Simply replace the text that contains
the someone address, with your own address. Save and close the file.
Step 3: Add the Files to Your Site
Go to your ShutterBug project and click the Content tab to open the Content window.
Select 'Files' from the navigation list to open the 'Files' window. Drag and drop the
three files (or just drag the contactform folder) into the 'Files' window, as shown in the
following picture:
Step 4: Add an Xtra to the Template for Your Contact Form
Now you must add the contact form to your template. Click on the Layout tab to open
the Layout window. Be sure to first select the page that you want to add the contact
form to. Remember, if you want to keep the contact form unique to your current
page only, add a template for the page you are working on. Otherwise the form
will be added to all pages that use the same template.
Select the Xtras tab and click the '+' symbol to add an Xtra box for your contact form.
The box will appear in the xtra box list window as well as in the viewer window (default
position in the top left corner). Double-click the "Xtra Box" text field to rename the box
to a name you can identify easily. Do you want the form to appear in your main
thumbnail view only, in the slideshow view only, or in both views? From the Xtra Box
list, check the appropriate check boxes to have the form appear in the desired views.
By default, "Main Page" will already be selected. Uncheck the check boxes to make the
form invisible for one, or both of the views.
Select 'External File' from the pop up list. Then select HTML page from the external file
type list. Click the Easy button to open a panel containing your list of files. Select
contactform.html from the list and hit OK. Your ShutterBug site will now have a contact
form on the page. To web preview the form, go to the Preview window and click the
Preview in Browser button to view the page locally in an external browser.
Step 5: Set Some Optional Properties for Your Contact Form
You can reposition and resize the Xtra box that contains the contact form, by grabbing
it with your mouse from the viewer window and dragging it to the desired position on
the page. Use the grab handles to resize the box. Depending on the type of form or
length of the content within the form, you may want to add scroll bars to the Xtra box
that holds the form. Under the External HTML in a frame option, you can choose to
enable scroll bars by checking the Show scroll bars check box. Leave the box blank to
disable scrolling. You can also add a colored border and/or margins to the contact
form box, from within the Borders interface.
───────────────────────────────────────
