SIGNS

Embed Code

Copy this HTML and paste it on any page where you want the application form to appear.
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="/forms_manager/static/src/css/forms_signs.css"/>

<div class="signs-form">
    <div class="form-container">
        <div class="header">
            <img src="/b2b_prijscalculator/static/img/signs-logo.png" alt="SIGNS Logo"/>
            <p class="partner-title">We are always looking for creative talent!</p>
            
        </div>

        <form id="applicationForm" method="POST" action="/solliciteren/submit" enctype="multipart/form-data">
            <input type="hidden" name="csrf_token" id="csrf_token"/>

            <div class="form-section">
                <h2>Personal Information</h2>
                <div class="form-grid-three">
                    <div class="form-group">
                        <label>Full name <span class="required">*</span></label>
                        <input type="text" name="name" required placeholder="John Doe"/>
                    </div>
                    <div class="form-group">
                        <label>Email address <span class="required">*</span></label>
                        <input type="email" name="email" required placeholder="john@example.com"/>
                    </div>
                    <div class="form-group">
                        <label>Phone number</label>
                        <input type="tel" name="phone" placeholder="+31 6 12345678"/>
                    </div>
                </div>
                <div class="form-grid-three">
                    <div class="form-group">
                        <label>Address</label>
                        <input type="text" name="street" placeholder="123 Main Street"/>
                    </div>
                    <div class="form-group">
                        <label>City</label>
                        <input type="text" name="city" placeholder="Amsterdam"/>
                    </div>
                    <div class="form-group">
                        <label>Country</label>
                        <select name="country_id" id="country_select">
                            <option value="">-- Select country --</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h2>Skills</h2>
                <div class="form-group">
                    <label>Select your skills</label>
                    <div class="checkbox-group" id="skills_container">
                    </div>
                </div>
                <div class="form-group">
                    <label>Years of experience</label>
                    <select name="years_experience">
                        <option value="0">No experience / starter</option>
                        <option value="1">1 year</option>
                        <option value="2">2 years</option>
                        <option value="3">3 years</option>
                        <option value="4">4 years</option>
                        <option value="5">5 years</option>
                        <option value="7">5-10 years</option>
                        <option value="10">10+ years</option>
                    </select>
                </div>
            </div>

            <div class="form-section">
                <h2>Availability</h2>
                <div class="form-grid-two">
                    <div class="form-group">
                        <label>Availability</label>
                        <input type="text" name="availability" placeholder="e.g. Full-time, 3 days per week"/>
                    </div>
                    <div class="form-group">
                        <label>Hours per week</label>
                        <select name="availability_hours">
                            <option value="0">-- Select --</option>
                            <option value="8">8 hours (1 day)</option>
                            <option value="16">16 hours (2 days)</option>
                            <option value="24">24 hours (3 days)</option>
                            <option value="32">32 hours (4 days)</option>
                            <option value="40">40 hours (full-time)</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="available_immediately"/>
                        I am available immediately
                    </label>
                </div>
            </div>

            <div class="form-section">
                <h2>Portfolio</h2>
                <div class="form-group">
                    <label>Portfolio URL</label>
                    <input type="url" name="portfolio_url" placeholder="https://yourportfolio.com"/>
                    <p class="info-text">Link to your online portfolio, Behance, Dribbble, etc.</p>
                </div>
                <div class="form-group">
                    <label>Or upload a file</label>
                    <input type="file" name="portfolio_file" accept=".pdf,.zip,.jpg,.jpeg,.png"/>
                    <p class="info-text">PDF, ZIP or image (max. 10MB)</p>
                </div>
            </div>

            <button type="submit" class="btn btn-primary submit-btn">Submit Application</button>
            <p class="text-center text-muted mt-20" style="font-size: 12px;">By submitting, you agree to our privacy policy.</p>
        </form>
    </div>
    <div class="footer">
        <p>SIGNS.NL - Creative agency for signing, print and digital</p>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get CSRF token
    fetch('/web/session/get_session_info').then(r => r.json()).then(data => {
        document.getElementById('csrf_token').value = odoo.csrf_token || '';
    });

    // Load countries
    fetch('/solliciteren/api/countries').then(r => r.json()).then(countries => {
        var select = document.getElementById('country_select');
        countries.forEach(function(c) {
            var opt = document.createElement('option');
            opt.value = c.id;
            opt.textContent = c.name;
            if (c.code === 'NL') opt.selected = true;
            select.appendChild(opt);
        });
    });

    // Load skills
    fetch('/solliciteren/api/skills').then(r => r.json()).then(skills => {
        var container = document.getElementById('skills_container');
        skills.forEach(function(s) {
            var div = document.createElement('div');
            div.className = 'checkbox-item';
            div.innerHTML = '<input type="checkbox" id="skill_' + s.id + '" name="skill_' + s.id + '" value="' + s.id + '"/>' +
                           '<label for="skill_' + s.id + '">' + s.name + '</label>';
            container.appendChild(div);
        });
    });
});
</script>
View Live Form