UI Areas – Add-ons

Last Updated on July 30, 2024 by Parth Parikh

Manual Testing – Sections

  • UI Areas – what user sees in an area before taking any user action
  • Actions – changes that happen when user takes action in the UI
  • Testing Sequences – follow these sequences to test changes & releases
  • Logic – testing CF7 Skins Logic (both Backend & Frontend)
  • Testing Forms – CF7 Skins forms used to help with testing
  • Front End Forms – how CF7 Skins forms display on WordPress website
  • Responsive Styling – WP Backend/Admin at different screen sizes

UI AREAS #

UI Areas – what user sees before taking any user action, in that area.

Instructions: Manual Testing
Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\

Checklist #

Logic Tab #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Logic Tab\

Checklist

React version #

back to top

Logic Tab – UI Areas – React version #

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Logic Tab\React Version\UI Areas\

CF7 Skins Logic – React version (01_All – CF7 Skins Logic_V2.7.0_commit-aad741d_2024-07-29.png)

Checklist #

Logic Tab without Logic #

back to top

Logic Tab without Logic (02_Logic tab without logic_V2.7.0_commit-aad741d_2024-07-29.png)

Add Logic Item – Drag And Drop #

back to top

Add Logic Item – Drag and Drop (03_Add Logic Item – Drag and Drop_V2.7.0_commit-aad741d_2024-07-29.png)

Added Logic Item – Drag And Drop #

back to top

Added Logic Item – Drag And Drop (04_Added Logic Item – Drag and Drop_V2.7.0_commit-aad741d_2024-07-29.png)

Logic Item Status – Toggle Switch #

back to top

Logic Item Status – Toggle Switch (05_Logic Item Status – Toggle Switch_V2.7.0_commit-aad741d_2024-07-29.png)

Logic Item Condition – Options #

back to top

Logic Item Condition – Options (06_Logic Item Condition – Options_V2.7.0_commit-aad741d_2024-07-29.png)

Logic Statement Criteria – Options #

back to top

Logic Statement Criteria – Options (07_Logic Statement Criteria – Options_V2.7.0_commit-aad741d_2024-07-29.png)

Logic Statement Criteria – Selected #

back to top

Logic Statement Criteria – Selected (08_Logic Statement Criteria – Selected_V2.7.0_commit-aad741d_2024-07-30.png)

Logic Criteria Operators – Options #

back to top

Logic Criteria Operators – Options (09_Logic Criteria Comparison Operators – Options_V2.7.0_commit-aad741d_2024-07-30.png)

Logic Criteria Comparison Value #

back to top

Logic Criteria Comparison Value (10_Logic Criteria Comparison Value_V2.7.0_commit-aad741d_2024-07-30.png)

Added Another Logic Statement #

back to top

Add Another Logic Statement (11_Add another logic – Button_V2.7.0_commit-aad741d_2024-07-30.png)

Added Another Logic Statement #

back to top

Added Another Logic Statement (12_Added another Logic Statement_V2.7.0_commit-aad741d_2024-07-30.png)

Delete Logic Statement #

back to top

Delete Logic Statement (13_Delete Logic Statement_V2.7.0_commit-aad741d_2024-07-30.png)

Delete Logic Item #

back to top

Delete Logic Item (14_Delete Logic Item_V2.7.0_commit-aad741d_2024-07-30.png)

Logic Item Contracted #

back to top

Logic Item Contracted (15_Logic Item Contracted_V2.7.0_commit-aad741d_2024-07-30.png)

Logic Item Expanded #

back to top

Logic Item Expanded (16_Logic Item Expanded_V2.7.0_commit-aad741d_2024-07-30.png)

Duplicate Logic item #

back to top

Duplicate Logic Item (17_Duplicate Logic Item_V2.7.0_commit-aad741d_2024-07-30.png)

Duplicate Logic Statement #

back to top

Duplicate Logic Statement (18_Duplicate Logic Statement_V2.7.0_commit-aad741d_2024-07-30.png)

Logic Tab – Tooltips – React Version #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Logic Tab\React Version\Tooltips\

Checklist

  1. Tip
  2. Information
  3. Drag to Move
  4. Any or All Condition Information
  5. Add Logic Statement
  6. Duplicate Logic
  7. Delete Logic Statement
  8. Expand Logic Item
  9. Duplicate Logic Statement
  10. Delete Logic Item
  11. Fields Area Help
  12. Tabs Area Help

Tip #

Tooltips – Logic Tab – Drag to Move (01_Tooltips – Logic Tab – Tip_V2.7.0_commit-aad741d_2024-07-30.png)

Information #

