The Business Search Directory lets you create a customized Web Form,
which can be displayed on your website.

Contents:
Overview
Quick Tour
Changing an Element's Properties
Grouping Elements
Embedding the Web Form on your Website
Displaying a Standalone Web Form
Web Form Example


Overview:

The Web Form Editor lets you drag-and-drop HTML5 elements anywhere on a WYSIWYG ("what you see is what you get") canvas, and the program generates the code for you. You don't have to enter a single line of code.

Your Web Form can be embedded in any website, by inserting the code snippet that is shown on the upper-left corner of the Web Form tab. Your Web Form also appears on your public profile. If you add Input and Button elements, when a visitor completes your form, their submission is emailed to you, with their City, State, Zip Code, and IP Address.

The HTML5 Online Editor is similar to Microsoft Visual Studio. When you place an element on the canvas, you don't have to enter the X and Y coordinates; the program does that for you.

The following features have been included:
  • Add News, Twitter, Stock Quotes, Wikipedia, YouTube, and Loan Calculator gadgets, and drag them to any location on the canvas.
  • Add Text, Image, Button, and Input elements, containing any text.
  • You don't have to use HTML tables to have elements appear horizontally across the canvas.
  • Align a group of elements horizontally or vertically.
  • Move a group of elements together, as one cohesive unit.
  • Add HTML Formatting Commands; for Bold, Italics, Underline, or colored text.


Quick Tour:

The following instructions will demonstrate the features in less than five minutes:
  1. Click the Web Form tab on your Business Search Directory Administration page. The Default Web Form will be displayed.
  2. Click [Delete All Elements]. Don't worry, you can click [Display the Default Web Form] to return the form to its original state.
  3. Drag the blue [Element 1] downward, and drop it anywhere on the yellow canvas.
  4. With [Element 1] selected, in the Properties Frame (located in the top-middle of the page) change the Element Type to News, and click [Apply Changes]. The News gadget will be shown.
  5. Drag the new [Element 2] (that appears above the canvas), and drop it on the canvas.
  6. With [Element 2] selected, in the Properties Frame change the Element Type to Image, and click [Apply Changes]. If you had uploaded your picture (on the Profile tab), then it will appear. Otherwise, a 'Hi' image will be shown.
  7. On the left side of the screen, click the textbox under 'This URL will display your standalone Web Form', and press [Ctrl+C] to copy that URL to the clipboard.
  8. Select a new tab on your browser, and paste that URL in the address bar (by pressing [Ctrl+V]).
  9. If you did not Save any modifications to the Web Form, the Default Web Form is displayed.
  10. Enter a message in the textbox above the [Send Message] button, and click [Send Message]. A popup will prompt you to enter the security code shown, and click [Submit]. Your message will be sent to your email address.


Changing an Element's Properties:

Clicking an element will cause it to be Selected (it will have a wider border). When an element is selected, you may edit its properties:
  • Text element: Text, Font Size, and Width. The Width property allows text to be displayed in a multi-line column.
  • Image element: Image URL, Width, and Height.
  • Button element: Button Text and Font Size. When a visitor clicks a Button, all the Input elements on the form are emailed to you.
  • Input element: Input Text, Font Size, Width, and Height.
  • News gadget: News Topic.
  • Twitter gadget: Twitter Username.
  • Stock Quotes gadget: Stock Symbol.
  • Wikipedia gadget: Wikipedia Title.
  • YouTube gadget: YouTube ID.
  • Loan Calculator gadget

You must click [Apply Changes] for the edits to take effect.


Grouping Elements:

To add an element to a Group, Ctrl-Click any element on the canvas (except the Selected element). That element will then have a red border. To remove an element from the Group, Ctrl-Click it again.

You may Move a Group of elements as a cohesive unit, by dragging the Selected element.

To Align a Group of elements to the Selected element, click the following two buttons:
  • [Horizontally Align Grouped Elements]
  • [Vertically Align Grouped Elements]


Embedding the Web Form on your Website:

Remember to click [Save] after modifying your Web Form.

On the left side of the screen, the textbox under 'This code snippet will display your embedded Web Form:' contains the code that you should copy-and-paste into your website, to display the Web Form.

If the visitor clicks a Button on your embedded Web Form, all the Input entries will be emailed to you; along with the visitor's City, State, Zip Code, and IP Address.

For example, if you added two Input Elements and a Button to your Web Form, then the visitor would have to enter something into both textboxes before they could Submit the Form, and both Input entries would then be emailed to you.

Displaying a Standalone Web Form:

Remember to click [Save] after modifying your Web Form.

On the left side of the screen, the textbox under 'This URL will display your standalone Web Form:' contains the URL that will display your Standalone Web Form (without embedding the form on your website). You can give this URL to anyone that you want to complete your Web Form, and you should place this link on your other websites.

Any visitor may also display your Web Form by clicking the [Web Form] tab on your public profile.

If the visitor clicks a Button on your Standalone Web Form, all the Input entries will be emailed to you; along with the visitor's City, State, Zip Code, and IP Address.

For example, if you added two Input Elements and a Button to your Web Form, then the visitor would have to enter something into both textboxes before they could Submit the Form, and both Input entries would then be emailed to you.

Web Form Example: