@monster_property_services/monster-job-form

Monster Contact form 📝

This web component is a default form for receiving job applications. The form logic must be handled by the user of the web component.

Installation 📦️

You can start using this component right away like this:

1. CDN

<script type="module" src="https://unpkg.com/@monster_property_services/monster-job-form@1.0.1/dist/index.js"></script>

1. npm

npm i monster-job-form

Usage 🎉

The job form doesn't have dynamic inputs just yet. However, it has the basic standard job applications inputs.

<monster-job-form></monster-job-form>

Handling form submission 🛂

You can handle the data submitted with the event name form-submit

<monster-job-form></monster-job-form>
<script>
    const formElement = document.querySelector('monster-job-form');

    formElement.addEventListener('form-submit', (event) => {
        console.log(event.detail); // Your form data
        // Your api implementation goes here
    });
</script>

If the form is been correctly submitted you should get an object like this

{
    "firstName": "Jhon",
    "email": "[e-mail]",
    "address": "312 Skeep road",
    "province": "Ontario",
    "lastName": "Doe",
    "phone": "444-115-5522",
    "city": "Toronto",
    "postalCode": "M3S SS6",
    "pastExperience": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus sunt voluptatem ut odit exercitationem eaque ducimus repellat. Quod, facere sequi quae, voluptatibus nobis architecto repellat est quam placeat eos voluptates!",
    "greatFit": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus sunt voluptatem ut odit exercitationem eaque ducimus repellat. Quod, facere sequi quae, voluptatibus nobis architecto repellat est quam placeat eos voluptates!",
    "position": "Senior Team Leader/Plow Operator",
    "driversLicense": "Ontario G",
    "ageOver25": "Yes",
    "experience": "None",
    "tickets": "None",
    "source": "Word of Mouth",
    "cv": {}
}

Preview 📸

There's an example of this in here https://codepen.io/Andres2D/pen/mdYRWaK