Forms

In this blog, we will undertake the task of implementing a form and save data encompassing various fields such as text, numerical data, selection options, and email, among others.

In the scope of this blog, our focus will be the creation of a form leveraging the capabilities of Google Sheets. The author, who is also responsible for the block on the ‘Contact Us’ page, will be partaking in this endeavor. We will be incorporating the form block code into GitHub for seamless form loading. Additionally, we will devise a ‘Thank You’ page to which the user will be redirected upon successful submission of the form.

Form Content Creation

Follow below steps for Form content creation in Google Drive:

1. Begin by creating a Google Sheet titled user-form in the root folder as shown below:

2. user-form Google sheet created in root folder as shown below:

3. Inside user-form Google Sheet, we will be defining fields and its attribute within helix-default tab as show below:

Name: The cornerstone of any HTML form, the field name is a pivotal element which identifies each unique data entry point.

Type: A crucial aspect that specifies the nature of data input in the form. It could range from text, password, checkbox, radio, to more specific types like email, date, etc.

Label: The visual cue that informs the user about the type of information expected in a certain field. It’s an integral part of form accessibility and usability.

Placeholder: A hint presented in your form field prior to user input. It’s a nifty tool to guide your users and improve user experience.

Description: This provides additional details or instructions about the expected input. It’s particularly beneficial when the label alone isn’t self-explanatory.

Requirement: This setting enables you to mark a field as mandatory or optional. It’s an effective way to ensure that crucial data isn’t omitted by the user.

Options: Tailor-made for select fields, these options allow you to define a drop-down list from which a user can make a selection.

We can define options in other tab or sheet also all together in place of defining comma separated in same sheet as show below:
‘https://main–edge–tokhanimran.hlx.page/user-form.json?sheet=branch’

Option is dropdown label and value is dropdown value.

Style: This is the aesthetic aspect of your form field. It gives you the power to control the appearance of your fields by applying custom styles or classes.

Type as confirmation: This allow us to redirect user to given page post successful submission.

5. Create one more tab name as incoming having all field Name as shown below. Form data will get save on successful form submission.

6. Slack tab will by default get create on form submission.

7. Click on Preview button to activate the changes and make it available to test.

Include Form in Google Doc

Create Google Doc named as contactus and include below block to load user-form Form.

Add Form Block Code Changes in GitHub

Follow below steps to add form block code in GitHub repo:

1. Clone GitHub repo and add Form block to load form on contact us page as highlighted below:

2. Create form block folder within blocks folder. Create form.js, form.css and form-fields.js
Copy paste code form below link in all three files: ‘https://github.com/adobe/aem-block-collection/tree/main/blocks/form’

3. Push code to GitHub once done with the changes to see latest on page:

5. Click on Preview button to activate the changes.

Create Thank you Page

Create one more Google Doc and name it as thank-you for redirecting to user on successful form submission. We already declared thank-you page within user-form Google Sheet as part of default-helix tab to get it redirect post successful submission.

Form Submission

1. Load contact us page will show form:
   ‘https://main–edge–tokhanimran.hlx.page/contactus’

2. Fill all the required information and click on submit.

3. As mentioned earlier, data will get save within incoming tab post form submission as shown below:

Important Note: It may take 2 to 3 min for data to get appear within incoming tab.

4. Form will get redirect to thank-you page as declare with helix-default tab within user-form Google Sheet post successful form submission:

Note: As x-www-form-urlencoded body (content-type header must be set to application/x-www-form-urlencoded