Tooltips – Logic Tab – Drag to Move (02_Tooltips – Logic Tab – Info_V2.7.0_commit-aad741d_2024-07-30.png)

Drag to Move #

Tooltips – Logic Tab – Drag to Move (03_Tooltips – Logic Tab – Drag to move_V2.7.0_commit-aad741d_2024-07-30.png)

Any or All Condition Information #

Tooltips – Logic Tab – Add Logic Statement (04_Tooltips – Logic Tab – Any or All condition information_V2.7.0_commit-aad741d_2024-07-30.png)

Add Logic Statement #

Tooltips – Logic Tab – Add Logic Statement (05_Tooltips – Logic Tab – Add Logic Statement_V2.7.0_commit-aad741d_2024-07-30.png)

Duplicate Logic #

Tooltips – Logic Tab – Duplicate Logic Statement (06_Tooltips – Logic Tab – Duplicate Logic_V2.7.0_commit-aad741d_2024-07-30.png)

Delete Logic Statement #

Tooltips – Logic Tab – Delete Logic Statement (07_Tooltips – Logic Tab – Delete Logic Statement_V2.7.0_commit-aad741d_2024-07-30.png)

Expand Logic Item #

Tooltips – Logic Tab – Duplicate Logic Item (08_Tooltips – Logic Tab – Expand Logic Item_V2.7.0_commit-aad741d_2024-07-30.png)

Duplicate Logic Item #

Tooltips – Logic Tab – Duplicate Logic Item (09_Tooltips – Logic Tab – Duplicate Logic Statement_V2.7.0_commit-aad741d_2024-07-30.png)

Delete Logic Item #

Tooltips – Logic Tab – Delete Logic Item (10_Tooltips – Logic Tab – Delete Logic Item_V2.7.0_commit-aad741d_2024-07-30.png)

Fields Area Help #

Tooltips – Logic Tab – Delete Logic Item (11_Tooltips – Logic Tab – Field area help_V2.7.0_commit-aad741d_2024-07-30.png)

Tabs Area Help #

Tooltips – Logic Tab – Delete Logic Item (12_Tooltips – Logic Tab – Tab area help_V2.7.0_commit-aad741d_2024-07-30.png)

jQuery version #

back to top

Logic Tab – UI Areas – jQuery version #

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Logic Tab\jQuery version\UI Areas\

