<!-- AI Roadmap Pre-Workshop Questionnaire for WordPress -->
<!-- Option 1: Use with Contact Form 7 plugin -->
<!-- Copy the following shortcode template and customize in the Contact Form 7 interface -->

[text* role label="1. What is your primary professional role/title?"]

[text* industry label="2. In which industry or sector do you work?"]

<label>3. How would you rate your current familiarity with AI tools and concepts?</label>
[radio familiarity "Complete beginner" "Some awareness but minimal hands-on experience" "Occasionally use basic AI tools (like ChatGPT)" "Regularly use multiple AI tools" "Advanced user/developer"]

[textarea* goals label="4. What are your top 3 goals for integrating AI into your workflow?"]

<label>5. Please list 3-5 tasks that consume the most time in your typical workweek:</label>
<div class="task-entry">
[text task1 placeholder "Task 1"] [number hours1 min:0 max:168 placeholder "Hours"]
</div>
<div class="task-entry">
[text task2 placeholder "Task 2"] [number hours2 min:0 max:168 placeholder "Hours"]
</div>
<div class="task-entry">
[text task3 placeholder "Task 3"] [number hours3 min:0 max:168 placeholder "Hours"]
</div>
<div class="task-entry">
[text task4 placeholder "Task 4 (optional)"] [number hours4 min:0 max:168 placeholder "Hours"]
</div>
<div class="task-entry">
[text task5 placeholder "Task 5 (optional)"] [number hours5 min:0 max:168 placeholder "Hours"]
</div>

[textarea automatable label="6. Which of these tasks do you believe could be enhanced or partially automated with AI?"]

[textarea* unique label="7. What specific aspects of your work require your unique human expertise that AI likely couldn't replace?"]

[textarea* current-tools label="8. What software tools do you currently use most frequently in your work?"]

[textarea ai-experience label="9. Have you tried any AI tools already? If so, which ones and what was your experience?"]

[textarea challenges label="10. What challenges or frustrations have you encountered when trying new technology in your workflow?"]

<label>11. How do you prefer to learn new tools?</label>
[checkbox learning "Self-guided tutorials" "Video demonstrations" "Hands-on workshops" "One-on-one coaching"]
[text learning-other placeholder "Other (please specify)"]

[textarea* success label="12. What would success look like for you after implementing AI into your workflow?"]

[textarea concerns label="13. What concerns, if any, do you have about integrating AI into your work?"]

<label>14. How much time can you realistically dedicate to learning and implementing new AI tools each week?</label>
[radio time "Less than 1 hour" "1-3 hours" "3-5 hours" "More than 5 hours"]

[textarea specific-tools label="15. Are there any specific AI tools or applications you're particularly interested in exploring?"]

[textarea additional label="16. Is there anything else you'd like me to know that would help create your personalized AI roadmap?"]

[email* your-email label "Email Address (to receive your personalized AI roadmap)"]

[submit "Submit Questionnaire"]

<!-- Option 2: For custom HTML block in WordPress, use this code -->
<!-- Add this to a Custom HTML block or use with Elementor or other page builders -->

<!-- First, add this to your theme's style.css or in a Custom CSS area of your WordPress site -->
<style>
/* Form Styles for AI Roadmap Questionnaire */
.ai-roadmap-form {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ai-roadmap-form h2 {
    color: #166088;
    margin: 25px 0 15px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.ai-roadmap-form .form-group {
    margin-bottom: 20px;
}

.ai-roadmap-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.ai-roadmap-form input[type="text"],
.ai-roadmap-form input[type="email"],
.ai-roadmap-form input[type="number"],
.ai-roadmap-form textarea,
.ai-roadmap-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.ai-roadmap-form input[type="radio"],
.ai-roadmap-form input[type="checkbox"] {
    margin-right: 5px;
}

.ai-roadmap-form .checkbox-group,
.ai-roadmap-form .radio-group {
    margin: 8px 0;
}

.ai-roadmap-form .task-entry {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    gap: 10px;
}

.ai-roadmap-form .task-entry input[type="text"] {
    flex-grow: 1;
}

.ai-roadmap-form .task-entry input[type="number"] {
    width: 70px;
}

.ai-roadmap-form button {
    background-color: #4a6fa5;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
    margin-top: 20px;
}

.ai-roadmap-form button:hover {
    background-color: #166088;
}

.ai-roadmap-form .required {
    color: red;
}

@media (max-width: 768px) {
    .ai-roadmap-form {
        padding: 15px;
    }
    
    .ai-roadmap-form .task-entry {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
    
    .ai-roadmap-form .task-entry input[type="number"] {
        width: 100%;
    }
}
</style>

<!-- Option 3: Use with WPForms, Gravity Forms or other form builders -->
<!-- These instructions vary by plugin, but most form builders will allow you to create 
     this form using their visual interface. You can then customize the CSS as needed. -->