Form Integration
Complete Tutorial

Step 1.1: Sign Up for PRZIO

1. Visit the PRZIO signup page at /signup
2. Enter your email address and create a password
3. Verify your email address by clicking the link sent to your inbox
4. Complete your profile setup

Step 1.2: Create a New Project

1. After logging in, click on "Create New Project" button
2. Enter a project name (e.g., "My Website Forms")
3. Add a project description (optional)
4. Click "Create Project" to proceed

Step 2.1: Navigate to Form Builder

1. Go to your project dashboard
2. Click on "Forms" in the sidebar
3. Click "Create New Form" button

Step 2.2: Choose Form Type

Select the type of form you want to create:

• Contact Form - For general inquiries and messages
• Lead Capture Form - For collecting email addresses and lead information
• Survey Form - For collecting feedback and responses
• Newsletter Signup - For email subscriptions
• Custom Form - Build your own form from scratch

Step 2.3: Name Your Form

1. Enter a form name (e.g., "Contact Us Form")
2. Add a form description (optional)
3. Click "Continue" to proceed to form builder

Step 3.1: Add Form Fields

Add form fields to collect the data you need:

• Text Input - For names, addresses, and short text
• Email Input - For email addresses with validation
• Phone Input - For phone numbers
• Textarea - For longer messages and comments
• Select Dropdown - For single choice selections
• Radio Buttons - For single choice from options
• Checkboxes - For multiple selections
• Date Picker - For date selection
• File Upload - For file attachments

Step 3.2: Configure Field Settings

1. Click on a field to edit its properties
2. Set the field label (e.g., "Full Name")
3. Set the field name (used for form submission)
4. Mark fields as required or optional
5. Add placeholder text for better UX
6. Set default values if needed

Step 3.3: Set Up Validation Rules

Configure form validation to ensure data quality:

• Required Fields - Mark fields that must be filled
• Email Validation - Automatic validation for email fields
• Min/Max Length - Set character limits for text fields
• Pattern Matching - Custom regex patterns for validation
• Custom Error Messages - Personalized error messages

Step 3.4: Customize Form Styling

1. Choose form layout (single column, two columns, etc.)
2. Customize colors and fonts
3. Style the submit button
4. Add custom CSS for advanced styling

Step 4.1: Enable Multi-Step Mode

1. In the form builder, toggle "Multi-Step Form" option
2. Create multiple form steps by clicking "Add Step"
3. Organize fields into different steps

Step 4.2: Configure Step Navigation

1. Add "Next" and "Previous" buttons
2. Set step validation - validate current step before proceeding
3. Add progress indicator to show form completion
4. Customize step titles and descriptions

Step 4.3: Preview Multi-Step Form

1. Click "Preview" to see how your multi-step form works
2. Test navigation between steps
3. Verify validation works on each step

Option 5.1: Embed in Popup

Add your form to a popup for better conversion:

1. Create a popup in PRZIO (see Popup Integration tutorial)
2. In the popup editor, click "Add Form"
3. Select your form from the dropdown
4. The form will be embedded in the popup
5. Configure popup triggers to show when form should appear

Option 5.2: Standalone Form

Embed your form directly on a webpage:

1. In your form settings, copy the form embed code
2. Paste the code where you want the form to appear on your website
3. The form will render automatically

<!-- Form Embed Code -->
<div id="przio-form-container" data-form-id="YOUR_FORM_ID"></div>
<script src="https://app.przio.com/sdk.js" data-project-id="YOUR_PROJECT_ID"></script>

Step 6.1: Include SDK Script

The PRZIO form SDK is included automatically when you use the popup SDK or embed code. If you're using standalone forms, include the SDK:

Step 6.2: Form Auto-Initialization

When the PRZIO SDK loads, it automatically:

• Finds all forms with data-form-id attribute
• Initializes form validation and submission handlers
• Sets up multi-step navigation if applicable
• Handles form submission to PRZIO API

Step 7.1: Test Form Display

1. Open your website in a browser
2. Navigate to the page where your form is embedded
3. Verify the form displays correctly
4. Check that all fields are visible and properly styled

Step 7.2: Test Form Validation

1. Try submitting the form without filling required fields
2. Verify validation error messages appear
3. Test email validation with invalid email addresses
4. Test field length validation if configured
5. Verify error messages are clear and helpful

Step 7.3: Test Form Submission

1. Fill out all form fields correctly
2. Click the submit button
3. Verify success message appears
4. Check PRZIO dashboard to confirm form submission was received
5. Verify all form data is captured correctly

Step 7.4: Test Multi-Step Form (If Applicable)

1. Navigate through all form steps using Next/Previous buttons
2. Verify step validation prevents moving forward with invalid data
3. Check progress indicator updates correctly
4. Submit the form from the final step
5. Verify all step data is submitted together