Top Features of Survey Plus Web Part for Smarter Data Collection

Step-by-Step Guide: Creating Responsive Forms with Survey Plus Web Part

Overview

This guide shows how to create responsive, accessible forms in SharePoint using the Survey Plus Web Part. It covers installation, configuration, responsive layout design, conditional logic, validation, styling for different devices, and publishing.

Before you begin

• Have SharePoint site admin or page edit permissions.
• Download and install Survey Plus Web Part package (assume it’s already available in your app catalog).
• Decide form goals, required fields, and target devices (desktop, tablet, mobile).

1. Add Survey Plus Web Part to a page

1. Edit the SharePoint page where you want the form.
2. Click the plus (+) icon to add a web part.
3. Search for and select “Survey Plus”.
4. Place the web part in the desired section and save the page (draft mode).

2. Create a new form (survey)

1. Open the Survey Plus web part settings (click the pencil icon).
2. Choose “Create New Survey”.
3. Enter a title and optional description.
4. Select a storage option (SharePoint list or external endpoint). Default: SharePoint list.

3. Add and configure fields

1. In the form builder, click “Add Field”.
2. Choose field types: Single-line text, Multi-line text, Choice (radio/dropdown), Checkbox, Date, Rating, Number, File upload, or Hidden fields.
3. For each field set:
   • Label (short, descriptive).
   • Placeholder (optional).
   • Required toggle (on/off).
   • Help text (optional).
   • Validation rules (regex or built-in checks for email, numeric range, date range).
4. Use Field Groups to logically group related fields.

4. Build responsive layout

1. In Layout settings choose a responsive grid (default: 12-column).
2. For each field or group set column widths for breakpoints:
   • Desktop: columns 1–12 (e.g., two fields side-by-side = 6 + 6).
   • Tablet: columns 1–8 (e.g., 4 + 4).
   • Mobile: columns 1–4 (stacked = full width).
3. Use the preview toggle to test Desktop, Tablet, and Mobile views.
4. Adjust padding and margins in the web part settings to improve spacing on small screens.

5. Add conditional logic and branching

1. Open the Logic tab in the form builder.
2. Create rules such as: “If Question A = ‘Yes’ then show Question B.”
3. Combine multiple conditions with AND/OR.
4. Test rule flows in the preview to ensure fields hide/show correctly across breakpoints.

6. Configure submission behavior

1. Choose post-submission action:
   • Show a confirmation message.
   • Redirect to a thank-you page.
   • Send user to a URL (external).
2. Configure email notifications for respondents and admins; include field values using tokens.
3. Optionally enable auto-save drafts for long forms.

7. Accessibility and mobile usability

1. Ensure each field has a label and helpful aria attributes (Survey Plus provides options to add aria-label/aria-describedby).
2. Use sufficient color contrast for text and controls.
3. Make touch targets at least 44x44px.
4. Enable keyboard navigation and test with screen reader.

8. Styling and themes

1. In the Appearance settings select or create a theme (colors, fonts, button styles).
2. Use CSS overrides carefully if custom styles are allowed; scope them to the web part to avoid site-wide conflicts.
3. Ensure responsive typography (use relative units like rem/em).

9. Test thoroughly

1. Test on multiple devices and browsers (Chrome, Edge, Safari, Firefox).
2. Validate data saving to the configured storage (SharePoint list or endpoint).
3. Test conditional logic, validation messages, and error handling.
4. Run accessibility checks (e.g., Lighthouse, axe).

10. Publish and monitor

1. Publish the page when ready.
2. Monitor submissions via the connected SharePoint list or reports in Survey Plus.
3. Iterate based on user feedback and analytics.

Troubleshooting (quick)

• Form not saving: check list permissions and web part storage settings.
• Layout breaks on mobile: reduce custom CSS and verify column settings for mobile breakpoint.
• Conditional rules not firing: confirm field internal names used in rules and test rule order.

Sample quick checklist

• Page and web part added
• Fields created and validated
• Responsive column widths set
• Conditional logic tested
• Accessibility attributes added
• Submission behavior configured
• Published and monitored

If you want, I can produce step-by-step screenshots, a ready-to-import JSON form schema for Survey Plus, or a short checklist tailored to a specific survey type