NoCodeAPI

Try For Free
Login

Build a Professional Job Portal Platform with NoCodeAPI Form Builder

Create a comprehensive job board and application system without complex backend development

Introduction

The job market demands efficient platforms where employers can post opportunities and job seekers can apply seamlessly. With NoCodeAPI’s Form Builder, you can create a professional job portal that connects talent with opportunities. This tutorial guides you through building a complete job board platform with job posting forms, application systems, and candidate management.

What You’ll Build

By the end of this tutorial, you’ll have:

  • A comprehensive job posting submission form for employers
  • A job application form for candidates
  • A public job listings page with search functionality
  • An employer dashboard to manage postings and applications

Prerequisites

  • A NoCodeAPI account
  • Basic HTML/CSS knowledge
  • A domain for your job portal website

Step 1: Creating Your Job Posting Form with Form Builder

The NoCodeAPI Form Builder streamlines job posting creation. Here’s how to build your employer job posting form:

Access the Form Builder

  1. Log into your NoCodeAPI dashboard
  2. Navigate to “NoCode Forms” section
  3. Click on “Form Builder”
  4. Select “Create New Form”

Design Your Job Posting Form

Use the Form Builder’s interface to create a comprehensive job posting form:

Company Information:

  • Company Name (Text Input)
  • Company Website (URL Input)
  • Company Size (Dropdown: 1-10, 11-50, 51-200, 201-500, 500+ employees)
  • Industry (Dropdown: Technology, Healthcare, Finance, Education, Retail, etc.)
  • Company Description (Textarea)
  • Company Logo URL (URL Input)

Job Details:

  • Job Title (Text Input)
  • Department (Text Input)
  • Employment Type (Dropdown: Full-time, Part-time, Contract, Internship, Remote)
  • Experience Level (Dropdown: Entry Level, Mid Level, Senior Level, Executive)
  • Location (Text Input)
  • Remote Work (Dropdown: On-site, Remote, Hybrid)
  • Salary Range (Text Input)
  • Currency (Dropdown: USD, EUR, GBP, etc.)

Job Description:

  • Job Summary (Textarea)
  • Key Responsibilities (Textarea)
  • Required Skills (Textarea)
  • Preferred Qualifications (Textarea)
  • Benefits & Perks (Textarea)
  • Application Deadline (Date Input)

Contact Information:

  • Hiring Manager Name (Text Input)
  • Contact Email (Email Input)
  • Contact Phone (Phone Input)
  • Application Instructions (Textarea)

Customize Your Form Design

The Form Builder offers professional styling:

  • Choose corporate color schemes
  • Add your company branding
  • Ensure mobile responsiveness
  • Apply professional typography

Step 2: Creating the Job Application Form

Create a separate form for job seekers to apply:

Job Application Form Fields

Personal Information:

  • Full Name (Text Input)
  • Email Address (Email Input)
  • Phone Number (Phone Input)
  • Location/City (Text Input)
  • LinkedIn Profile (URL Input)
  • Portfolio/Website (URL Input)

Professional Details:

  • Current Job Title (Text Input)
  • Years of Experience (Number Input)
  • Current Salary (Number Input)
  • Expected Salary (Number Input)
  • Notice Period (Dropdown: Immediate, 2 weeks, 1 month, 2 months, 3 months)
  • Availability Date (Date Input)

Application Specific:

  • Position Applied For (Text Input – can be pre-filled)
  • Cover Letter (Textarea)
  • Resume Upload (File Upload – if available)
  • Why are you interested in this role? (Textarea)
  • Additional Information (Textarea)

Step 3: Embedding Forms on Your Job Portal Website

