phdcc.Data DNN modules
Powered by FindinSite-MS
phdcc.Data.Form: Layout
phdcc.Data: Overview Examples Getting Started Security Database Versions
phdcc.Data.Form: Form Profile/Register forms Form editing Languages Layout Questions Form hooks Admin
phdcc.Data.View: View  phdcc.Data.List: List phdcc.Data.Search: Search
Last updated: CC 4/12/07


phdcc.Data form layout diagram

You can control the appearance and layout of your form in several ways:

The layout schematic shows the constituent areas of the form. The rectangles shown are not included in the output - they are just used to demarcate each area.

Using the techniques described on this page you can alter the layout dramatically. For example, there is no need for the help for each group to appear underneath the group title - it could be to the right, or be removed completely.

Group layout elements

Each group must contain the following elements:

Question layout elements

Each question must contain the following elements:

Use HTML within the string text or help text

Any HTML can be used for display strings. Typically you might use HTML in the help text to achieve your desired effect.

Select different Display Style options for a question

The Display Style basic question layout can be set as follows:

Change the phdcc.Data.Form CSS stylesheet

phdcc.Data.Form uses various CSS classes when it generates its HTML. These classes are defined in the phdcc_form.css CSS stylesheet file in the DesktopModules\phdcc.Data.Form module installation directory.

If you want to change these CSS classes, the recommended technique is to add your own CSS stylesheet file for a form - see below. In your CSS file, override (or add) the CSS class definitions.

Note that DNN uses several CSS stylesheets when rendering content. The following stylesheets are included in this order:

  1. Portal default CSS
  2. Current skin CSS
  3. Container CSS
  4. Portal CSS
  5. phdcc_form.css
  6. Your added form stylesheet

If you ever upgrade the phdcc.Data.Form module then the phdcc_form.css CSS stylesheet will be overwritten. So keep a copy of your changes and reinstate it after the upgrade. If you are only changing the question or group control CSS styles, a better solution is to leave phdcc_form.css alone and use CSS classes defined in your own CSS stylesheet file.

Use your own CSS stylesheet file

You can define your own CSS file for a form by specifying a "CSS file" when you edit a form. Your CSS file must be in uploaded to the DesktopModules\phdcc.Data.Form module installation directory.

In your CSS file, you can override the definitions of any class defined in the standard phdcc.Data.Form stylesheet, eg to change how the form title is displayed, redefine the 'phdcc_Form_Name' class as follows:
.phdcc_Form_Name { font-weight:bold; font-size:large; color:Purple; }
To remove the "Power by phdcc.Data.Form" message, redefine the 'phdccDataFormVersion' class as follows:
.phdccDataFormVersion { display:none; }

If you ever upgrade the phdcc.Data.Form module, then your CSS file will not be overwritten. However, make sure that your definitions are still being used correctly.

Set the CSS class for a form question

By default, each question type renders its HTML elements using standard CSS style names, eg phdcc_Form_Question_Text. You can override these for a specific question by specifying a value for the CssClass special option for the question.

Edit or copy the form group and question controls

You can write your own Group or Question controls in VB or C#.

To create your own group or question control, copy the relevant files into new filenames, fixing up class and file names. Edit the HTML, usually leaving the phdcc.Data ASP.NET controls (listed above) in the HTML somewhere.

You can embed any CSS definitions within your control. Alternatively, you should define the CSS classes that you use in your form CSS file.

If you ever upgrade the phdcc.Data.Form module then the supplied group and question controls will be overwritten. Therefore, if you want to change the supplied controls, it is recommended that you copy the control so that your new files are not accidentally updated.

The ViewForm control can also be edited (carefully)

Tweak this file if you wish. This file will be overwritten if you upgrade the module.