Adding the NOF Email Page Component to a Page

There are two possible ways of placing the Email Page component on a page:

·       Placing the Email Page component on the page that will be sent by email.

This page will be available for sending. To send other pages of the site by email, you need to place an Email Page component instance on each page. This is a simple way of using Email Page component and it is recommended to use it when you have just a few pages on your site that will be available for sending.

·       Placing the Email Page component on a different page from the page that will be sent by email.

You will place a link from each page to the page that contains the Email Page component (a link such as “Email this page to a friend”). When this link is clicked, the page containing the email form will open in the browser. This page may be set to open as a new page in the browser or as a pop-up window. The visitor will fill in the required fields and press the Submit button. This method is recommended when you have a big site with many pages to be sent by email.

 

Placing the Email Page Component on the Page That Will Be Sent by Email.

1.        Launch NetObjects Fusion and open the site where you want to insert the Email Page component.

2.        In Site view, create the page that you would like visitors to be able to send (if you have not already created this page). Add content (text, images, etc.) to this page.

3.        Add an additional new page on which to place the Email Page Stats component later on.

4.        In Page view, select NOF Email Page > Email Page Component from the Custom Components toolbar.

5.        Draw a box on the Layout to indicate where you want to position the Email Page component.

6.        Create a suite for your component or you place the component in an the component in an existing suite. See Using Component Suites.

After you have placed the component into a suite the Email Page dialog box appears

7.        Configure the Email Page component settings as described later in this tutorial..
 

Linking a Page to the Email Page Component

1.        Open the site where you want to insert the Email Page component.

2.        In Site view, create the page that you would like visitors to be able to send (if you have not already created this page). Add content (text, images, etc.) to this page.

3.        Add a new page to your site on which to place the Email Page component.

4.        Exclude this page from navigation. (This page will be published, but you will not see it in the navigation bar.)

To exclude the page from navigation, select the page in Site view and click the Exclude from Navigation check box on the Page Properties palette.

 

5.        Add an additional new page on which to place the Email Page Stats component later.

Your Site Structure should resemble the image above:

·         The pages are named Home, Email, and Stats.

·         The Home page will be the page that the visitors will be able to send by email.

·         The Email page will contain the Email Page component.

·         The Email Page Stats page will contain the Email Page Stats component.

6.        On the first page (the page that will be sent by email), add an internal link to the page that contains the Email Page component. If you are not sure how to add an internal link, see Creating an Internal Link to the Email Page below.

7.        In Page view, select NOF Email Page > Email Page from the Custom Components toolbar.

8.        Draw a box on the Layout to indicate where you want to position the Email Page component.

 

Creating an Internal Link to the Email Page

1.        In Page view, add a text box on the Layout.

2.        In the text box, type text to link to the email page—for example, “To send this page to a friend, click here.”

3.        Select the text to link. (In the picture below, the word “Email” is selected.)

4.        Click the Link tool on the Standard toolbar or the Link button from the Properties Palette.
The Link dialog appears.

5.        From the Link type drop-down menu, select Internal link.

6.        Select the page you want to link to in Site Structure. (The Email page is selected in our example.)

7.        In the Target area, select one of the two available elements in the drop-down list: Existing and Pop-up window. To see how to configure the settings for the two options, see Creating Links and Anchors.

8.        Click Link.
 

Creating a New Suite or Selecting an Existing One

When you place the Email Page component on the Layout, the following window will appear. You will create a suite for your component or place the component in an existing suite. Also you are able to associate an existing profile to the new created suite.

                                         

To create a new suite you will have to enable the radio button and type in that field a new name for the suite and then choose a profile for the new suite. All the components from the same suite will have the same general settings. In the /Profile /drop-down list you will have to select a profile. You may create as many profiles as you want on the general tab from the component’s dialog box. The created profile will be visible only for the same type of suite of components, as the suite for which the profile was created.

