ReB Simple Responsive Form (SRF)

Overview

SRF installs into Dreamweaver, giving you a fully automated graphical user interface from which you can create and manage a simple responsive form. Only one responsive form can be placed on a page. Each form has a limited number of input fields, along with reset and submit buttons. The form uses several new form features introduced by HTML5. The labels and placeholder text are fully editable by the user, along with specifying whether a field is required or not. Several different styles are available, some of which match those used in PVII widgets. For those users comfortable with CSS, the style sheets can be edited to produce customized forms.

Note: The user is responsible for configuring the form to process information sent to his/her server. The html must be edited (in code view) to specify a value for action, which defaults to an empty string. The method and enctype attributes should also be checked and edited, if needed. These attributes will be preserved, when the form is modified.

Responsive and Mobile Ready

SRF is designed to automatically respond to the size of the browser window and the device being used.

Auto Width Support

A SRF can be made to automatically adapt to the width of the page element into which it is inserted—but can also be set to a maximum width by assigning a width in the User Interface (UI).

Pre-defined Form Styles

When adding a new SRF you can choose what type of preset content will appear in the form, or accept pre-defined values to insert a form with one or two clicks.

Dreamweaver Template Support

The system is 100% Dreamweaver Template compatible. You can insert only one form into a template (.dwt) page at any time. You can also insert just one form into a template-based page. The system will automatically detect the template and adjust to allow insertion into an editable region.

Selectable Required Symbol

The user can select from 11 different symbols, along with the color and placement relative to the label, to indicate required fields.

Removal

A handy Remove command is included, accessible via Commands > Goodies > Remove SRF, that can be used to quickly and thoroughly remove any Simple Responsive Form from your page. During removal the user will be asked if he/she wishes to also remove the assets folder and all of it's contents too.

Note: Removing the assets folder will also remove the style sheet associated with the form. Click "Cancel" to this question to preserve the assets folder.

Inserting a New SRF

An SRF can be inserted anywhere on your page, or in an editable region on a template based page. Once you have established your insertion point, click the SRF icon Icon located in the Goodies panel, to open the interface. Alternatively, you can choose Insert > Goodies > Add SRF by ReB. If an attempt is made to insert another SRF on a page that already has one, a warning message to that effect will be issued.

The default maximum width of SRF is 500px, but by selecting NONE in the form width drop-down in the UI, it's width will adapt to the width of the element in which it was inserted—whether that width is fixed or flexible. In the absence of a containing element, an SRF will stretch to the full available width of your browser window.

-Establish the insertion point for your new SRF widget by clicking in the area of the page where you would like the widget to be created.

-Click the SRF icon SRF Icon in the Goodies Section of Dreamweaver's Insert Bar or choose Insert > Goodies > Add SRF by ReB.

Classic Dreamweaver Insert Bar

The Insert Bar

Dreamweaver Insert Panel

DW Insert Menu

 

The SRF user interface will open in the Create New SRF mode.

The Panel Interface

Configure your widget, set your options, then click OK to build the widget at your insertion point.

Note: The Basic style does not have an outer-border, rounded corners or a shadow, and no background color, so those options are grayed out, but are available for all other style themes. In both the Create and Modify UI, the color shown in the text box labelled "Color" always reflects the color specified by the style rules but the color picker box does not. The color picker is primarily used to pick a new color to use for a symbol, in which case the color in the box to it's left will show the same color in hexadecimal format when the color picker changes value. The color of a symbol may also be changed by editing the value in color box which will then display in the color picker when the box looses focus.

When no Reset button is selected, Submit includes a few more options as shown in the figure below.

Submit Options

Asset Folders

When you create a SRF widget, the system creates an assets folder named rbsrf at the same level as the page that contains your widget. This folder will contain the relevant CSS file (or files) appropriate to the selected form style.

When you publish your site, make sure you upload the entire rbsrf folder.

Modifying an Existing SRF Widget

You can modify an existing SRF widget on your page at any time.

-Click inside the SRF widget that you wish to modify.

-Choose Modify > Goodies > Modify SRF by ReB

