Documentation Tutorials & Examples

In order to keep the descriptions brief, we only list the settings that were changed from the default settings.
These examples were created using version 2.0.0 in Joomla 3.0

Example One - Basic with Lists

example_one_-_basic_with_lists.png

This example has been configured with the following settings:

  1. Constant Contact Settings : Show Lists to User = Yes

Example Two - Basic without Lists, with Custom Field

example_two_-_basic_without_lists__with_custom_field.png

This example has been configured with the following settings:

  1. Field Options : Show Custom Field 1 = Yes
  2. Field Options : Custom Field 1 Required = Yes
  3. Field Options : Show as List = Yes
  4. Field Options : Custom Field 1 Values =

|-Select-
google|Google
email|Email
referral|Referral

Notice that the field values for a list must be separated by a pipe character '|' and one value per line

Example Three - Colorful Theme

example_three_-_colorful_theme.png

This example has been configured with the following settings:

  1. Constant Contact Settings : Show Lists to User = Yes
  2. Design Options : Theme = Colorful
  3. Design Options : Background Color = #585B83
  4. Miscellaneous Options : SafeSubscribe Image Color = White

Example Four - Colorful Theme with Field Labels inside and button outside

example_four_-_colorful_theme_with_field_labels_inside_an.png

This example has been configured with the following settings:

  1. Constant Contact Settings : Show Lists to User = Yes
  2. Design Options : Theme = Colorful
  3. Design Options : Background Color = #585B83
  4. Field Options : Label Placement = Inside
  5. Miscellaneous Options : Align Submit Button = Right
  6. Miscellaneous Options : Submit Button Placement = Outside
  7. Miscellaneous Options : Show SafeSubscribe = No

Example Five - Simple, all on one line

example_five_-_simple__all_on_one_line.png

This example has been configured with the following settings:

  1. Design Options : Theme = Single-Line
  2. Field Options : Label Placement = Inside
  3. Miscellaneous Options : Intro Text Style = H4
  4. Miscellaneous Options : Show 'SafeSubscribe' = No
  5. Miscellaneous Options : Submit Button Class = btn (a common bootstrap tag)

Example Six - Single Line Responsive

example_six_-_single_line_responsive.png

This example has been configured with the following settings:

  1. Design Options : Theme = Single-Line-Responsive
  2. Field Options : Label Placement = Inside
  3. Miscellaneous Options : Intro Text Style = Default <div>
  4. Miscellaneous Options : Show 'SafeSubscribe' = Yes
  5. Miscellaneous Options : Submit Button Class = btn (a common bootstrap tag)

(Please note: the background color in this module is being applied by our site theme. As of v2.1.8, we are not adding a background color as an option to the 'single-line-responsive' theme. This will likely change in a future version)

Additional Information

additional_information.png

As you can see, the design options for styling your form are limitless, only limited by your imagination. We didn't have the web space to show all available combinations.

Some additional options can be achieved by changing some of the standard Joomla settings, like hiding the module name, or choosing to show the module in HTML5 (a new feature of Joomla 3.0) As shown above, on the left is what a Joomla 3.0 module position looks like in the default theme. On the right, we changed the module style from 'Inherited' to 'HTML5'

This tutorial was created using ScreenStepsfrom BlueMango Learning Systems.