> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.formstatus.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# User Guide: Editing Custom Steps

### Table of Contents
* [Introduction](#3-color800000introduction)
* [Accessing the Edit Form Page](#3-color800000accessing-the-edit-form-page)
* [Auto-Populated Custom Steps](#3-color800000auto-populated-custom-steps)
* [Activating or Pausing a Form](#3-color800000activating-or-pausing-a-form)
* [Understanding Custom Steps](#3-color800000understanding-custom-steps)
* [Step Types](#3-color800000step-types)
* [Finding CSS Selectors](#3-color800000finding-css-selectors)
* [Managing Steps](#3-color800000managing-steps)
* [Email Testing](#3-color800000email-testing)
* [Saving and Running Tests](#3-color800000saving-and-running-tests)
* [Viewing Test Results](#3-color800000viewing-test-results)
* [Understanding Statuses](#3-color800000understanding-statuses)
* [Troubleshooting](#3-color800000troubleshooting)
---

### ${color}[#800000](Introduction)
Custom Steps allow you to define exactly how FormStatus interacts with your form during testing.

Instead of replaying a recorded session every time, FormStatus converts your recording into a reusable set of actions that can be edited and maintained over time.

Custom Steps are especially useful for:
* Multi-page forms
* Dynamic forms with conditional logic
* Forms that require wait times between actions
* Long-term monitoring without repeated recordings
* Advanced testing scenarios
---

### ${color}[#800000](Accessing the Edit Form Page)
After uploading a manual recording and allowing the initial test to complete:
1. Open the **Forms** page in your FormStatus dashboard.
2. Locate the form you want to modify.
3. Click the **Edit** (pencil) icon.
You will be taken to the **Edit Form** page.

###### Available Sections
The page contains three configuration cards:

**Form Settings**
General information about the form.

**Test Configuration**
Custom step setup and testing behavior.

**Notifications**
Email and alert settings for test results.
---

### ${color}[#800000](Auto-Populated Custom Steps)
When a form is created using a manual recording upload, FormStatus automatically converts your recorded actions into editable custom steps.

This allows you to immediately review, modify, and reuse the workflow without creating each step manually.

###### How Recorded Actions Are Converted
| Recorded Action | Generated Step |
| ---- |
| Typing into a text field | Type step with selector and value |
| Clicking Submit or Next | Click step with button selector |
| Selecting a dropdown option | Click step targeting the selected option |
| Checking a checkbox | Click step targeting the checkbox |
| Selecting a radio button | Click step targeting the selected radio option |


###### Automatic Descriptions
Each generated step includes a description based on the field label from the form.
**Examples**
| Form Field | Generated Description |
| ---- |
| First Name | First Name |
| Email Address | Email Address |
| Phone Number | Phone Number |
| Submit Button | Submit |

These descriptions help make steps easier to identify when reviewing or editing your workflow.

###### Duplicate Action Handling
To keep the generated workflow clean and efficient, duplicate actions on the same field are automatically merged.

**Example**
If you typed:
1. John
2. John D.
3. John Doe
into the same First Name field during recording,
only the final value is retained:
**John Doe**
The generated workflow reflects the final state of the form at the time of submission.
---

### ${color}[#800000](Editing Generated Steps)
Auto-generated steps behave exactly like manually created steps.
You can:
* Edit existing steps
* Change step types
* Update selectors
* Modify values
* Reorder steps
* Delete steps
* Add new steps
There is no need to upload a new recording unless you want to capture an entirely different workflow.
---

### ${color}[#800000](Activating or Pausing a Form)
In the upper-right corner of the page, you will find the form status toggle.

###### Active
When the toggle is ON:
* Monitoring is enabled
* Tests can be executed
* Form settings can be modified

###### Paused
When the toggle is OFF:
* Monitoring is disabled
* Scheduled tests stop running
* Form configuration becomes unavailable

The form must be Active before you can run tests or edit custom steps.
---

### ${color}[#800000](Understanding Custom Steps)
The **Test Configuration** section contains your custom testing workflow.

In Custom Steps you'll see:
**Define custom actions for advanced form testing**

Each step represents a single action performed during testing.
Steps are executed sequentially from top to bottom.
---

### ${color}[#800000](Step Types)
FormStatus supports three step types:
1. Click
2. Type
3. Wait

###### Click Step
A Click step interacts with an element on the page.

**Common Uses**
* Clicking Submit buttons
* Clicking Next or Continue buttons
* Selecting radio buttons
* Selecting checkboxes
* Choosing dropdown options

**Configuration**
| Field | Required | Description |
| ---- |
| Type | Yes | Select Click |
| Description | No | Internal label for reference |
| CSS Selector | Yes | Element to click |


###### Type Step
A Type step enters text into a form field.

**Common Uses**
* Name fields
* Email fields
* Phone fields
* Text areas
* Search inputs

**Configuration**
| Field | Required | Description |
| ---- |
| Type | Yes | Select Type |
| Description | No | Internal label for reference |
| CSS Selector | Yes | Target field |
| Value | Yes | Text to enter |


###### Wait Step
A Wait step pauses execution before continuing.

**Common Uses**
* Waiting for page transitions
* Waiting for AJAX requests
* Waiting for animations
* Waiting for dynamic content

**Configuration**
| Field | Required | Description |
| ---- |
| Type | Yes | Select Wait |
| Description | No | Internal label for reference |
| Value | Yes | Delay in milliseconds |


**Wait Time Reference**
| Value | Duration |
| ---- |
| 500 | 0.5 seconds |
| 1000 | 1 second |
| 2000 | 2 seconds |
| 3000 | 3 seconds |
| 5000 | 5 seconds |

---

### ${color}[#800000](Finding CSS Selectors)
CSS selectors identify which element FormStatus should interact with.

**Common Selector Examples**
| Selector | Targets |
| ---- |
| #email | Element with id="email" |
| input[name="first_name"] | Input named first_name |
| .submit-btn | Element with class submit-btn |
| button[type="submit"] | Submit button |
| #field_123 option[value="Yes"] | Dropdown option |
| input[type="checkbox"] | Checkbox field |


**Copying a CSS Selector in Chrome**
1. Open the form page.
2. Right-click the target element.
3. Select Inspect.
4. Right-click the highlighted HTML element.
5. Select:
6. Copy → Copy Selector
7. Paste the selector into the CSS Selector field.
---

### ${color}[#800000](Managing Steps)

###### Adding a Step
1. Click Add Step.
2. A new step appears at the bottom of the list.
3. Select the desired step type.
4. Complete the required fields.

**Default Values**
New steps are created with:
* Type = Click
* Empty Description
* Empty CSS Selector

###### Reordering Steps
Steps execute from top to bottom.
To change the order:
1. Hover over a step number.
2. The drag handle appears.
3. Drag the step to a new location.
4. Release to drop it.
The remaining steps automatically shift into place.

###### Editing a Step
Modify any step by updating its fields directly.

**Dynamic Fields**
| Step Type | Visible Fields |
| ---- |
| Click | CSS Selector |
| Type | CSS Selector + Value |
| Wait | Value Only |

###### Deleting a Step
1. Locate the step.
2. Click the Trash icon.
3. The step is removed immediately.
---

### ${color}[#800000](Email Testing)
Below the Custom Steps section is the Email Testing option.

###### Enable Email Testing
When enabled, FormStatus verifies:
1. Form submission
2. Email generation
3. Email delivery

**Requirement**
The FormStatus WordPress Plugin must be installed and activated.
If the plugin is not detected, a setup window appears with installation instructions.

###### Disable Email Testing
When disabled:
* Email checks are skipped
* Only page load and form submission checks run
---

### ${color}[#800000](Saving and Running Tests)

**Save Changes**
Saves the configuration without executing a test.

**Confirmation**
Form updated successfully.
---

###### Save and Test
Saves the configuration and immediately starts a new test.

**Steps**
1. Click the dropdown arrow beside Save Changes.
2. Select **Save and Test**.
3. The configuration is saved.
4. A new test begins automatically.

**Confirmation**
Form test started successfully.
You will be redirected back to the Forms page.
---

### ${color}[#800000](Viewing Test Results)

###### Forms Page
Review the latest result in the Status column.
Click the Logs icon to view test history.

###### Logs Page
The Logs page displays all test executions.
| Column | Description |
| ---- |
| Status | Overall result |
| Page Load | Page load verification |
| Form Submission | Submission verification |
| Email Receive | Email verification |
| SSL Check | SSL verification |
| Check Type | Type of test executed |
| Last Checked | Execution timestamp |
| Actions | View details |


###### Check Details Page
The Check Details page includes:
1. Overall Status
2. Individual Check Results
3. Form Information
4. Error Messages
5. Screen Recording
6. SSL Information
7. Email Information
---

### ${color}[#800000](Understanding Statuses)
| Status | Meaning |
| ---- |
| Passed | All checks completed successfully |
| Pending | Test is still running |
| Failed | One or more checks failed |
| Warning | Minor issues detected |
| Disabled | Check was not performed |
---

### ${color}[#800000](Troubleshooting)

###### Field Not Found
*Cause:* The CSS selector does not match an element on the page.
*Solution:* 
* Inspect the element again.
* Copy a new selector.
* Update the step configuration.

###### Form Submission Fails
**Recommended Fixes**
* Ensure all required fields have Type steps.
* Verify entered values are valid.
* Add Wait steps before clicking Submit.

###### Steps Execute Too Quickly
Add Wait steps between actions.

**Recommended Delays**
| Scenario | Suggested Delay |
| ---- |
| After clicking Next | 1000–2000 ms |
| Before clicking Submit | 500–1000 ms |
| After dynamic content loads | 1000–3000 ms |


###### Test Remains Pending
If a test remains pending for more than two minutes:
1. Refresh the page.
2. Check the status again.
3. Run the test again if necessary.
If the issue persists, review the screen recording and error details for additional information.