|
| 1 | +# How to Use Anonymous Forms? |
| 2 | + |
| 3 | +This guide explains the complete process of creating an anonymous form, generating a public link, collecting responses without login, and reviewing submitted data within the system.Anonymous Forms allow anyone with the public link to access and submit the form without authentication.<br> |
| 4 | +Follow the step-by-step instructions below to create, share, manage, and review anonymous form submissions in Doculan. |
| 5 | +--- |
| 6 | + |
| 7 | +## Step 1: Create a New Anonymous Form |
| 8 | + |
| 9 | +- Navigate to the **Doculan Dashboard** and open the **Forms** module from the main menu. |
| 10 | +- Click **Create New Form** to start designing the anonymous form. |
| 11 | +**Enter the following details:** <br> |
| 12 | +- Form Title<br> |
| 13 | +- Form Description (optional)<br> |
| 14 | +- Upload Destination folder |
| 15 | +- From the left-side panel, drag and drop the required form fields into the form builder area. |
| 16 | +**Available field categories include:** |
| 17 | + |
| 18 | +|Category | Available Fields| |
| 19 | +|---------|-----------------| |
| 20 | +|BASIC |Text, Number, Email, Date, Textarea| |
| 21 | +|CHOICE |Radio Button, Dropdown, Checkbox| |
| 22 | +|ADVANCED | File Upload| |
| 23 | + |
| 24 | +- Enable the Public option to allow users to access the form without login. |
| 25 | + |
| 26 | +<img src="screenshots\Anonymous-form\Anonymous-Form.png" alt="Step 1 — Create the Form" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"> |
| 27 | + |
| 28 | +> After configuring the form, click Generate Link to continue. |
| 29 | +
|
| 30 | +--- |
| 31 | + |
| 32 | +## Step 2: Configure Public Access Settings |
| 33 | + |
| 34 | +- After clicking **Generate Link**, the system automatically opens the anonymous form management page. |
| 35 | +- Navigate to the **Manage Link** tab available in the top section of the page. |
| 36 | +- If no expiry date is configured, the form link remains active indefinitely. |
| 37 | +- Click **Generate Public Link** to create the anonymous form URL. |
| 38 | + |
| 39 | +### Configure the following options: |
| 40 | + |
| 41 | +| Option | Description | |
| 42 | +|--------|-------------| |
| 43 | +| Expiry Date | Set the date and time when the form link should expire | |
| 44 | +| Never Expire | Keeps the form link active permanently | |
| 45 | +| Allow Resubmit | Allows the same email address to submit multiple responses | |
| 46 | +| Redirect URL | Redirects users to another page after submission | |
| 47 | + |
| 48 | +<img src="screenshots\Anonymous-form\Anonymous-Form-gnerate-link.png" alt="Step 2 — Configure Public Access" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"> |
| 49 | + |
| 50 | + >“Anyone with this link can fill and submit the form without logging in.” |
| 51 | +
|
| 52 | +--- |
| 53 | + |
| 54 | +## Step 3: Generate and Share the Public Link |
| 55 | + |
| 56 | +- Once the link is generated, the system displays: |
| 57 | + - Public Form URL |
| 58 | + - Link Status *(Active / Inactive)* |
| 59 | + - Expiry Date and Time *(if configured)* |
| 60 | + |
| 61 | +- Users can: |
| 62 | + - Open the form directly |
| 63 | + - Copy the public link |
| 64 | + - Share the form through email, chat, or social media |
| 65 | + - Activate or deactivate the form link anytime |
| 66 | + |
| 67 | +<img src="screenshots\Anonymous-form\Anonymous-Form-public-link.png" alt="Step 3 — Public Link Management" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"> |
| 68 | + |
| 69 | +> The above screenshot represents how to manage and share the generated anonymous form link. |
| 70 | +
|
| 71 | +--- |
| 72 | + |
| 73 | +## Step 4: Share the Form Using QR Code |
| 74 | + |
| 75 | +- Navigate to the **QR Code** tab. |
| 76 | +- A QR code is automatically generated for the anonymous form. |
| 77 | +- Users can scan the QR code using mobile devices to directly open the form. |
| 78 | +- Click **Download QR Code** to save the QR image for sharing. |
| 79 | + |
| 80 | +<img src="screenshots\Anonymous-form\Anonymous-Form-QR.png" alt="Step 4 — QR Code Sharing" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"> |
| 81 | + |
| 82 | +> The above screenshot represents how to generate and share the anonymous form QR code. |
| 83 | +
|
| 84 | +--- |
| 85 | + |
| 86 | +## Step 5: Fill and Submit the Anonymous Form |
| 87 | + |
| 88 | +- The users opens the public form link or scans the QR code. |
| 89 | +- The anonymous form page displays all configured fields. |
| 90 | + |
| 91 | +### The respondent: |
| 92 | +- Enters their email address |
| 93 | +- Fills all required fields |
| 94 | +- Completes the reCAPTCHA verification |
| 95 | +- Clicks **Submit Form** |
| 96 | + |
| 97 | +<img src="screenshots\Anonymous-form\Anonymous-Form-recapcha.png" alt="Step 5 — Fill Anonymous Form" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"> |
| 98 | + |
| 99 | +> The above screenshot represents how users fill and submit anonymous forms. |
| 100 | +
|
| 101 | +--- |
| 102 | + |
| 103 | +## Step 6: Successful Submission |
| 104 | + |
| 105 | +- After clicking **Submit Form**, the system processes the submission successfully. |
| 106 | +- If a **Redirect URL** is configured, the respondent is redirected automatically. |
| 107 | +- A success confirmation message is displayed after submission. |
| 108 | + |
| 109 | +<img src="screenshots\Anonymous-form\Anonymous-Form-submission.png" alt="Step 6 — Submission Success" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"> |
| 110 | + |
| 111 | +> The above screenshot represents a successful anonymous form submission. |
| 112 | +
|
| 113 | +--- |
| 114 | + |
| 115 | +## Step 7: Review Form Submissions |
| 116 | + |
| 117 | +- Navigate to the **Forms** section and open the required anonymous form. |
| 118 | +- Click the **Submissions** tab. |
| 119 | +- Click **Refresh** to load the latest responses. |
| 120 | + |
| 121 | +### The submissions table displays: |
| 122 | + |
| 123 | +| Column | Description | |
| 124 | +|--------|-------------| |
| 125 | +| Email | Submitter email address | |
| 126 | +| Last Submission | Latest submission date and time | |
| 127 | +| Submissions | Number of submissions from the same email | |
| 128 | + |
| 129 | +<img src="screenshots\Anonymous-form\Anonymous-Form-submission-list1.png" alt="Step 7 — Review Submissions" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"><br> |
| 130 | + |
| 131 | +<img src="screenshots\Anonymous-form\Anonymous-Form-submission-list2.png" alt="Step 7 — Review Submissions" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"> |
| 132 | + |
| 133 | +> The above screenshot represents how to review anonymous form submissions inside the system. |
| 134 | +
|
| 135 | +--- |
| 136 | +## Step 8: Access Anonymous Form Management Options |
| 137 | + |
| 138 | +- After creating a anonymous form, the form will appear in the **Forms List** with an **Anonymous** label beside the form name. |
| 139 | +- Click the **Actions (⋮)** menu of the anonymous form. |
| 140 | + |
| 141 | +### The Actions menu contains: |
| 142 | +- **View** → Open the form details |
| 143 | +- **Clone** → Create a duplicate copy of the form |
| 144 | +- **Public Link** → Access public form management options |
| 145 | + |
| 146 | +<img src="screenshots\Anonymous-form\Anonymous-Form-public-link-2.png" alt="Step 3 — Anonymous Form List" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"> |
| 147 | + |
| 148 | +- Click **Public Link** to access: |
| 149 | + - Public Form Link |
| 150 | + - QR Code |
| 151 | + - Submissions |
| 152 | + - Integration Settings |
| 153 | + |
| 154 | + <img src="screenshots\Anonymous-form\Anonymous-Form-submission-list-1.png" alt="Step 3 — Anonymous Form List" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"><br> |
| 155 | + |
| 156 | + <img src="screenshots\Anonymous-form\Anonymous-Form-submission-list-2.png" alt="Step 3 — Anonymous Form List" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"> |
| 157 | + |
| 158 | +> The above screenshot represents how anonymous forms are displayed in the Forms List and how to access public form management options from the Actions menu. |
| 159 | +
|
| 160 | +--- |
| 161 | +## Step 9: Integration via API (Optional) |
| 162 | + |
| 163 | +- Navigate to the **Integration** tab. |
| 164 | +- Developers can integrate anonymous forms into external systems using API support. |
| 165 | + |
| 166 | +### Integration Details |
| 167 | + |
| 168 | +| Item | Value | |
| 169 | +|------|------| |
| 170 | +| FORM ID | 278c39b0-07a3-44c7-adcf-65325bc6a0f0 | |
| 171 | +| API ENDPOINT | POST https://api.doculan.ai/v1/external/forms/submit | |
| 172 | + |
| 173 | +### API Usage |
| 174 | +- Use the **FORM ID** to identify the anonymous form. |
| 175 | +- Submit form responses using the provided API endpoint. |
| 176 | +- Send data through a **POST request**. |
| 177 | +- Submitted responses will appear in the **Submissions** section. |
| 178 | + |
| 179 | +<img src="screenshots\Anonymous-form\Anonymous-Form-Intagaration1.png" alt="Step 8 — API Integration" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"><br> |
| 180 | + |
| 181 | +<img src="screenshots\Anonymous-form\Anonymous-Form-Intagaration2.png" alt="Step 8 — API Integration" style="border:2px solid black; border-radius:4px; width:100%; max-width:800px;"> |
| 182 | + |
| 183 | +> The above screenshot represents how to integrate anonymous forms using API support. |
| 184 | +
|
| 185 | +--- |
| 186 | + |
| 187 | + **Demo Video:** |
| 188 | +<!-- Inline HTML in Markdown file --> |
| 189 | +<style> |
| 190 | +.video-wrap { |
| 191 | + border: 2px solid black; |
| 192 | + border-radius: 4px; |
| 193 | + width: 100%; |
| 194 | + max-width: 800px; |
| 195 | + overflow: hidden; |
| 196 | + margin-bottom: 1rem; |
| 197 | +} |
| 198 | +.video-wrap video { |
| 199 | + display: block; |
| 200 | + width: 100%; |
| 201 | + height: auto; |
| 202 | +} |
| 203 | +</style> |
| 204 | + |
| 205 | +<div class="video-wrap" role="region" aria-label="Demo: Creating a form"> |
| 206 | + <!-- Use a relative path like ./videos/demo.mp4 or an absolute URL --> |
| 207 | + <video controls poster=""> |
| 208 | + <source src="https://doculan-storage-public.s3.us-east-1.amazonaws.com/demo_video/Forms/Anonymous_Form.mp4" type="video/mp4"> |
| 209 | + <source src="https://doculan-storage-public.s3.us-east-1.amazonaws.com/demo_video/Forms/Anonymous_Form.mp4.webm" type="video/webm"> |
| 210 | + <!-- Fallback link if browser can't play video --> |
| 211 | + Your browser does not support the video tag. |
| 212 | + <a href="https://doculan-storage-public.s3.us-east-1.amazonaws.com/demo_video/Forms/Anonymous_Form.mp4" target="_blank" rel="noopener">Download / Open video</a> |
| 213 | + </video> |
| 214 | +</div> |
| 215 | + |
| 216 | + |
| 217 | +> The above **Video** represent that how to **Use Anonymous Forms**. |
| 218 | +
|
| 219 | +© Doculan by [Virtualan Software](https://www.virtualan.io) |
0 commit comments