Skip to content
Serverless form submission via AWS Lambda to Slack channel
HTML
Branch: master
Clone or download
Pull request Compare This branch is 2 commits ahead of yeahsmaggy:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
feedback.html
feedbackapi.yaml

README.md

Serverless form submission via AWS Lambda to Slack channel

Preparations

Before deploying serverless backend for a web from you need

  1. Google reCAPTCHA
    Register yoursite for Google reCAPTCHA and get your site key and secret key.

  2. Slack webhook for posting the form to a Slack channel
    Register Slack workspace and create an incoming webhook for posting to a channel

  3. (optional) Route53 zone for a custom name for the backend

  4. (optional) ACM certificate at us-west-1 to match your custom name

If you don't want to have custom name, leave both 3 & 4 empty and you will get standard name https://RANDOM_STRING.execute-api.AWS_REGION.amazonaws.com/API_STAGE

Setup

Once you have all above preparations done

  1. Build Cloudformation stack with feedbackapi.yaml -template
    Template will take 5 parameters
  • APIStage is just a name for your API stage. You can leave it as default "prod" or call it whatever you want.
  • ReCaptchaSecret is the SECRET key you got when registered your site to Google reCAPTCHA.
  • Webhook is URL of webhook for posting to Slack channel.
  • CustomDomain is optional parameter. If you have Route53 domain you can register a custom name for the API Gateway backend. Full name of your API will be STACKNAME.CustomDomain, e.g. feedback.example.com
  • CustomCert is optional parameter. If you supplied CustomDomain this must be an ARN of matching ACM certificate at us-east-1 -region. Stack itself can be built into any region you choose.

    Once stack is ready, you will find the URL of API in stack outputs.
  1. Modify feedback.html -sample form
    Replace __reCaptchaSitekey__ and https://URL/TO/YOUR/AWS/APIGW/ with real values you obtained earlier.
          <button type="submit" class="g-recaptcha form__button"
		    data-sitekey="__reCaptchaSitekey__"
            data-callback="handleFormSubmit">Submit</button>
        </form>
      </td>
    </tr>
  </table>

  <script src='https://www.google.com/recaptcha/api.js' async defer></script>
  <script>
    var handleFormSubmit = function () {
      var formApiEndpoint = "https://URL/TO/YOUR/AWS/APIGW/"
      var successEl = document.querySelector('.form__success')
  1. Open feedback.html in your browser and submit the form to your Slack channel!
You can’t perform that action at this time.