Advanced Website Training: June, 2010 Insert Images as Your Background Using Google Docs for Document Hosting Custom Contact Forms on Your Website

Using and Image Behind Text Source for background image table: <TABLE BORDER="0" BACKGROUND=“YOU PHOTO’s URL HERE"> With a small piece of source code, you can add an image inside of a table the will allow you to type text and even insert hyperlinks. *This image will be used for our example. Note the dark image will work well with a lighter text color

Using and Image Behind Text continued… 1.) Upload your photo to section 1.3 before you begin. 2.) While creating a new page, use the insert/edit image button to browse for your photo. When the box opens, copy the address of the photo and set it in Notepad. 3.) Enter the following in the source mode of your page editor: <TABLE BORDER="0" BACKGROUND=“YOUR PHOTO’S URL HERE">

Using and Image Behind Text continued… 4.) Once you have pasted the code in, click “source” again to preview the new table. 5.) Clink on the table so that the small boxes appear at the edges and then drag to display the complete image. 6.) Click inside of the image to enter text, hyperlinks, more tables, etc…

Using and Image Behind Text continued… 7.) Preview your progress and click save.

Using and Image Behind Text continued… 8.) Navigate to your new page to see your Background image table in action

Things to Remember Please keep in mind that, much like the background color tables we have worked with before, this can take a bit of patience to complete. This tag will not work, nor will your table be editable in Mozilla FireFox. This is one of the many non- standard codes still usable in Internet Explorer. Please create these pages in IE. The results will still be visible in FireFox. Depending on the original size of your image, it may dupelicate or “tile” if you exceed the size of the image. Use larger images for more page coverage and smaller ones for specific areas on the page. Try setting this up on a test or practice page first before applying this to a live page on your site. Before you apply this tag to a live page and/or after you have gotten the background table on you site, be sure to copy the source code and save it somewhere, should you need to restore any prior version of your page. Consider display. Please be sure that the image you use is either a dark image with a light colored text or visa versa. If it is difficult to see your text or links your viewers may loose interest in the page.

Using Google Docs Google Docs, is one of the many free resources available to you with your Gmail account. Google Docs serves as a respository for documents with the capability of adding mutliple collaborators and several ways to share your documents. Of the many features available in Google Docs, one that is key to this presentation is the option to set up a custom and embeddable contact form which allows you to decide what information is most important to you. Additionally, all contact requests are recorded to a spreadsheet in your Google Docs account that can be exported and uploaded to most contact management systems.

Upload Documents 1.) To begin, simply login to using you Gmail account name and password. 2.) Click “Upload” to browse for the file/s you wish to upload.

Upload Documents Continued… 3.) Click “select files to upload.” 4.) Locate your file and select “open.”

Upload Documents Continued… 5.) Verify name you have selected and then click “start upload.” 6.) Confirm upload is complete and then click “back to Google Docs.

Upload Documents Continued… 7.) You should now see the document that you have uploaded under “All Items.”

Sharing Documents by Hyperlink 8.) To share this document as a link, place a check-mark in the box below the desired document and then click “share” > “Get the link to share.”

Embed Documents on a Website 1.) Once your have uploaded your document, click on it to view. 2.) Click the “share” button and select “publish/embed.” *Note, you will have to make this document public to embed it on your site. 3.) Copy the code that is provided. Note the height and width, as you can change these for best appearance on your website.

Create a Custom Contact Form 1.) You can create a customized contact form by clicking “Create New.” 2.) Select “Form” and choose the contact info, survey questions and other details you want to keep track of. 3.) *Be sure to also click on “more options” > “Edit Confirmation” to personalize the message that appears once the form is submitted.*

Embedding a Google Contact Form 4.) Click on “More Actions” and then select “embed” to be given the code needed to enter in the source mode on your website’s admin tool.

Embedding the Code to Your Text Editor 1.) Paste the embed code into your text editor while in “source” mode. 2.) Click “source” again to preview and confirm the form is present and then click “save.”

View Contact Form Submissions 1.) You can set the up the form to you when one has been submitted. This will direct you to the spreadsheet with all of the submitted details. 2.) You can edit the spreadsheet to include additional columns like “date of follow-up” and “method of follow-up.”

In Conclusion… Adding a background image to pages on your website can help to enhance the overall appearance and keep it interesting. Google Docs is a great way to store documents remotely, which can be accessed where ever you may be. All you need is an internet connection to access, create and collaborate on various document types. Using the link option, you can and hyperlink to commonly requested and/or used documents from your website, drip-campaigns and direct s with clients. The option to create custom contact forms allows you to choose what info you want to capture. You can customize these forms and embed them where ever you please and easily keep track of each inquiry submitted through your contact form.

Thank You for Joining Us!