How to Build a Public Jira Portal with Request Forms on Your Website ( Code snippets insideđ)
If youâve ever wished your customers or internal teams could submit Jira tickets without accessing Jira itself â youâre not alone. Many organizations struggle to create a smooth, branded way for users to raise requests directly from their website. Jira Service Management offers a portal, but what if youâre using Jira Software or Work Management?
Thatâs where Smart Forms for Jira comes in. With its ability to embed forms, map fields to issues, and even auto-create Jira tickets, you can design a fully functional, user-friendly request systemâwithout needing Jira access. Even better? You can host it right on your website, styled to match your brand.
In this guide, weâll walk you through how to:
- Build a custom form submission portal using HTML
- Organize forms into collapsible sections (just like JSM portals)
- Embed forms with prefilled values
- Automatically create Jira issues with mapped fields
- Send dynamic post-submit messages and email confirmations
Letâs create a seamless experience for your usersâwithout the overhead.
đŻ Why Use Smart Forms for Web-Based Jira Ticketing?
Smart Forms eliminates the need for complex setups or expensive third-party portals. You can:
- Create forms that anyone can accessâno Jira account required
- Automatically create issues in Jira or update existing ones
- Keep your portal branded and simple with full control over form styling
- Pull real Jira field options (e.g., Components, Priorities) into dropdowns
- Show a custom success message and send email alerts after submission
â Step-by-Step: Build Your Website-Based Jira Ticketing System
1. Create a Form for Ticket Submissions
- Go to the Form Builder
- Add fields like:
- Name
- Product (Dropdown can be populated from Jira field)
- Issue Description
- File Attachment (for screenshots)
Use the "Populate options from Jira fields" setting to make your form dynamic. For example, load your Jira Components into a dropdown so users select from real-time values.
2. Set the Form to Create a Jira Issue Automatically
In the form settings:
- Enable Create New Issue
- Select the Jira project and issue type (e.g., Task, Bug)
- Map form fields to Jira issue fields (summary, description, assignee, etc.)
This ensures that every submitted form instantly becomes a new issue with structured data.
3. Make the Form Public via External Link or Embed
You can share the form externally in two ways:
- Copy the public link and send via email or messenger
- Embed the form on your website (like shown in the example email thread image)
To embed:
<iframe src="https://yourcompany.smartjiraforms.com/form/abc123" width="100%" height="700px" style="border:none;"></iframe>
â
Anyone can submitâno Jira login required.
4. Adjust the Form Appearance to Match Your Site
In Form Settings:
- Change fonts and colors to match your site branding
- Add logos with embed element
- Use Consent checkbox or help text for legal disclaimers
5. Show a Personalized Success Message After Submission
After form submission, show a thank-you message with dynamic content:
âThanks, *Name element key*, your request has been received! Our team will contact you at *Email element key* shortly.â
Use Smart Formsâ Submission message customization to insert smart tags for form field values.
6. Send Email Notifications Automatically
In the Email Notifications settings:
- Notify Jira team members, agents, or distribution lists
đ Example Use Case: Product Support Portal
Imagine you run a product site like the one in the image. Users click âContact Supportâ, fill out a Smart Form embedded on the site, and a Jira issue is created immediately with all the form fields inside issue.
Your support team is notified, and the user receives a confirmation emailâall without logging in or navigating the Jira portal.
â HTML Example: Collapsible Form Sections with Embedded Smart Forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smart Forms Help Center</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: 1000px;
border: none;
}
</style>
</head>
<body>
<h2>Service Management</h2>
<p>Welcome! Select a category to submit your request.</p>
<div class="section">
<div class="section-header" onclick="toggleSection(this)">
Common Problems
<span class="arrow">▶</span> <!-- ⶠ-->
</div>
<div class="section-content">
<iframe src="https://yourformlink.com/form1></iframe>
</div>
</div>
<div class="section">
<div class="section-header" onclick="toggleSection(this)">
Requests
<span class="arrow">▶</span>
</div>
<div class="section-content">
<iframe src="https://yourformlink.com/form1></iframe>
</div>
</div>
<div class="section">
<div class="section-header" onclick="toggleSection(this)">
Feedback collection
<span class="arrow">▶</span>
</div>
<div class="section-content">
<iframe src="https://yourformlink.com/form1"></iframe>
</div>
</div>
<div class="section">
<div class="section-header" onclick="toggleSection(this)">
Servers and Infrastructure
<span class="arrow">▶</span>
</div>
<div class="section-content">
<iframe src="https://yourformlink.com/form1"></iframe>
</div>
</div>
<script>
function toggleSection(header) {
const content = header.nextElementSibling;
const arrow = header.querySelector('.arrow');
// Toggle section content
const isOpen = content.style.display === 'block';
content.style.display = isOpen ? 'none' : 'block';
// Rotate arrow
arrow.classList.toggle('rotate', !isOpen);
}
</script>
</body>
</html>
đ What This Does
- Shows a right-aligned arrow
â¶by default - Rotates it to
âŒ(visually) when the section is open - Shows selected Smart Form when open
đŹ Ready to Build It?
Start by creating your form in Smart Forms for Jira and embedding it on your website. Youâll give your users a seamless experienceâand your team a structured ticketing workflow inside Jira.
Was this helpful?
Thanks!
Olha Yevdokymova_SaaSJet
About this author
Product Marketing Manager
SaaSJet
Ukraine
11 accepted answers
0 comments