On the General Settings tab you can configure the settings that are common for all the components in a suite. If you want to save them for a future use, you can save them in a profile, by clicking Save Profile, and specifying a name for it.

You can also choose an existing suite by checking the Existing radio button and selecting the suite from the drop-down list.
 

Configuring the Email Page Component’s Settings

After you have placed the Email Page component on your site, you can configure its settings in the Email Page dialog box. The Email Page dialog box contains three tabs: Field, Page and General.

In the browser, the site visitor who sends a page by email will have to fill in a form with required information (From, To, Cc, Bcc, From (name), To (name), Subject, Message, Email Format, etc).

You can customize the appearance and the content of the form in the Field tab of the Email Page dialog box.

The site visitor will be able to select 4 different email formats to send the page:

·       HTML (images embedded): The entire page will be sent, including images, links, etc.

·       Plain text: The page will be sent as plain text, not HTML. Images will not appear in the email.

·       URL: Only the URL (the address on the Internet) of the Web page will be sent.

·       ZIP: The content of the page will be sent as attached compressed (.zip) file to the email.

Customizing the Form's Appearance and Settings on the Fields Tab

On the Fields tab, you can customize the appearance of the email form. The fields that will appear on the email form are displayed on the left.

·   To add a new field, click the “+” button.

·    To remove a field, select the field and click the “-” button.

·         To change the order of the fields as they would appear on the email form, click the field name and move them by clicking the up and down arrows.

The following are the default form fields:

·         From (email): The email address of the person who sends the page.

·         To (email): The email address of the person who will receive the page.

·         Cc: The email addresses of the rest of the people that will receive this email.

·         Bcc: The hidden email addresses of the rest of the people that will receive this email.

·         From (name): The name of the person who sends the page.

·         To (name): The name of the person who will receive the page.

·         Subject: The subject of the email.

·         Message: Message will be typed in this text field.

The message will be sent only if .zip and/or URL email formats are selected. If HTML (images embedded), HTML (link to images), and/or Plain text are selected, the email message will not be visible.

·   Email Format: Select the email format options from the Elements table. The list contains the following format options:

- HTML (images embedded) - HTML (link to images). 

- Plain text - The page will be sent as plain text, not HTML.

- URL -  only the URL of the Web page will be sent.

- ZIP - the Web page will be sent as attached .zip file to the email.

There are two options for the format of the email box.

·       DropDownList - Users will be able to select only one email format type.

·       ListBox - Users will be able to select options from the ‘Elements’ table.

To do that, click the Allow multiple selections check box.

The result will be that the multiple selected elements will be highlighted by default on the Email Format list on the Web page.

If one of the table elements is selected (the ‘Selected’ box is checked)—i.e. the ‘HTML (images embedded)’ box is checked—this option will be highlighted as selected by default on the Email Format list on the Web page.

The site visitor will be able to select a different element from the Email Format list, if desired.

·         Submit—this button will be used on the browser to send the email form.

There are several possibilities for displaying the email Submit button:

·         Text: Select the Text option and type a text in the input field. The text will be displayed on
the button.

·    Image: Select the Image option and click brose to choose an image from your hard disk. This picture will then behave as a button that the site visitor will click on it to send the email.

·    Link: Select the Link option and type a link in the input field. The link will be displayed on the page and will behave as a normal button.
 

Applying a Style

In the Email Page dialog box, you can apply a Style to the HTML fields. More than one style name can be added and stored in the Style drop-down box, but only the selected Style will be active.

    1. In the Layout Properties window, click the HTML button.

    2. In the HTML dialog, click Between head tags.

    3. Type in <Style> .

    4. Click the Insert File button and choose an CSS file. You can find sample CSS classes the following folder:NetObjects Fusion Installation Directory / Components / NetObjects / emailpage / goodies /. file. The names of these classes can be added in the CSS list.

    5. Type in </Style>.

    6. Open the component editor, then in the CSS field fill the CSS class name you want to be applied. (e.g., Suppose that your .css file contains a class named "MyLabel", in the CSS field you have to fill the name "MyLabel".)

      You can specify a different class for every label or text field element but this class must exist in the included CSS.


