Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@monster_property_services/monster-contact-form

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@monster_property_services/monster-contact-form

This web component is a default form for contacting a business. The contact logic should be handled by the user.

1.2.0
latest
Source
npm

Version published: 4 months ago

Weekly downloads: 22; decreased by-21.43%

Maintainers: 0

Weekly downloads

Created: 6 months ago

Source

Monster Contact form 📝

This web component is a default form for contacting a business. The contact logic must be handled by the user.

Installation 📦️

You can start using this component right away like this:

<script type="module" src="https://unpkg.com/@monster_property_services/monster-contact-form@1.0.8"></script>

npm i @monster_property_services/monster-contact-form

Usage 📦️

The contact form have a required input called successfulSubmit in which the user can control the state of the form. like this:

sending: 'the user is filling out the form'
success: 'the form was sent successfully'
fail: 'the form submission failed'

By default (initially) you have to set the successfulSubmit to sending.

<monster-contact-form successfulSubmit="sending"></monster-contact-form>

Handling form submission 🛂

You can handle the data submitted with the event name form-submit and then set the submit property like this.

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

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

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

{
    "name": "John Doe",
    "email": "john.doe@mail.com",
    "subject": "Test",
    "message": "Test message"
}

Working with google reCaptcha ✅🔐

You can use your own google reCaptcha implementation like this:

In the selector we need to send the attribute hasCaptcha with a true string value. Moreover, you'll have to render the captcha element as a child of monster-contact-form.

<monster-contact-form hasCaptcha="true">
    <div id="html_element" style="margin: 0 auto"></div>
</monster-contact-form>

Then the form won't let the user trigger the submit event until the captcha is valid. You'll be responsible of handling the reCaptcha logic to validate the user response. Like this:

<script>
    var onloadCallback = function() {
        grecaptcha.render('html_element', {
            'sitekey' : 'your-site-key',
        });
    };
    const formElement = document.querySelector('monster-contact-form');

    formElement.addEventListener('form-submit', (event) => {
        console.log(event.detail);
    });
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

The event detail object will look like this:

{
    "form": {
        "name": "sdf",
        "email": "sdf@sdf.sdf",
        "subject": "sdf",
        "message": "dsf"
    },
    "captcha": 'your-recaptcha-token-response or null in case there is no recaptcha'
}

Full implementation example 🚀

Here an example of a full implementation with captcha and feedback control:

<body style="font-family: Oswald;">
    <monster-contact-form successfulSubmit="sending" hasCaptcha="true">
        <div id="html_element" style="margin: 0 auto"></div>
    </monster-contact-form> 
</body>
<script>
    var onloadCallback = function() {
        grecaptcha.render('html_element', {
            'sitekey' : 'your_captcha_key',
        });
    };

    const formElement = document.querySelector('monster-contact-form');

    formElement.addEventListener('form-submit', (event) => {
        grecaptcha.reset();
        const {name, email, message} = event.detail;
        fetch("your_api_url", {
            method: 'POST',
            body: {
                FullName: name,
                Email: email,
                Message: message
            },
            headers: {
                'Authorization': `Bearer your_api_token`,
                'Content-Type': 'application/json'
            }
        })
        .then((response) => {
            const objectResponse = response.json();
            if(!response.ok) {
                throw new Error('Request failed');
            }
            formElement.setAttribute('successfulSubmit', 'success');
        })
        .catch(error => {
            formElement.setAttribute('successfulSubmit', 'fail');
        });
    });

</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Preview 📸

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

Keywords

FAQs

What is @monster_property_services/monster-contact-form?

Is @monster_property_services/monster-contact-form popular?

Is @monster_property_services/monster-contact-form well maintained?

Package last updated on 18 Jul 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install