Feedback Form Trigger from Video Events in Next.js

Videos can be considered one of the most successful marketing tool as they outperform text posts and static images in terms of engagement. It may appear harsh, but it is the reality of today's business environment. An effective user review of a video can make or break sales.

Consumers want social proof of products and services more than ever, and it's a good business practice to prioritize and capitalize on those user reviews.

This article demonstrates how to generate user reviews from feedback forms triggered by video events in Next.js.

CodeSandbox and Github

The completed project is on CodeSandbox. Fork it to get started quickly.

The source code is on Github.

Prerequisite

Adequate knowledge of JavaScript and React.js
Knowledge of Next.js is preferred, but not required.
A Cloudinary account is also needed — sign up here.

Getting Started with Next.js

Next.js is a React-based framework with pre-rendering, automatic code-splitting for faster page loads, and API routes to build API endpoints with serverless functions for back-end features.

Created by Vercel, Next.js is open source based on Node.js and Babel — and also integrates with React to create single-page apps.

Project Setup and Installation

To create a new project, we’ll run the following command in our terminal:

1npx create-next-app <project-name>

Navigate into the project directory and install Cloudinary React SDK dependency.

1cd <project-name>
2    npm install cloudinary-react

Running npm run dev will start the development server by default at http://localhost:3000 in our browser.

Setting Up a Video in Cloudinary

After successfully creating an account, Cloudinary will redirect us to our account's dashboard page where we can upload the demo video.

Click on the “Upload” button above and select the video file to be uploaded.

Building the Feedback Form

To build the feedback form, we’ll create a new file called Form.js and set up some state variables to store the value of the form’s input elements anytime the value changes.

1const form = () => {
2      const [name, setName] = useState("");
3      const [review, setReview] = useState("");
4       return (
5        // form
6     )};
7    export default form;

We'll head on to create a form that consists of a button and two input elements; one for the user and the other for the user's feedback. The input elements are assigned to the state variables shown in the code snippet above.

1<form className="form">
2    <label>
3          name:
4          <input
5            type="text"
6            value={name}
7            onChange={(e) => setName(e.target.value)}
8          />
9        </label>
10        <label>
11          Video review:
12          <textarea
13            type="text"
14            value={review}
15            onChange={(e) => setReview(e.target.value)}
16          />
17        </label>
18        <button type="submit"> submit </button>
19 </form>

Implementing the Video Player

Import the required components from Cloudinary React SDK to pages/index.js to embed the video player in our demo application.

1import {Video, CloudinaryContext} from 'cloudinary-react';

Then, in the CloudinaryContext component, apply the Cloud name from our Cloudinary account details on the dashboard page and also include the name of the video in the Video component:

1<main className={styles.main}>
2        <h1 className={styles.title}>
3          Feedback form trigger from video events in Next.js
4        </h1>
5    <CloudinaryContext cloud_name="OUR-CLOUD-NAME">
6      <div>
7          <Video
8            publicId="OUR-VIDEO-ID"
9            width="850px"
10            height="450px"
11            controls
12            onPlay={playFunction}
13            onEnded={endFunction}
14          />
15        </div>
16      </CloudinaryContext>
17    </main>

As shown above, we'll also apply some configuration parameters to the video. Each of the parameters does the following:

publicId - Holds the name of the demo video
width and height - Displays the video with a width of 850px and a height of 450px
controls - Gives the video a set of controls such as play, pause, skip, fullscreen, etc.
onPlay - Triggers a function when the video starts.
onEnded - Triggers a function after the video finishes.

After configuring the video player, our demo application will look like this:

Displaying our Feedback

With the video player fully functional, set up a state variable called form in the index.js file to control the display of the feedback form.

1const [form, setForm] = useState(false);

The onPlay and onEnded props in the Cloudinary video player are assigned to functions that enable the form visibility. The onEnded prop shows the form immediately after the video ends, and the onPlay prop hides the form when the video starts playing.

1const playFunction = () => {
2        setForm(false);
3      };
4      const endFunction = () => {
5        setForm(true);
6      };

Then, we’ll declare a condition to display the feedback form only if the state variable form is true.

1<main className={styles.main}>
2            <h1 className={styles.title}>
3              Feedback form trigger from video events in Next.js
4            </h1>
5        // Cloudinary video player
6          {form && <Form />}
7    </main>

Next, we’ll head on to the Form.js file to create an alert for the response of the form once it’s submitted. We’ll also reset our input elements.

1const handleSubmit = (event) => {
2        event.preventDefault();
3        alert(`${name} said "${review}"`);
4        setName("");
5        setReview("");
6      };

After all the configurations, the demo application will look like this:

Conclusion

This article discusses rendering a feedback form to get user feedback once a video ends.

Resources

Cloudinary React SDK Documentation