# Bubble plugin :: Sociocs - Form

# Introduction

Form plugin (e.g. Contact Us, Appointment Request, Pricing Inquiry form etc.) for Bubble.

When the end user submits the form, it is received in the Sociocs Inbox, form where, you can reply back.

Demo Plugin page on Bubble

# Plugin Installation

1. In the Bubble dashboard, go to "Plugins".

2. Click on "+ Add Plugins".

3. Search for "Sociocs - Form".

4. Click on "Install".

# Plugin Configuration

# Sociocs

1. Sign up or log in on app.sociocs.com.

2. Select "Form" in the "Connect a new channel" page. If you are an existing user, after logging in, click on "Channels" menu on the top, click on "+" button to go to the "Connect a new channel" page.

3. Enter "Form name", check "Key authorization", and click "Next". You don't need to add fill out any other information. (Even if you would like to add "reCAPTCHA" validation in your form, leave "reCAPTCHA v2" unchecked in Sociocs. You would have to use Bubble's reCAPTCHA plugin. Instructions are below. For now, you can continue with these steps.)

4. On the next page, click "Done", which should take you to the Channels page.

5. Click on the "Form" channel you just added, and find API URL, and SECRET KEY (value shown under "Key authorization").

# Bubble Editor

1. Go to the "Sociocs - Form" plugin in the Bubble Editor.

2. Add "API URL" and "SECRET KEY" configuration parameters.

3. Bubble also shows fields for adding dev keys (i.e. "API URL - dev.", "SECRET KEY - dev."). You can leave them blank.

# Create a form in Bubble Editor

Once the plugin is ready, it's time to create a form in your Bubble app (e.g. Contact Us form)

# Design tab/page

1. Add input fields (e.g. Name, Email address, Message etc.), and a button in your bubble app's page (You can create a separate page for this, or add input fields in an existing page such as index.html). You should also add an "Alert" element, to show a message to the user upon the form submission.

2. If you would like to add reCAPTCHA verification, install and configure Bubble's reCAPTCHA plugin by following the instructions available here: https://manual.bubble.io/core-resources/bubble-made-plugins/recaptcha. Add "reCaptcha form" element above the submit button you added in the previous step.

# Workflow tab/page

1. If you have added Bubble reCAPTCHA element in the form, add an additional condition in the Button Submit handler to ensure reCAPTCHA checkbox is checked.

2. Add a new action for the button.

3. In the action popup, select "Plugins -> Submit Sociocs Form".

4. In the "Submit Sociocs Form" popup, add key/value mapping for each input field you created.

   • Use lowercase naming for the keys.

   • Email address, and Name field related keys must be called "email", and "name", so that Sociocs can identify those fields as such.

   • "email" key is required.

   • "name" key is optional but recommended.

   • For a Contact Us form - keys are usually "name", "email", and "message". If you have additional input fields in your Bubble form, you can add mapping for those too. Name keys how you would like to see them on Sociocs inbox upon form submission.

5. Add a new action (step 2) for the button.

6. In the action popup, select "Element action -> Show message".

7. In the "Show message" popup, select alert element in the "Element" dropdown, and add a condition to match step1's result to an "Arbitrary text" of "success".

You are all set to accept form submissions in your Bubble app!