@whppt/form-builder

Whppt form builder modules for use with the nuxt framework, @whppt/nuxt and @whppt/api-express

📖 Release Notes

Table of Contents

• Features
• Installation
• Usage
• Options
• License

Features

• Simple Form creation and integration with core Whppt modules to easily build forms and send them via select services.
• Options for Build and Runtime configuration of the site key.

Installation

1. Add @whppt/form-builder dependency to your project

yarn add @whppt/form-builder # or npm install @whppt/form-builder

2. Add @whppt/form-builder to the modules section of nuxt.config.js

// ~/nuxt.config.js
{
  modules: [
    // Simple usage
    '@whppt/form-builder',

    // With options
    [
      '@whppt/form-builder',
      {
        // ... see options below: Setting up Google recaptcha
      },
    ],
  ];
}

3. Make a few updates to your ~/nuxt.config.js file.

// ~/nuxt.config.js
export default {
  build: {
    transpile: ['@whppt/form-builder'],
  },
};

4. Including the css (optional)

Out of the box we supply some standard styling which can be added to a nuxt project like so.

// ~/nuxt.config.js
export default {
  css: [
    '@whppt/form-builder/lib/styles/styles.css',
    // any other styles you need go here 
    // if you want to override the default styles, you can include your own css file here
  ]
}

Usage

Adding in the API module

~/server/index.js

const express = require('express');
const Whppt = require('@whppt/api-express');

/* Import/require the api module from @whppt/form-builder */
const forms = require('@whppt/form-builder/lib/api');

/* Add the module to the options that will be passed to @whppt/api-express */
const options = {
  modules: {
    forms,
  },
};

const app = express();

Whppt(options).then(whppt => app.use(whppt));

module.exports = app;

Registering the component with @whppt/nuxt

Inside any whppt plugin that you wish to use the form-builder component on add the following

/* Import/require the Form definition from @whppt/form-builder, this is a whppt component */
import { Form } from '@whppt/form-builder/lib/components';

export default {
  name: 'MyPlugin',
  pageType: {
    name: 'my-plugin',
    label: 'My Plugin',
    collection: { name: 'my-plugin-collection' },
    components: {
      /* Register the Form definition to this plugin, this will now show up as a usable component on the template */
      Form,
    },
  },
};

Setting up Google recaptcha - Build time config (Optional)

This module leverages vue-recaptcha for fast setup and working Google Recaptcha. Don't forget to star their repo on github as well!

1. Add in the siteKey option where you register the module (see options for more info)

{
  modules: {
    ['@whppt/form-builder', { recaptcha_sitekey: 'my-google-site-key' }];
  }
}

2. Add in the env variable RECAPTCHA_SECRET (see options for more info)

RECAPTCHA_SECRET=MySuperSecretRecaptchaSecretForMyEyesOnly

Setting up Google recaptcha - Run time config (Optional)

This module leverages vue-recaptcha for fast setup and working Google Recaptcha. Don't forget to star their repo on github as well!

1. Add in the siteKey option to public runtime config in nuxt.config.js

export default {
  publicRuntimeConfig: {
    recaptcha_sitekey: '<your public sitekey>',
  },
};

2. Add in the env variable RECAPTCHA_SECRET (see options for more info)

RECAPTCHA_SECRET=MySuperSecretRecaptchaSecretForMyEyesOnly

Options

Module Options

Option	default	Required	type	Description
recaptcha_sitekey	undefined	false	string	Google reCAPTCHA V2 sitekey, can be found/generated here. This is required to use the recaptcha field.

Env Variables

Option	default	Required	Description
RECAPTCHA_SECRET	undefined	false	Google reCAPTCHA V2 secret key, can be found/generated here. This is required to use the recaptcha field.

License

MIT License

Copyright (c) lucas [e-mail]