Compila il modulo sottostante per ricevere un preventivo personalizzato per l'assicurazione del tuo evento.
Stiamo elaborando il tuo preventivo...
```
**Step 2: Test template syntax**
Verify PHP syntax is valid:
```bash
cd norisk-wordpress
php -l page-preventivo.php
```
Expected: `No syntax errors detected in page-preventivo.php`
**Step 3: Commit**
```bash
git add norisk-wordpress/page-preventivo.php
git commit -m "feat: create WordPress page template for quote form
- Complete form with all 15+ required fields
- Embedded CSS matching Golinucci brand
- JavaScript form handling with fetch API
- Loading overlay with configurable timeout
- Success/error result display
- Responsive design for mobile"
```
---
## Task 3: Create Deployment Instructions
**Files:**
- Create: `norisk-wordpress/DEPLOYMENT.md`
**Step 1: Write deployment guide**
```markdown
# WordPress Form Deployment Guide
## Prerequisites
- WordPress admin access
- FTP/sFTP access to server
- VPS IP address for automation API
## Step 1: Update Configuration
Edit `page-preventivo.php` and update the API URL:
```php
const API_URL = 'http://YOUR_VPS_IP:3000/api/quote';
```
## Step 2: Upload to WordPress
1. Connect to your WordPress site via FTP
2. Navigate to: `wp-content/themes/`
3. Create folder: `royal-elementor-kit-child/`
4. Upload both files:
- `style.css`
- `page-preventivo.php`
## Step 3: Activate Child Theme
1. Log into WordPress admin
2. Go to Appearance → Themes
3. Activate "Royal Elementor Kit Child"
## Step 4: Create the Page
1. Go to Pages → Add New
2. Title: "Richiedi Preventivo Evento"
3. Page Attributes → Template: select "Preventivo Evento"
4. Publish the page
5. Note the URL (e.g., `/richiedi-preventivo-evento/`)
## Step 5: Add Link to Main Site
1. Edit the page where you want the button
2. Add a button linking to the new page
3. Button text: "Richiedi Preventivo"
## Step 6: Test
1. Visit the new page
2. Fill the form with test data
3. Submit and verify quote is generated
4. Check all error states work
## Troubleshooting
### CORS Errors
If you see CORS errors in browser console:
- Ensure your Express API has CORS enabled for golinucci.it
- Add to your Express app:
```javascript
app.use(cors({ origin: 'https://golinucci.it' }));
```
### Form Not Styled
- Verify child theme is activated
- Clear browser cache
- Check that style.css is in the correct folder
### API Timeout
Adjust timeout in `page-preventivo.php`:
```php
const API_TIMEOUT_MS = 60000; // 60 seconds
```
### Page Template Not Showing
- Ensure file is named exactly `page-preventivo.php`
- Check that the PHP comment header is present
- Try re-uploading the file
## Maintenance
### Updating API URL
If your VPS IP changes, edit:
```php
const API_URL = 'http://NEW_IP:3000/api/quote';
```
### Adjusting Timeout
If quotes take longer to generate, increase:
```php
const API_TIMEOUT_MS = 45000; // 45 seconds
```
### Styling Changes
Modify `style.css` and re-upload. Changes are immediate.
```
**Step 2: Commit**
```bash
git add norisk-wordpress/DEPLOYMENT.md
git commit -m "docs: add WordPress deployment instructions
- Step-by-step upload guide
- Troubleshooting section
- Maintenance notes"
```
---
## Task 4: Test Locally (Optional Validation)
**Files:**
- Modify: `norisk-wordpress/page-preventivo.php` (test mode)
**Step 1: Create mock API response**
Add this temporarily at the top of the PHP file for testing:
```php
true,
'quoteKey' => 'TEST-' . uniqid(),
'proposalUrl' => 'https://example.com/proposal',
'duration' => '5000ms'
]);
exit;
}
*/
?>
```
**Step 2: Test form validation**
1. Open the HTML file in a browser
2. Try submitting without filling required fields
3. Verify HTML5 validation prevents submission
4. Fill all fields and submit
5. Verify mock response displays correctly
**Step 3: Remove test code**
Delete the test mode block before deploying.
**Step 4: Commit test documentation**
```bash
git commit -m "docs: add local testing instructions
- Mock API response for testing without backend
- Validation test checklist"
```
---
## Summary
After completing this plan you will have:
1. ✅ `norisk-wordpress/style.css` - Complete form styling
2. ✅ `norisk-wordpress/page-preventivo.php` - Full WordPress template
3. ✅ `norisk-wordpress/DEPLOYMENT.md` - Deployment instructions
4. ✅ Configurable API timeout (default 30s)
5. ✅ All 15+ form fields matching automation API
6. ✅ Loading states and error handling
7. ✅ Responsive design
**Next Step:** Deploy to WordPress using the deployment guide.