Setting Error/Success Handling Options

After filling in the email form, the site visitor will click the Submit button. If the site visitor has filled in the fields correctly, a success page will appear. If the site visitor has filled in some fields incorrectly, the browser will refresh the page and display an error message, and the fields that are not correct will be pointed with an error marker.

You can configure settings for error messages and error markers on the Page tab.

 

Setting Error Handling Options

In the Email Page dialog box, click the Page tab.

·         Check the Show error messages check box to display error messages when error events occur in the browser (when the site visitor fills in incorrectly a field). The error messages will be displayed beneath the controls at the bottom of the page.

·         Check the Show error marker check box to display an error marker (symbol) to indicate the invalid input text, when the site visitor incorrectly fills in a field. The error marker will be displayed between the field's label and the field.

·  Use the … (browse) button to choose a different image for the error marker.

 

Setting Success Handling Options

In the Email Page dialog box, click the Page tab.

Setting Script and Server-Side Settings

1.     In the Email Page dialog box, click the General tab.

Here you will specify the Email Page suite general settings. These settings can be saved as a profile for a future use.

The General tab contains three sections: Script settings, Database settings and Email settings.

 

The Script Settings Section

Script type: Select the scripting language from the Script type drop-down box. Depending on what kind of server you have, choose one from the two scripting languages:  Active Server Pages (ASP) / PHP Hypertext Preprocessor (PHP) (Version 4.1.0 or later). Check with your Internet service provider to determine which option is appropriate for your hosting environment.

Publishing in debug mode: When you publish your site for the first time, it could be a good practice to check the ‘Publish in debug mode’ checkbox. Publishing the site in debug mode will help to see on screen a complete description of an error that can occur.  After identifying and solving all the problems on the server and client side, you can uncheck that checkbox and re-publish the site. All errors will be described by their error codes. Then re-publish the site in live mode. Debug mode forces the script to show a detailed report message when an error appears, not just an error code as it would appear if the option were not selected.

 

Select Language: Here you choose the language for all the messages generated by the scripts, such error messages or components text for which the user does not have access to customize them using components configuration interfaces.
 

The Database Settings Section

Keep statistics of emailed pages in: If you enable the check box to keep statistics of the pages that will be emailed, you will have to specify the database file name that will be stored in the scripts directory from the directory where the site is published.  This file is saved relative to the scripts site directory, which means if you use relative path to specify the location of the file, this location will be relative to the `script` directory. For example if you enter just the file name file.csv this means the file is saved into the scripts directory. This is not recommended because the scripts directory must have write permission for the Web server user. The recommended place for the database file is where the Web users have write access but do not have browse access.

The database that you have specified in the component’s editor will store the input values. You can choose the path to the database. It is an absolute full path, containing the file name, too. If you do not type-in an absolute path, and instead, type-in only a file name, the scripts on the server side will create the database inside the scripts directory of your published site.

If you do not enable the check box, there will not be any data about the emailed pages in the directory where the site is published.


The Email Settings Section

Server IP address: Select a server IP address to send/receive emails. The PHP will use the IP server address specified in the php.ini file on the server and the ASP will use the default windows IP server if you leave this field blank.

Port: The email server port usually has the value 25. You need to ask your Internet Service Provider which is your email server port number.

Click the Save Profile button to save the general settings you have completed. The Save Profile dialog box will open.

 
 

Publishing Information

When you add the component object to a page in NetObjects Fusion and preview it, you will see a placeholder graphic. To see how the Email Page component works, publish the site remotely.

The code generated by the NOF Email Page is evaluated on the server. It is important that you verify that your server supports the server-side language that you are using. For information on server requirements, please contact your hosting provider or refer to your platform documentation.