CF7 Skins Logic (All_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Checklist

  1. Logic Tab without Logic
  2. Select Logic Item – Options
  3. Added Logic Item
  4. Logic Item Status – Options
  5. Logic Item Condition – Options
  6. Added Logic Statement
  7. Logic Statement Criteria – Options
  8. Logic Statement Criteria – Selected
  9. Logic Criteria Operators – Options
  10. Logic Criteria Comparison Value
  11. Added Another Logic Statement
  12. Delete Logic Statement
  13. Delete Logic Item

Logic Tab without Logic #

Logic Tab without Logic (Logic Tab without Logic_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Select Logic Item – Options #

back to top

Select Logic Item – Options (Select item – Options_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Logic Item Added #

Logic Item Added (Added Item_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Logic Item Status – Options #

Logic Item Status – Options (Item Logic Status – Options_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Logic Item Conditions – Options #

Logic Item Conditions – Options (Item Logic Condition – Options_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Add Logic Statement #

Add Logic Statement (Add_Statement_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Logic Statement Criteria – Options #

Logic Statement Criteria – Options (Logic Statement criteria- Options_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Logic Statement Criteria – Selected #

back to top

Logic Statement Criteria – Selected (Criteria – Selected_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Logic Criteria Operators – Options #

Logic Criteria Operators – Options (Criteria Logic Operators – Options_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Logic Criteria Comparison Value #

Logic Criteria Comparison Value (Criteria Logic comparison value – Field_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Add Another Logic Statement #

Add Another Logic Statement (Add another logic statement_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Delete Logic Statement #

back to top

Delete Logic Statement (Delete Logic statement_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Delete Logic Item #

Delete Logic Item (Delete Logic Item_CF7 Skins Logic_v1.9.1_2022-04-06.png)

Logic Tab – Tooltips – jQuery Version #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Logic Tab\jQuery Version\Tooltips\

Checklist

  1. Select Item
  2. Add Field
  3. Remove Field
  4. Add Logic Statement
  5. Remove this Statement

Select Item #

Tooltips – Logic Tab – Select Item (Tooltips – Logic Tab (jQuery) – Select Item_v2.5.3-B_2022-07-01.png)

Add Field #

Tooltips – Logic Tab – Add Field (Tooltips – Logic Tab (jQuery) – Add Field_v2.5.3-B_2022-07-01.png)

Remove Field #

Tooltips – Logic Tab – Remove Field Field (Tooltips – Logic Tab (jQuery) – Remove Field_v2.5.3-B_2022-07-01.png)

Add Logic Statement #

Tooltips – Logic Tab – Add Statement (Tooltips – Logic Tab (jQuery) – Add Statement_v2.5.3-B_2022-07-01.png)

Remove this Statement #

Tooltips – Logic Tab – Remove this Statement (Tooltips – Logic Tab (jQuery) – Remove this Statement_v2.5.3-B_2022-07-01.png)

Checklist

  1. Hovering on Icons will show the Tooltip
  2. The tooltip text hides when not hovering

Logic Tab – Functionality – jQuery Version #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Logic Tab\jQuery Version\Functionality\

Form without any Logic #

Logic – Backend – without any logic (Logic – Backend – without any logic_v2.5.3_B_2022-11-05.png)

back to top

All Fields available in Logic #

All Fields available in Logic (Logic – Backend – All Fields available in Logic _v2.5.3_B_2022-11-05.png)

Logic Applicability #

Main Field Visibility Conditions #

All criteria available with each field #

All criteria available with each field(Logic – Backend – All criteria available with each field – select _v2.5.3_B_2022-11-05.png)

All available Fields added in logic #

All available Fields added in logic (Logic – Backend – All fields Added_v2.5.3_B_2022-11-05.png)

All available fields are added in the logic statement of a field #

All available fields are added in the logic statement of a field – (Logic – Backend – All available fields are added in the logic statment of a field – file _v2.5.3_B_2023-03-27.png)

Operators available with each field #

Operators available with each field – (Logic – Backend – Operators available with each field – url _v2.5.3_B_2023-06-06.png)

back to top

Multi #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Multi Tabs\

Checklist

Multi Tabs #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Multi Tabs\

Multi Tabs (Multi Tabs_v2.4.1_2021-02-22.png)

Checklist

  1. Multi Tabs – Visual Form Area
  2. Multi Tabs – CF7 Area

Multi Tabs – Visual Form Area #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Multi Tabs – Visual Form Area\

Checklist #

  1. Multi Tabs – Visual Form Area – Hidden Lists
  2. Multi Tabs – Visual Form Area – Visible Lists

Multi Tabs – Visual Form Area – Hidden Lists #

back to top

Checklist

  1. Visual Form Area
  2. Options
  3. Current Tab
  4. Other Tabs
  5. Button Elements
  6. Rename Multi Tab Dialog
  7. Scroll Arrows
Visual Form Area – Hidden Lists (Hidden Lists_01_Multi Tabs_Visual Form Area_commit_f0dc0a7_2024-07-26.png)
Options – Hidden Lists (Hidden Lists_02_Multi Tabs – Visual Form Area – Options_commit_f0dc0a7_2024-07-26.png)
Current Tab – Hidden Lists (Hidden Lists_03_Multi Tabs – Visual Form Area – Current Tab Button_commit_f0dc0a7_2024-07-26.png)
Other Tabs – Hidden Lists (Hidden Lists_04_Multi Tabs – Visual Form Area – Other Tab Buttons_commit_f0dc0a7_2024-07-26.png)
Button Elements – Hidden Lists (Hidden Lists_05_Multi Tabs – Visual Form Area – Button Elements_commit_f0dc0a7_2024-07-26.png)
Rename Multi Tab Dialog – Hidden Lists (Hidden Lists_06_Multi Tabs – Visual Form Area – Rename Multi Tab_commit_f0dc0a7_2024-07-26.png)
Scroll Arrows – Hidden Lists (Hidden Lists_07_Multi Tabs – Visual Form Area – Scroll Arrows_commit_f0dc0a7_2024-07-26.png)

Multi Tabs – Visual Form Area – Visible Lists #

back to top

Checklist

  1. Visual Form Area
  2. Options
  3. Current Tab
  4. Other Tabs
  5. Button Elements
  6. Rename Multi Tab Dialog
  7. Scroll Arrows
Visual Form Area – Visible Lists (Visible Lists_08_Multi Tabs_Visual Form Area_commit_f0dc0a7_2024-07-26.png)
Options – Visible Lists (Visible Lists_09_Multi Tabs – Visual Form Area – Options_commit_f0dc0a7_2024-07-26.png)
Current Tab – Visible Lists (Visible Lists_10_Multi Tabs – Visual Form Area – Current Tab Button_commit_f0dc0a7_2024-07-26.png)
Other Tabs – Visible Lists (Visible Lists_11_Multi Tabs – Visual Form Area – Other Tab Buttons_commit_f0dc0a7_2024-07-26.png)
Button Elements – Visible Lists (Visible Lists_12_Multi Tabs – Visual Form Area – Button Elements_commit_f0dc0a7_2024-07-26.png)
Rename Multi Tab Dialog – Visible Lists (Visible Lists_13_Multi Tabs – Visual Form Area – Rename Multi Tab_commit_f0dc0a7_2024-07-26.png)
Scroll Arrows – Visible Lists (Visible Lists_14_Multi Tabs – Visual Form Area – Scroll Arrows_commit_f0dc0a7_2024-07-26.png)

Related Actions

  1. Scroll Multi Tabs

Checklist

  1. Right Scroll Button
  2. Left Scroll Button

Multi Tab – CF7 Area #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Multi Tabs\CF7 Area\

Multi Tabs – CF7 Area (Multi Tabs – CF7 Area_v2.5.1_2022-02-25.png)

Checklist

  1. Multi Tab Options
  2. Multi Tab Elements
  3. Multi Tab Button Elements
  4. Multi Tab Rename

Multi Tab Options – CF7 Area #

back to top

Options – Multi Tab – CF7 Area (Options-Multi Tabs – CF7 Area_v2.5.1_2022-02-25.png)

Checklist

  1. Show navigation
  2. Show progress bar
  3. Show pagination
  4. Start Button Text
  5. End Button Text
  6. Previous Button Text
  7. Next Button Text
  8. Thank You Tab Text

Multi Tab Elements – CF7 Area #

back to top

Elements – Multi Tab – CF7 Area (Multi Tabs – CF7 Area_v2.5.1_2022-02-25.png)

Checklist

  1. Tab Button
  2. Current Tab Button
  3. Other Tab Buttons
Tab Button – Multi Tab – CF7 Area (Tab Button-CF7 Area_Multi Tabs_v2.5.1_2022-02-25.png)
Current Tab Button – Multi Tab – CF7 Area (Current Tab Button-CF7 Area_Multi Tabs_v2.5.1_2022-02-25.png)
Other Tab Buttons – Multi Tab – CF7 Area (Other Tab Buttons-CF7 Area_Multi Tabs_v2.5.1_2022-02-25.png)

Checklist

  1. The form content matches the selected Current Tab [Move to ACTIONS]
  2. All other tab buttons, other than currently selected tab have same style

Multi Tab Button Elements – CF7 Area #

back to top

Button Elements – Multi Tab – CF7 Area (Elements Tab Button-CF7 Area_Multi Tabs_v2.5.1_2022-02-25.png)

Checklist

  1. Tab Name – Double Click to rename
  2. Remove – Remove Tab and Content
  3. Add New – Add a new Tab

Multi Tab Rename – CF7 Area #

back to top

Rename – Multi Tab – CF7 Area (Rename Multi Tabs – CF7 Area_v2.5.1_2022-02-25.png)

Checklist

  1. Changing the Tab Name

Multi Tabs – Options #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Multi Tabs – Options\

Checklist

  • item

Styles – Ready #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Styles-Ready\

Checklist #

Styles – Ready – Hidden Lists #

back to top

Checklist #

Addon Options #

back to top

Field Addon Option with Lists Hidden (04_Lists Hidden – Ready – Field addon options_v3.0_commit-c60cc69_2024-06-10.png)

Ready Class Options #

back to top

OL Ready Class Options with Lists Hidden (07_Lists Hidden – Ready – OL Ready Class options_v3.0_commit-c60cc69_2024-06-10.png)
LI Ready Class Options with Lists Hidden (08_Lists Hidden – Ready – LI Ready Class options_v3.0_commit-c60cc69_2024-06-10.png)

Ready Grid Options #

back to top

OL Ready Grid Options with Lists Hidden (11_Lists Hidden – Ready – OL Ready Grid options_v3.0_commit-c60cc69_2024-06-10.png)
LI Ready Grid Options with Lists Hidden (12_Lists Hidden – Ready – LI Ready Grid options_v3.0_commit-c60cc69_2024-06-10.png)

Field Label Option #

back to top

Field Label Position Options with Lists Hidden (14_Lists Hidden – Ready – Field Label options_v3.0_commit-c60cc69_2024-06-10.png)

Field Span Option #

back to top

Field Span Options with Lists Hidden (16_Lists Hidden – Ready – Field Span options_v3.0_commit-c60cc69_2024-06-10.png)

Styles – Ready – Visible Lists #

back to top

Checklist #

Addon Options #

back to top

OL Addon Option with Lists Visible (01_Lists-Visible-Ready-OL-addon-options_v3.0_commit-c60cc69_2024-06-10)
LI Addon Option with Lists Visible (02_Lists Visible – Ready – LI addon options_v3.0_commit-c60cc69_2024-06-10.png)
Field Addon Option with Lists Visible (03_Lists Visible – Ready – Field addon options_v3.0_commit-c60cc69_2024-06-10.png)

Ready Class Options #

back to top

OL Ready Class Options with Lists Visible (05_Lists Visible – Ready – OL Ready Class options_v3.0_commit-c60cc69_2024-06-10.png)
LI Ready Class Options with Lists Visible (06_Lists Visible – Ready – LI Ready Class options_v3.0_commit-c60cc69_2024-06-10.png)

Ready Grid Options #

back to top

OL Ready Grid Options with Lists Visible (09_Lists Visible – Ready – OL Ready Grid options_v3.0_commit-c60cc69_2024-06-10.png)
LI Ready Grid Options with Lists Visible (10_Lists Visible – Ready – LI Ready Grid options_v3.0_commit-c60cc69_2024-06-10.png)

Field Label Option #

back to top

Field Label Position Options with Lists Visible (13_Lists Visible – Ready – Field Label options_v3.0_commit-c60cc69_2024-06-10.png)

Field Span Option #

back to top

Field Span Options with Lists Visible (15_Lists Vissible – Ready – Field Span options_v3.0_commit-c60cc69_2024-06-10.png)

Further reading:

NOTES #

Add notes here.

Old – Will delete after review

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Styles-Ready\

[ADD image]

Checklist

OL #

back to top

Checklist

  • Addon Option
  • Ready Class
  • Ready Grid
OL Addon Options (01_Ready – ol addon options_v2.7.0_2023-10-30.png)
OL Addon option Ready Class (02_Ready – ol addon options – ready class_v2.7.0_2023-10-30.png)
OL Addon option Ready Grid (03_Ready – ol addon options – ready grid_v2.7.0_2023-10-30)

LI #

back to top

Checklist

  • Addon Option
  • Ready Class
  • Ready Grid
LI Addon Options (04_Ready – li addon options_v2.7.0_2023-10-30.png)
LI Addon option Ready Class (05_Ready – li addon options – ready class_v2.7.0_2023-10-30.png)
LI Addon option Ready Grid (06_Ready – li addon options – ready grid_v2.7.0_2023-10-30.png)
LI Addon option Field Span (07_Ready – li addon options – field span_v2.7.0_2023-10-31.png)

Field #

back to top

Checklist

  • Addon Option
  • Label Position
Field Addon Option (08_Ready – field addon options_v2.7.0_2023-10-30.png)
Field Label Position (09_Ready – field addon options – label postion_v2.7.0_2023-10-30.png)

Add-ons Menu #

back to top

Images – ..\Sync\..\Testing\Test Site\Manual Testing\UI AREAS\Styles-Ready – Add-ons Menu\

Visual Add-ons Menu (02a01_Visual Add-ons Menu_v2.6.2_2024-01-24.png)

See also Styles – Ready (Actions).

Checklist

  1. Ready Class (CF7 Skins Ready Add-on)
  2. Ready Grid (CF7 Skins Ready Add-on)
  3. Label Position (CF7 Skins Ready Add-on)

Ready Class (CF7 Skins Ready Add-on) #

back to top

Ready Class – OL Visual Add-ons Menu (02a02_Ready Class – OL Visual Add-ons Menu_v2.6.2_2024-01-24.png)
Ready Class – LI Visual Add-ons Menu (02a03_Ready Class – LI – Visual Add-ons Menu_v2.6.2_2024-01-24.png)

Ready Grid (CF7 Skins Ready Add-on) #

back to top

Ready Grid – OL – Visual Add-ons Menu (02a04_Ready Grid – OL – Visual Add-ons Menu_v2.6.2_2024-01-24.png)
Ready Grid – LI – Visual Add-ons Menu (02a05_Ready Grid – LI – Visual Add-ons Menu_v2.6.2_2024-01-24.png)
Field Span – LI – Ready Grid – Visual Add-ons Menu (02a06_Field Span – LI – Ready Grid – Visual Add-ons Menu_v2.6.2_2024-01-24.png)

Label Position (CF7 Skins Ready Add-on) #

back to top

Label Position – Visual Add-ons Menu (02a07_Label Position – Visual Add-ons Menu_v2.6.2_2024-01-24.png)

back to top

Further reading:

NOTES #

Add notes here.