Note: If you use a Macintosh computer, Apple bugs will sometimes cause the Modify menu to be inactive (grayed out). If this happens to you, use the icon to launch the interface. You can also launch the interface from the Insert menu. The system will open the interface in the appropriate mode whether you use the Insert Menu, Insert Panel/Bar or the Modify menu.

The SRF User Interface will open in the Modify Existing SRF mode, with the options set to those selected for the SRF on your page.

Modify mode

Change your form style and/or options and click OK.

If you change either the symbol and/or color used to indicate a Required field, the style rules for this are written in the head section in a style block with the id of rbSRFStyle. Please do not change this id value as the widget uses it for determining whether these rules have been inserted in the document.

Note. For those who prefer, the required symbol and color can be edited directly in this block. If this approach is taken, use uni-code values for the symbol. This link may be helpful. Also the user may also include other HTML5 attributes on the input fields as a comma delimited string of values. These additions will be preserved during subsequent edits.

Managing the User Interface Items

Mode

Displays the current operational Mode for the user interface: either Create or Modify. When in Modify mode, the id of the SRF widget being modified will also be displayed.

Outer Options

These settings are applied to the current SRF widget.

Include Background Color

The default value is NO, but if YES is selected, the form's background-color becomes a lighter shade of the border color.

Form Maximum Width

Default value is 500px, but by selecting NONE, it will expand to fit within it's containing element.

Required Symbol

These options allow the user to specify the type of symbol to use for required items, their placement relative to the label tag, and color. The default symbol is the Dagger Cross and the default placement, is after the Label on required items and the word Required that appears in the upper right-hand corner of the form. The classes that control symbol placement are reqdA and reqdB (A for after and B for before). Thus, if the user changes placement to before and wants the symbols to come after on the label values, edit the first label that has the class reqdB, changing it to reqdA, then open the modify menu and click OK. All label fields with the required class on them will be changed to the proper class name.

Note. The word Required in the upper right-hand corner of the form will only appear if required items have been selected.

Main Header, Sub Header

Provide a purpose for the form and instructions on what to do. The text is editable by the user.

Form Inputs

There are six input fields along with reset and submit buttons, all of which can be included (or excluded) by checking (or unchecking) the checkbox under Inc. Label values and placeholder text can be edited. The last checkbox under the colum labelled Reqd indicates whether this is a required field. The default width of the buttons is AUTO, but the submit button's width can be changed according to the drop-down that appears when there is no Reset button.

Note: The percentage widths refer to input field's intrinsic width. When the input field is "Email", the multiple attribute is added to the input tag to allow for a comma seperated list of email addresses. Also that field specifies the pattern ^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$ to match a valid email address.

Style Theme

SRF comes with a variety of pre-defined CSS style themes. Choose a theme that best approximates the look you desire. You can later make edits to the style sheet to fully customize your SRF widgets. You can change to a different style theme at any time without affecting the contents of the SRF widget.

Style Themes

A preview of the selected Style Theme is displayed to the right of the Style Theme select list. This Preview will change whenever you select a different Style Theme.

Command Buttons

The following command buttons are available, during Creation (left menu) and Modification (right menu).

Create Command Buttons Modify Command Buttons

OK

When you are done, click the OK button to build the SRF widget. A SRF will be added to your page or updated—depending on whether you were in Create mode or Modify mode. You can then preview in a browser to view how the SRF fits in your design. To check its functionality, the user must also configure his/her server to process the information sent to it from the form and act on it accordingly. This aspect is beyond the SRF widget's functionality.

Tip: To make further changes, click inside a SRF and open the Modify interface.

Remove

Will remove the SRF from the page, including any style block associated with this widget (i.e., id=rbSRFStyle). During removal, the user will also be asked to completely remove the assets folder, rbsrf, and all of it's contents. If changes have been made to the style sheet, the user should click on "Cancel" at this point to preserve them.

Cancel

Click the Cancel button to completely abort the current operation. This will close the interface and no changes will be made to your page.

Help

Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference while you continue working with the SRF interface