# @netsells/nuxt-contactform-me

> Nuxt integration for Contactform.me

Latest version **0.2.1** (published 2021-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @netsells/nuxt-contactform-me
pnpm add @netsells/nuxt-contactform-me
yarn add @netsells/nuxt-contactform-me
bun add @netsells/nuxt-contactform-me
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2021-03-01 |
| First published | 2020-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.8 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sam Turrell |
| Maintainers | rebeccaanderton, samturrell, sam.boylett, martin91s, spamoom, jakub.gawron |

## Links

- npm: https://www.npmjs.com/package/@netsells/nuxt-contactform-me
- Repository: https://github.com/netsells/nuxt-contactform-me
- Homepage: https://github.com/netsells/nuxt-contactform-me#readme
- Issues: https://github.com/netsells/nuxt-contactform-me/issues
- npm.io page: https://npm.io/package/@netsells/nuxt-contactform-me

## Dependencies (2)

- [qs](https://npm.io/package/qs.md) ^6.9.4
- [axios](https://npm.io/package/axios.md) ^0.19.2

## Recent versions

- 0.2.1 (latest) — 2021-03-01
- 0.2.0 — 2021-02-25
- 0.1.0 — 2020-05-22

## README

# Nuxt Contactform.me

> Nuxt integration for Contactform.me

This module provides functionality to submit your form data to the [contactform.me](contactform.me) service.

## Installation

```sh
$ yarn add @netsells/nuxt-contactform-me
```

Add the module to your nuxt config:

```js
modules: [
    // Other modules
    '@netsells/nuxt-contactform-me',
],
```

Define the module options: 

```js
contactformMe: {
    // Options (see below)
},
```

## Options

There are two options available to configure in your application:

### `form_identifier`
> The identifier of the form submitting the request
- Default: 'contact_form',
- Type: `string`

### `submit_endpoint`
> The endpoint to submit the data to
- Default: `${ process.env.APP_URL }/api/contact-form`,
- Type: `string`

You will want to change this if you're not using the adonis integration (see below) or your form api is hosted off site.

### Runtime Config

The above options can also be defined as runtime config variables, like so:

```js
module.exports = {
    publicRuntimeConfig: {
        contactformMe: {
            form_identifier: process.env.CFME_FORM_IDENTIFIER,
            submit_endpoint: `${ process.env.APP_URL }/api/contact-form`,
        },
    },
};
```

## Usage

Once the module is installed it will register a global `$cfme` object. This object has a single method `submit`. When called will return an axios promise.

This method accepts the following arguments:

`$cfme.submit(data, formIdentifer?)`

### `data`
> The data to submit to contactform.me
- Default: `undefined`
- Type: `object`
- `required`

### `formIdentifier`
> An override of the default `form_identifier` value set in your config
- Default: `contact_form`
- Type: `string`

```js
export default {
    methods: {
        async handleSubmit() {
            await this.$cfme.submit({
                email: this.formData.email,
                name: this.formData.name,
            });
            // Handle success
        },
    },
};
```

If your application has multiple forms you can provide the second `formIdentifier` argument:

```js
export default {
    methods: {
        async handleSubmit() {
            await this.$cfme.submit({
                email: this.formData.email,
                name: this.formData.name,
            }, 'application_form');
            // Handle success
        },
    },
};
```

## Submit endpoint

Due to CORS on the Contactform.me service, requests must be proxied on the server side. To there are current two ways to accomplish this.

### PHP

See the [PHP wrapper](https://github.com/netsells/contactformme-php).

### Adonis

If using adonis as your Nuxt applications backend you can use the service provider included within this package.

#### Usage

Add the module to your applications service providers in `start/app.js`:

```js
const providers = [
    // Other providers
    '@netsells/nuxt-contactform-me/adonis/providers/ContactFormMeProvider',
];
```

Ensure the provided api endpoint is in your CSRF exclusions in `config/shield.js`:

```js
module.exports = {
    csrf: {
        filterUris: [
            '/api/contact-form',
        ],
    },
};
```

Set the key for your Contactform.me form in your applications `.env` file:

```dotenv
CONTACTFORM_ME_KEY=<KEY HERE>
```

---
_Source: https://npm.io/package/@netsells/nuxt-contactform-me · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._