Create the main job portal homepage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JobConnect Pro - Find Your Dream Career</title>
    <meta name="description" content="Connect with top employers and find your next career opportunity. Browse thousands of jobs from leading companies across all industries.">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #fafbfc;
        }
        
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 120px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
            animation: float 20s infinite linear;
        }
        
        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            100% { transform: translateY(-100px) rotate(360deg); }
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero-section h1 {
            font-size: 4em;
            margin-bottom: 20px;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .hero-section p {
            font-size: 1.4em;
            margin-bottom: 40px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }
        
        .hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .cta-button {
            display: inline-block;
            padding: 18px 40px;
            text-decoration: none;
            border-radius: 50px;
            font-size: 1.1em;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        }
        
        .primary-cta {
            background: white;
            color: #667eea;
        }
        
        .primary-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }
        
        .secondary-cta {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
        
        .secondary-cta:hover {
            background: white;
            color: #667eea;
            transform: translateY(-3px);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .features-section {
            padding: 100px 0;
            background: white;
        }
        
        .section-title {
            text-align: center;
            font-size: 3em;
            margin-bottom: 20px;
            color: #2c3e50;
            font-weight: 300;
        }
        
        .section-subtitle {
            text-align: center;
            font-size: 1.2em;
            color: #666;
            margin-bottom: 60px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            margin-top: 60px;
        }
        
        .feature-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 50px 30px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }
        
        .feature-icon {
            font-size: 4em;
            margin-bottom: 25px;
            display: block;
            color: #667eea;
        }
        
        .feature-card h3 {
            font-size: 1.8em;
            margin-bottom: 20px;
            color: #2c3e50;
        }
        
        .feature-card p {
            color: #666;
            font-size: 1.1em;
            line-height: 1.7;
        }
        
        .stats-section {
            background: #2c3e50;
            color: white;
            padding: 80px 0;
            text-align: center;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }
        
        .stat-item h3 {
            font-size: 3.5em;
            margin-bottom: 10px;
            color: #667eea;
            font-weight: 700;
        }
        
        .stat-item p {
            font-size: 1.2em;
            color: #ecf0f1;
        }
        
        .form-sections {
            padding: 100px 0;
            background: #f8f9fa;
        }
        
        .form-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 40px;
            margin-top: 60px;
        }
        
        .form-card {
            background: white;
            padding: 60px 40px;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            text-align: center;
            position: relative;
        }
        
        .form-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 20px 20px 0 0;
        }
        
        .form-card h3 {
            font-size: 2.2em;
            margin-bottom: 20px;
            color: #2c3e50;
        }
        
        .form-card p {
            font-size: 1.1em;
            color: #666;
            margin-bottom: 40px;
            line-height: 1.6;
        }
        
        .form-embed {
            margin-top: 30px;
        }
        
        @media (max-width: 768px) {
            .hero-section h1 {
                font-size: 2.5em;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .form-cards {
                grid-template-columns: 1fr;
            }
            
            .form-card {
                padding: 40px 20px;
            }
        }
    </style>
</head>
<body>
    <div class="hero-section">
        <div class="hero-content">
            <h1>💼 Find Your Dream Career</h1>
            <p>Connect with top employers and discover opportunities that match your skills and ambitions</p>
            <div class="hero-buttons">
                <a href="#browse-jobs" class="cta-button primary-cta">Browse Jobs</a>
                <a href="#post-job" class="cta-button secondary-cta">Post a Job</a>
            </div>
        </div>
    </div>

    <div class="features-section">
        <div class="container">
            <h2 class="section-title">Why Choose JobConnect Pro?</h2>
            <p class="section-subtitle">The most efficient platform connecting talented professionals with innovative companies</p>
            
            <div class="features-grid">
                <div class="feature-card">
                    <span class="feature-icon">🎯</span>
                    <h3>Smart Job Matching</h3>
                    <p>Our intelligent algorithm matches your skills and preferences with the most relevant job opportunities, saving you time and increasing your chances of success.</p>
                </div>
                <div class="feature-card">
                    <span class="feature-icon">🚀</span>
                    <h3>Fast Application Process</h3>
                    <p>Apply to multiple positions with one click. Our streamlined application system makes job hunting efficient and stress-free.</p>
                </div>
                <div class="feature-card">
                    <span class="feature-icon">🏢</span>
                    <h3>Top Companies</h3>
                    <p>Access exclusive opportunities from industry-leading companies across all sectors, from startups to Fortune 500 organizations.</p>
                </div>
                <div class="feature-card">
                    <span class="feature-icon">📈</span>
                    <h3>Career Growth</h3>
                    <p>Find positions that align with your career goals and provide opportunities for professional development and advancement.</p>
                </div>
                <div class="feature-card">
                    <span class="feature-icon">💰</span>
                    <h3>Competitive Salaries</h3>
                    <p>Discover positions with transparent salary ranges and negotiate from a position of knowledge and strength.</p>
                </div>
                <div class="feature-card">
                    <span class="feature-icon">🌍</span>
                    <h3>Remote Opportunities</h3>
                    <p>Explore flexible work arrangements including remote, hybrid, and location-independent positions worldwide.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="stats-section">
        <div class="container">
            <h2 class="section-title" style="color: white;">Platform Statistics</h2>
            <div class="stats-grid">
                <div class="stat-item">
                    <h3>50K+</h3>
                    <p>Active Job Seekers</p>
                </div>
                <div class="stat-item">
                    <h3>5K+</h3>
                    <p>Companies Hiring</p>
                </div>
                <div class="stat-item">
                    <h3>25K+</h3>
                    <p>Jobs Posted Monthly</p>
                </div>
                <div class="stat-item">
                    <h3>95%</h3>
                    <p>Success Rate</p>
                </div>
            </div>
        </div>
    </div>

    <div class="form-sections" id="post-job">
        <div class="container">
            <h2 class="section-title">Get Started Today</h2>
            <p class="section-subtitle">Whether you're hiring talent or seeking opportunities, we've got you covered</p>
            
            <div class="form-cards">
                <div class="form-card">
                    <h3>🏢 For Employers</h3>
                    <p>Post your job openings and connect with qualified candidates. Our platform helps you find the perfect fit for your team.</p>
                    
                    <div class="form-embed">
                        <!-- Job Posting Form Embed -->
                        <iframe src="https://your-job-posting-form.nocodeapi.com" 
                                width="100%" 
                                height="800" 
                                frameborder="0"
                                style="border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        </iframe>
                    </div>
                </div>
                
                <div class="form-card">
                    <h3>👨‍💼 For Job Seekers</h3>
                    <p>Create your profile and start applying to positions that match your skills and career goals. Your next opportunity awaits!</p>
                    
                    <div class="form-embed">
                        <!-- Job Application Form Embed -->
                        <iframe src="https://your-job-application-form.nocodeapi.com" 
                                width="100%" 
                                height="800" 
                                frameborder="0"
                                style="border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer style="background: #2c3e50; color: white; padding: 60px 0; text-align: center;">
        <div class="container">
            <h3 style="color: #667eea; margin-bottom: 20px; font-size: 2em;">Ready to Transform Your Career?</h3>
            <p style="font-size: 1.2em; margin-bottom: 30px;">Join thousands of professionals who found their dream jobs through our platform</p>
            <div class="hero-buttons">
                <a href="#browse-jobs" class="cta-button primary-cta">Start Job Search</a>
                <a href="#post-job" class="cta-button secondary-cta">Hire Talent</a>
            </div>
        </div>
    </footer>

    <script>
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    </script>
</body>
</html>

Step 4: Fetching and Displaying Job Listings

Create a job search and listing system:

// Fetch job postings from NoCodeAPI
async function fetchJobListings() {
    const API_URL = 'https://v1.nocodeapi.com/YOUR_USERNAME/nForms/YOUR_API_KEY';
    
    try {
        const response = await fetch(API_URL, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const jobs = await response.json();
        displayJobListings(jobs);
        updateJobStats(jobs);
    } catch (error) {
        console.error('Error fetching job listings:', error);
        showErrorMessage();
    }
}

// Display job listings in a professional grid
function displayJobListings(jobs) {
    const container = document.getElementById('job-listings-grid');
    container.innerHTML = '';
    
    if (jobs.length === 0) {
        container.innerHTML = `
            <div class="no-jobs">
                <h3>No jobs found</h3>
                <p>Try adjusting your search criteria or check back for new opportunities.</p>
            </div>
        `;
        return;
    }
    
    jobs.forEach(job => {
        const jobCard = createJobCard(job);
        container.appendChild(jobCard);
    });
}

// Create individual job listing cards
function createJobCard(job) {
    const card = document.createElement('div');
    card.className = 'job-card';
    
    // Extract job data from form fields
    const jobData = {};
    job.fields.forEach(field => {
        jobData[field.field] = field.value;
    });
    
    // Format salary display
    const salaryDisplay = jobData.salary_range ? 
        `💰 ${jobData.salary_range} ${jobData.currency || 'USD'}` : 
        '💰 Competitive Salary';
    
    // Calculate days since posting (mock data - you'd use actual timestamp)
    const daysAgo = Math.floor(Math.random() * 7) + 1;
    
    // Determine employment type badge color
    const typeColors = {
        'Full-time': 'type-fulltime',
        'Part-time': 'type-parttime',
        'Contract': 'type-contract',
        'Internship': 'type-internship',
        'Remote': 'type-remote'
    };
    
    const typeClass = typeColors[jobData.employment_type] || 'type-default';
    
    card.innerHTML = `
        <div class="job-card-header">
            <div class="company-logo">
                ${jobData.company_logo_url ? 
                    `<img src="${jobData.company_logo_url}" alt="${jobData.company_name} logo">` :
                    `<div class="logo-placeholder">🏢</div>`
                }
            </div>
            <div class="job-meta">
                <div class="employment-type ${typeClass}">${jobData.employment_type || 'Full-time'}</div>
                <div class="posted-date">${daysAgo} days ago</div>
            </div>
        </div>
        
        <div class="job-content">
            <h3 class="job-title">${jobData.job_title || 'Software Engineer'}</h3>
            <div class="company-name">${jobData.company_name || 'Tech Company'}</div>
            <div class="job-location">📍 ${jobData.location || 'Remote'} ${jobData.remote_work ? `• ${jobData.remote_work}` : ''}</div>
            
            <div class="job-details">
                <div class="detail-item">
                    <span class="detail-label">Experience:</span>
                    <span class="detail-value">${jobData.experience_level || 'Mid Level'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Department:</span>
                    <span class="detail-value">${jobData.department || 'Engineering'}</span>
                </div>
                <div class="detail-item salary-detail">
                    ${salaryDisplay}
                </div>
            </div>
            
            <div class="job-summary">
                <p>${jobData.job_summary ? jobData.job_summary.substring(0, 150) + '...' : 'Exciting opportunity to join our growing team and make a significant impact.'}</p>
            </div>
            
            <div class="job-skills">
                ${jobData.required_skills ? 
                    jobData.required_skills.split(',').slice(0, 4).map(skill => 
                        `<span class="skill-tag">${skill.trim()}</span>`
                    ).join('') : 
                    '<span class="skill-tag">JavaScript</span><span class="skill-tag">React</span><span class="skill-tag">Node.js</span>'
                }
            </div>
        </div>
        
        <div class="job-actions">
            <button class="apply-btn" onclick="applyToJob('${job.id}', '${jobData.job_title}', '${jobData.company_name}')">
                Apply Now
            </button>
            <button class="save-btn" onclick="saveJob('${job.id}')">
                💖 Save
            </button>
            <button class="share-btn" onclick="shareJob('${job.id}', '${jobData.job_title}')">
                📤 Share
            </button>
        </div>
        
        ${jobData.application_deadline ? `
            <div class="application-deadline">
                ⏰ Application deadline: ${new Date(jobData.application_deadline).toLocaleDateString()}
            </div>
        ` : ''}
    `;
    
    return card;
}

// Job interaction functions
function applyToJob(jobId, jobTitle, companyName) {
    // In a real application, this would open the application form
    // Pre-populated with job details
    const applicationUrl = `#job-application?job=${jobId}&title=${encodeURIComponent(jobTitle)}&company=${encodeURIComponent(companyName)}`;
    window.location.href = applicationUrl;
    
    // You could also open a modal with the application form
    showApplicationModal(jobId, jobTitle, companyName);
}

function saveJob(jobId) {
    // Save job to user's favorites (would use localStorage or user account)
    const savedJobs = JSON.parse(localStorage.getItem('savedJobs') || '[]');
    if (!savedJobs.includes(jobId)) {
        savedJobs.push(jobId);
        localStorage.setItem('savedJobs', JSON.stringify(savedJobs));
        showNotification('Job saved to your favorites!');
    } else {
        showNotification('Job already in your favorites.');
    }
}

function shareJob(jobId, jobTitle) {
    const shareUrl = `${window.location.origin}/#job/${jobId}`;
    const shareText = `Check out this job opportunity: ${jobTitle}`;
    
    if (navigator.share) {
        navigator.share({
            title: jobTitle,
            text: shareText,
            url: shareUrl
        });
    } else {
        // Fallback to copy link
        navigator.clipboard.writeText(shareUrl).then(() => {
            showNotification('Job link copied to clipboard!');
        });
    }
}

function showApplicationModal(jobId, jobTitle, companyName) {
    // Create and show application modal
    const modal = document.createElement('div');
    modal.className = 'application-modal';
    modal.innerHTML = `
        <div class="modal-content">
            <div class="modal-header">
                <h3>Apply for: ${jobTitle}</h3>
                <span class="close-modal" onclick="closeApplicationModal()">&times;</span>
            </div>
            <div class="modal-body">
                <p>Company: <strong>${companyName}</strong></p>
                <p>Complete the application form below:</p>
                <iframe src="https://your-job-application-form.nocodeapi.com?job=${jobId}" 
                        width="100%" 
                        height="600" 
                        frameborder="0">
                </iframe>
            </div>
        </div>
    `;
    
    document.body.appendChild(modal);
    modal.style.display = 'flex';
}

function closeApplicationModal() {
    const modal = document.querySelector('.application-modal');
    if (modal) {
        modal.remove();
    }
}

function showNotification(message) {
    const notification = document.createElement('div');
    notification.className = 'notification';
    notification.textContent = message;
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.add('show');
    }, 100);
    
    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// Advanced job filtering
function applyJobFilters() {
    const keyword = document.getElementById('keyword-filter').value.toLowerCase();
    const location = document.getElementById('location-filter').value.toLowerCase();
    const employmentType = document.getElementById('employment-filter').value;
    const experienceLevel = document.getElementById('experience-filter').value;
    const salaryMin = document.getElementById('salary-min-filter').value;
    
    fetchFilteredJobs(keyword, location, employmentType, experienceLevel, salaryMin);
}

async function fetchFilteredJobs(keyword, location, employmentType, experienceLevel, salaryMin) {
    const API_URL = 'https://v1.nocodeapi.com/YOUR_USERNAME/nForms/YOUR_API_KEY';
    
    try {
        const response = await fetch(API_URL, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        let jobs = await response.json();
        
        // Apply client-side filtering
        jobs = jobs.filter(job => {
            const jobData = {};
            job.fields.forEach(field => {
                jobData[field.field] = field.value;
            });
            
            // Keyword filter (job title, company name, skills)
            if (keyword && keyword.trim() !== '') {
                const searchText = `${jobData.job_title} ${jobData.company_name} ${jobData.required_skills}`.toLowerCase();
                if (!searchText.includes(keyword)) return false;
            }
            
            // Location filter
            if (location && location.trim() !== '') {
                const jobLocation = jobData.location ? jobData.location.toLowerCase() : '';
                if (!jobLocation.includes(location)) return false;
            }
            
            // Employment type filter
            if (employmentType && jobData.employment_type !== employmentType) return false;
            
            // Experience level filter
            if (experienceLevel && jobData.experience_level !== experienceLevel) return false;
            
            // Salary filter (basic implementation)
            if (salaryMin && jobData.salary_range) {
                const salaryNumber = parseInt(jobData.salary_range.replace(/[^0-9]/g, ''));
                if (salaryNumber < parseInt(salaryMin)) return false;
            }
            
            return true;
        });
        
        displayJobListings(jobs);
        updateResultsCount(jobs.length);
    } catch (error) {
        console.error('Error fetching filtered jobs:', error);
        showErrorMessage();
    }
}

function updateResultsCount(count) {
    const resultsElement = document.getElementById('results-count');
    if (resultsElement) {
        resultsElement.textContent = `${count} jobs found`;
    }
}

function updateJobStats(jobs) {
    document.getElementById('total-jobs').textContent = jobs.length;
    
    // Calculate unique companies
    const companies = new Set();
    jobs.forEach(job => {
        const jobData = {};
        job.fields.forEach(field => {
            jobData[field.field] = field.value;
        });
        if (jobData.company_name) {
            companies.add(jobData.company_name);
        }
    });
    
    document.getElementById('total-companies').textContent = companies.size;
    
    // Calculate remote jobs percentage
    const remoteJobs = jobs.filter(job => {
        const jobData = {};
        job.fields.forEach(field => {
            jobData[field.field] = field.value;
        });
        return jobData.remote_work === 'Remote' || jobData.location?.toLowerCase().includes('remote');
    });
    
    const remotePercentage = jobs.length > 0 ? Math.round((remoteJobs.length / jobs.length) * 100) : 0;
    document.getElementById('remote-percentage').textContent = `${remotePercentage}%`;
}

function clearFilters() {
    document.getElementById('keyword-filter').value = '';
    document.getElementById('location-filter').value = '';
    document.getElementById('employment-filter').value = '';
    document.getElementById('experience-filter').value = '';
    document.getElementById('salary-min-filter').value = '';
    fetchJobListings();
}

function showErrorMessage() {
    const container = document.getElementById('job-listings-grid');
    container.innerHTML = `
        <div class="error-message">
            <h3>Unable to load job listings</h3>
            <p>Please try again later or contact support.</p>
            <button onclick="fetchJobListings()" class="retry-btn">Try Again</button>
        </div>
    `;
}

// CSS Styles for job listings
const jobListingStyles = `
<style>
.job-portal-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    background: #fafbfc;
    min-height: 100vh;
}

.search-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 40px;
    border-radius: 20px;
    margin-bottom: 40px;
    text-align: center;
}

.search-header h1 {
    font-size: 3em;
    margin-bottom: 20px;
    font-weight: 700;
}

.search-header p {
    font-size: 1.3em;
    margin-bottom: 40px;
    opacity: 0.9;
}

.job-search-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 15px;
    align-items: end;
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.search-input-group {
    display: flex;
    flex-direction: column;
}

.search-input-group label {
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.search-input-group input,
.search-input-group select {
    padding: 15px;
    border: 2px solid #e1e8ed;
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.search-input-group input:focus,
.search-input-group select:focus {
    outline: none;
    border-color: #667eea;
}

.search-btn {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    height: fit-content;
}

.search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.filter-actions {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    justify-content: space-between;
    align-items: center;
}

.filter-toggle {
    background: white;
    border: 2px solid #e1e8ed;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-toggle:hover {
    border-color: #667eea;
    color: #667eea;
}

.results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 20px;
    padding: 0 5px;
}

.results-count {
    font-size: 1.2em;
    color: #666;
    font-weight: 600;
}

.sort-options {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sort-dropdown {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    cursor: pointer;
}

.job-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.job-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #f0f0f0;
}

.job-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
    border-color: #667eea;
}

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 25px 25px 0;
}

.company-logo {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-placeholder {
    font-size: 2em;
    color: #666;
}

.job-meta {
    text-align: right;
}

.employment-type {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
}

.type-fulltime {
    background: #e3f2fd;
    color: #1976d2;
}

.type-parttime {
    background: #f3e5f5;
    color: #7b1fa2;
}

.type-contract {
    background: #fff3e0;
    color: #f57c00;
}

.type-internship {
    background: #e8f5e8;
    color: #388e3c;
}

.type-remote {
    background: #fce4ec;
    color: #c2185b;
}

.type-default {
    background: #f5f5f5;
    color: #666;
}

.posted-date {
    color: #666;
    font-size: 0.9em;
}

.job-content {
    padding: 0 25px 25px;
}

.job-title {
    font-size: 1.5em;
    font-weight: 700;
    margin: 15px 0 8px;
    color: #2c3e50;
    line-height: 1.3;
}

.company-name {
    font-size: 1.1em;
    color: #667eea;
    font-weight: 600;
    margin-bottom: 8px;
}

.job-location {
    color: #666;
    margin-bottom: 20px;
    font-size: 0.95em;
}

.job-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 0.85em;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    color: #333;
    font-weight: 600;
}

.salary-detail {
    grid-column: 1 / -1;
    color: #27ae60;
    font-weight: 700;
    font-size: 1.1em;
    text-align: center;
    padding: 10px;
    background: #e8f5e8;
    border-radius: 8px;
}

.job-summary {
    margin-bottom: 20px;
}

.job-summary p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.job-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.skill-tag {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
}

.job-actions {
    display: flex;
    gap: 10px;
    padding: 0 25px 25px;
}

.apply-btn {
    flex: 2;
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.save-btn, .share-btn {
    flex: 1;
    background: white;
    border: 2px solid #e1e8ed;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
}

.save-btn:hover, .share-btn:hover {
    border-color: #667eea;
    color: #667eea;
    background: #f8f9fa;
}

.application-deadline {
    background: #fff3cd;
    color: #856404;
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid #ffeaa7;
}

.application-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 0;
    border-radius: 20px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
}

.modal-header {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.5em;
}

.close-modal {
    font-size: 2em;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.3s ease;
}

.close-modal:hover {
    transform: scale(1.1);
}

.modal-body {
    padding: 25px;
    max-height: calc(90vh - 120px);
    overflow-y: auto;
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1001;
}

.notification.show {
    transform: translateX(0);
}

.no-jobs, .error-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
}

.retry-btn {
    margin-top: 20px;
    padding: 12px 30px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .job-search-form {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .job-listings-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-actions {
        flex-direction: column;
        gap: 15px;
    }
    
    .results-info {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .job-card {
        margin: 0 10px;
    }
    
    .job-actions {
        flex-direction: column;
    }
    
    .apply-btn, .save-btn, .share-btn {
        flex: none;
    }
    
    .job-details {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        margin: 20px;
    }
}
</style>
`;

Complete Job Search Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browse Jobs - JobConnect Pro</title>
    <meta name="description" content="Search and browse thousands of job opportunities from top companies. Find your perfect career match with advanced filtering and instant applications.">
    ${jobListingStyles}
</head>
<body>
    <div class="job-portal-container">
        <div class="search-header">
            <h1>🔍 Find Your Perfect Job</h1>
            <p>Discover opportunities from leading companies worldwide</p>
            
            <form class="job-search-form" onsubmit="event.preventDefault(); applyJobFilters();">
                <div class="search-input-group">
                    <label>Job Title or Keywords</label>
                    <input type="text" id="keyword-filter" placeholder="e.g. Software Engineer, Marketing Manager">
                </div>
                <div class="search-input-group">
                    <label>Location</label>
                    <input type="text" id="location-filter" placeholder="e.g. New York, Remote">
                </div>
                <div class="search-input-group">
                    <label>Employment Type</label>
                    <select id="employment-filter">
                        <option value="">All Types</option>
                        <option value="Full-time">Full-time</option>
                        <option value="Part-time">Part-time</option>
                        <option value="Contract">Contract</option>
                        <option value="Internship">Internship</option>
                        <option value="Remote">Remote</option>
                    </select>
                </div>
                <div class="search-input-group">
                    <label>Experience Level</label>
                    <select id="experience-filter">
                        <option value="">All Levels</option>
                        <option value="Entry Level">Entry Level</option>
                        <option value="Mid Level">Mid Level</option>
                        <option value="Senior Level">Senior Level</option>
                        <option value="Executive">Executive</option>
                    </select>
                </div>
                <button type="submit" class="search-btn">🔍 Search</button>
            </form>
        </div>

        <div class="filter-actions">
            <div>
                <button class="filter-toggle" onclick="toggleAdvancedFilters()">
                    ⚙️ Advanced Filters
                </button>
                <button class="filter-toggle" onclick="clearFilters()">
                    🗑️ Clear All
                </button>
            </div>
            
            <div class="job-stats">
                <span>📊 <span id="total-jobs">0</span> jobs</span>
                <span>🏢 <span id="total-companies">0</span> companies</span>
                <span>🌍 <span id="remote-percentage">0%</span> remote</span>
            </div>
        </div>

        <div class="results-info">
            <div id="results-count" class="results-count">Loading jobs...</div>
            <div class="sort-options">
                <label>Sort by:</label>
                <select class="sort-dropdown" onchange="sortJobs(this.value)">
                    <option value="newest">Newest First</option>
                    <option value="oldest">Oldest First</option>
                    <option value="salary-high">Salary: High to Low</option>
                    <option value="salary-low">Salary: Low to High</option>
                    <option value="company">Company A-Z</option>
                </select>
            </div>
        </div>

        <div id="job-listings-grid" class="job-listings-grid">
            <!-- Job listings will be populated here -->
        </div>
    </div>

    <script>
        // Load job listings when page loads
        document.addEventListener('DOMContentLoaded', function() {
            fetchJobListings();
        });

        function toggleAdvancedFilters() {
            // Implementation for showing/hiding advanced filter options
            alert('Advanced filters feature coming soon!');
        }

        function sortJobs(sortBy) {
            // Implementation would sort the current job listings
            console.log('Sorting by:', sortBy);
            // You would re-fetch or re-sort the current job listings
        }

        // All previous JavaScript functions go here
        // (fetchJobListings, displayJobListings, createJobCard, etc.)
    </script>
</body>
</html>

Benefits of Using NoCodeAPI Form Builder for Job Portals

For Job Seekers

  • Streamlined Applications: Quick and easy application process
  • Mobile Optimized: Apply from any device, anywhere
  • Smart Matching: Connect with relevant opportunities
  • Professional Profiles: Create compelling candidate profiles
  • Real-time Updates: Get instant notifications about applications

For Employers

  • Easy Job Posting: Intuitive form creation for job listings
  • Candidate Management: Organize and review applications efficiently
  • Cost-Effective: No expensive HR software subscriptions
  • Branded Experience: Customize forms to match company identity
  • Analytics Dashboard: Track job posting performance

Platform Benefits

  • No Coding Required: Build sophisticated job portals without development
  • Instant Setup: Launch your job board in hours, not months
  • Scalable Architecture: Handle thousands of jobs and applications
  • Secure Data Handling: Enterprise-grade security for sensitive information
  • Integration Ready: Connect with existing HR systems and tools

SEO Optimization for Job Portals

Technical SEO

  1. Schema Markup: Implement JobPosting structured data
  2. Mobile-First Design: Ensure perfect mobile experience
  3. Page Speed: Optimize for fast loading times
  4. URL Structure: Create SEO-friendly job listing URLs

Content Strategy

  1. Job Descriptions: Optimize for relevant keywords
  2. Company Profiles: Create detailed employer pages
  3. Industry Pages: Build category-specific landing pages
  4. Career Advice: Publish helpful job search content

Local SEO

  1. Location Pages: Create city and region-specific pages
  2. Local Keywords: Target location-based job searches
  3. Google for Jobs: Optimize for Google’s job search features

Conclusion

You’ve successfully created a comprehensive job portal platform using NoCodeAPI’s Form Builder. Your platform now includes:

  • Professional job posting forms for employers
  • Streamlined application system for job seekers
  • Advanced search and filtering capabilities
  • Responsive design for all devices
  • Management tools for both employers and candidates

This job portal system demonstrates how NoCodeAPI’s Form Builder can power sophisticated recruitment platforms without complex backend development. The same principles can be applied to freelance marketplaces, staffing agencies, or any talent-matching platform.

Ready to revolutionize recruitment? Get started with NoCodeAPI.com and build your job portal empire today!

This tutorial showcases the power of NoCodeAPI’s Form Builder for creating professional job portal applications. Customize these concepts for specialized recruitment, freelance platforms, or talent marketplaces.

View all tutorials

More tutorials

Form Builder Is Live! Try it out now! 

NoCodeAPI's MCP Server is Live! Try out the demo at demo.nocodeapi.com