Workshop: Embedding a Contact form

Standard

This week we looked at creating and embedding a contact form within a website in dreamweaver by using an external script.

We started by creating a new project using the defautl template in html5 and after we were provided with the script to use (ProcessForm from mindpalette.com)

The first thing that needed to be done was to open and edit the php file included to change the email address that the script uses to send the form-text to.
An example of where to change this can be seen in the screenshot below.

processform_screenshot

 

After this we created the form within dreamweaver using the “insert -> form” menu.
There are several different options to choose from and you can choose between a form that validates its entry and one that accepts any kind of input.

My form can be seen below and it features a text area, email address field, checkbox option and dropdown selection.

contact-form

The page can also be viewed here: /form-design/ (although I would appreciate it if spam was kept to a minimum ☺)

Workshop 3: Basic page Linking and anchors in Dreamwaver

Standard

In this workshop we were given the the task of creating various types of links within a new Dreamwaver project and successfully inserting a script into one of the pages to smoothly scroll between sections of text.

We started with a single index page after selecting the right folder to use within Dreamweaver and we then added a logo image and text/images to the page.

index-page

After this was done we created two additional pages and we linked them to each other by means of the navigational menu at the left hand side.

After linking the pages we were taught (well.. I must admit I did not learn anything new here) to add a hyperlink to an off-site and on-site page and finally how to add a script reference to the <head> of the page. Once the script was linked we started creating anchors for several headings on the page with a link to them at the top which (by means of the aforementioned script) smoothly scrolled to each section.

anchor-text

 

The whole project can be viewed in its final form at: /project-3/