The Business Search Directory lets you create a customized Web Form.

Contents:
Overview
Quick Tour
Changing an Element's Properties
Grouping Elements
Displaying your Web Form to Visitors



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 appears on your public profile. 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 Text, Image, Button, and Input elements, and drag them to any location on the canvas.
  • 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. Drag the new [Element 2] (that appears above the canvas), and drop it on the canvas.
  5. With [Element 2] selected, in the Properties Frame (located in the top-middle of the page) 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.
  6. On the left side of the screen, click the textbox under 'This URL will display your Web Form', and press [Ctrl+C] to copy that URL to the clipboard.
  7. Select a new tab on your browser, and paste that URL in the address bar (by pressing [Ctrl+V]).
  8. If you did not Save any modifications to the Web Form, the Default Web Form is displayed.
  9. 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.

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]



Displaying your Web Form to Visitors:

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

On the left side of the screen, the textbox under 'This URL will display your Web Form' contains the URL that will display your Web Form. You should 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 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.