2x2 Matrix as Input

[ryananderson]

I’m trying to develop a form for a brand exercise I’m running. Something I’d like to do is have the user position a dot representing a company on a 2-axis map, and calculate the value of each axis.

The further toward the end of each axis the dot is, the higher the value. The best I can come up with is to use two sliders for each dot, but that’s not quite as inuitive.

Obviously this is a pretty fringe use case, but I was wondering if anyone knew of anything that existed like this already. Any help is appreciated.

[user5c0166073a6c48.6 (Gravity Bot)]

Do you think GFChart might work for you?

I know you can set up a y and x-axis with their charts. You also use a math formula with basic arithmetic inside a number field by adding merge tags, so that’s how you can make your calculations.

You would need to set up a confirmation or redirect the visitor to the page you’ve added your chart shortcode to. Right now live charts to my knowledge aren’t available so this could change your form configuration if you were originally wanting to show the user information before they submitted the form.

[uamv (Joshua Vandercar (Gravity Forms))]

Here’s something that can get you started. Could definitely be improved upon by adding axis lines and indicating on the canvas where the user has clicked, but should put most of the functional pieces in place.

Create Canvas

Create an HTML field containing the following element:

<canvas id="myFieldGrid" style="height: 250px; width: 250px; background-color: gray; cursor: crosshair;">

Create Axis Fields

Create two read only number fields to hold x and y values.

Add Script

Add the following javascript. (see Custom Javascript)
Be sure to update the field IDs for the xAxisField and yAxisField.

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    return { 'x': x, 'y': y };
}

var gridField = document.getElementById('myFieldGrid');
var xAxisField = document.getElementById('input_727_5');
var yAxisField = document.getElementById('input_727_6');

gridField.addEventListener("click", (e) => {
	position = getCursorPosition(gridField,e);
	xAxisField.value = position.x;
	yAxisField.value = position.y;
});

[chrishajer (Chris (Gravity Forms))]