npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@monster_property_services/monster-contact-form

v1.2.0

Published

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

Downloads

120

Readme

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:

  1. CDN
<script type="module" src="https://unpkg.com/@monster_property_services/[email protected]"></script>
  1. npm
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": "[email protected]",
    "subject": "Test",
    "message": "Test message"
}

Working with google reCaptcha ✅🔐

You can use your own google reCaptcha implementation like this:

  1. 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>
  1. 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>
  1. The event detail object will look like this:
{
    "form": {
        "name": "sdf",
        "email": "[email protected]",
        "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