Build a Public Jira Portal with Request Forms on Your Website

Create a Professional Customer Support Portal:

Transform your website into a fully functional Jira ticketing system using Smart Forms. Build collapsible form sections that automatically create structured Jira issues—no customer accounts or JSM licensing required.

What You Get:

Professional, branded support portal integrated with your website
Multiple request categories with specialized intake forms
Automatic Jira issue creation with proper field mapping and routing
Zero friction for customers—submit requests without any login requirements

ScreenRecording2025-03-25at10.39.23-ezgif.com-video-to-gif-converter (1).gif

Step-by-Step Implementation

1. Create Specialized Forms for Different Request Types

Build category-specific forms in Smart Forms for Jira:

Bug Report Form:

Customer Name and Email
Product/Component (populated from Jira Components field)
Issue Description with severity level
File Attachment for screenshots
Steps to reproduce

Feature Request Form:

Requester details and business impact
Feature description and use case
Priority justification
Expected timeline

General Support Form:

Contact information and account details
Request category with conditional logic
Dynamic fields based on request type selection

2. Configure Automatic Work Item Creation

For each form, set up "Create New Work Item" with:

Target Jira project and appropriate issue type (Bug, Story, Task)
Field mapping: Name → Reporter, Email → Custom Field, Description → Description
Auto-routing based on form selections (Components, Labels, Assignee)

3. Build Your Website Portal

Create a collapsible portal structure using HTML, CSS, and JavaScript:

CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Customer Support Portal</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f5f7;
      margin: 2rem;
    }

    .section {
      background: white;
      margin-bottom: 10px;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .section-header {
      padding: 16px;
      cursor: pointer;
      font-weight: bold;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .arrow {
      transition: transform 0.3s ease;
      font-size: 14px;
      color: #777;
    }

    .arrow.rotate {
      transform: rotate(90deg);
    }

    .section-content {
      display: none;
      padding: 16px;
    }

    iframe {
      width: 100%;
      height: 700px;
      border: none;
    }
  </style>
</head>
<body>

<h2>How can we help you today?</h2>
<p>Select a category below to submit your request.</p>

<div class="section">
  <div class="section-header" onclick="toggleSection(this)">
    Report a Bug
    <span class="arrow">▶</span>
  </div>
  <div class="section-content">
    <iframe src="https://your-bug-report-form-link"></iframe>
  </div>
</div>

<div class="section">
  <div class="section-header" onclick="toggleSection(this)">
    Request a Feature
    <span class="arrow">▶</span>
  </div>
  <div class="section-content">
    <iframe src="https://your-feature-request-form-link"></iframe>
  </div>
</div>

<div class="section">
  <div class="section-header" onclick="toggleSection(this)">
    General Support
    <span class="arrow">▶</span>
  </div>
  <div class="section-content">
    <iframe src="https://your-support-form-link"></iframe>
  </div>
</div>

<script>
  function toggleSection(header) {
    const content = header.nextElementSibling;
    const arrow = header.querySelector('.arrow');

    const isOpen = content.style.display === 'block';
    content.style.display = isOpen ? 'none' : 'block';
    arrow.classList.toggle('rotate', !isOpen);
  }
</script>

</body>
</html>

4. Enhance User Experience

Brand Customization:

Match your website's fonts and colors in form appearance settings
Add company logo using embedded content elements
Include consent checkboxes for terms and privacy policies

Security and Validation:

Enable CAPTCHA for public forms to prevent spam
Set required fields to ensure complete submissions
Use field validation for email addresses and other structured data

Dynamic Feedback: Configure personalized success messages with form field values:

"Thanks, ${customer_name}! Your ${request_type} has been received. Our team will contact you at ${email_address} within 24 hours."

5. Set Up Team Notifications

Configure automatic email notifications to relevant team members when new requests arrive, ensuring quick response times and proper routing.

Example Workflow

Customer visits your website and clicks "Get Help"
Portal displays collapsible categories (Bug Reports, Feature Requests, Support)
Customer selects relevant section and fills out the embedded form
Form submission automatically creates a structured Jira work item with all details
Your team receives notification and can immediately begin working on the properly categorized request
Customer receives confirmation with next steps and timeline expectations

Benefits

No JSM Required: Works with Jira Software and Work Management
Professional Appearance: Portal integrates seamlessly with your website design
Zero User Friction: Customers submit requests without accounts or external portals
Structured Data: Every submission becomes a complete, properly categorized Jira issue
Team Efficiency: Automatic routing and field mapping eliminate manual processing
Real-time Integration: Forms use live Jira field values for consistent data entry

This approach transforms your website into a powerful customer intake system while maintaining your existing Jira workflows and providing customers with a branded, professional support experience.