Ink Sketch¶

Title¶

The text that will appear next to the control:

You can toggle Title’s visibility on/off:

Title can be changed directly on the form after a double click:

//returns the control's title as a string
fd.control('Control1').title

//sets the control's title
fd.control('Control1').title = 'Your order'

Name¶

A unique identifier for the control.

The Name is used in JavaScript to select a specific control, as well as for storing submissions, and in Power Automate or Zapier automations.

fd.rendered(function(){
    //can access the control using its Name:
    fd.control('InkSketch1').disabled = true;
 });

Layout¶

Define whether the Title will appear to the left of the control or directly above it:

Orientation can also be changed directly in the context menu of the selected control:

Required¶

Define whether the control will be required to submit the form or not:

Required status can also be changed directly on the form via the Asterisk button:

Width/Height¶

The properties define the width and height of the canvas in pixels.

Color¶

Defines the ink color.

Class¶

Add a CSS class to the control, which comes in handy with CSS or even JavaScript code. This will work as a class attribute for an HTML tag.

The same class can be applied to multiple fields and controls, and then you can use CSS to modify the appearance of these. For example, we’ve used the following CSS code in the CSS editor to give controls with my-class a gray background:

.my-class {
    background: #c4c4c4;
}

Style¶

Add custom CSS style to the control. This will work as a style attribute for an HTML tag.

You can apply different styles to the control. For example, the following style sets the image as the background of the canvas:

background-image: url('https://forms-storage.plumsail.com/397ad761-3174-49da-a4bf-a741828fbddb-images/b0fbd0fe-accident-diagram.jpg');
background-size: 500px 300px;
background-repeat: no-repeat;

Get or set control value¶

Get or set the Ink Sketch control value. The control value is stored as a Base64 string.

//return control value as a Base64 string
fd.control('Control1').value;

Get HTML element¶

Access HTML element inside the control in order to modify it, hide it, or do something else.

//access control's HTML
var htmlControl = fd.control('Control1').$el;

Hide/show control¶

Hide a control from a user. The control value can still be accessed and changed with JavaScript.

//hide control
fd.control('Control1').hidden = true;

//show control
fd.control('Control1').hidden = false;

Clear canvas¶

Clear the control value.

fd.control('Control1').clear();

Handle change event¶

Execute a function when a control value has been changed:

fd.control('Control1').$on('change', function(value) {
    //log changes to browser's console
    console.log('New value: ' + value);
});

Make control required¶

Make a control required or optional:

//make control required
fd.control('Control1').required = true;

//make control not required
fd.control('Control1').required = false;

Disable control¶

Disable the control. The control value can still be changed with JavaScript and saved.

//disable control
fd.control('Control1').disabled = true;

//enable control
fd.control('Control1').disabled = false;

Change canvas size¶

Define the canvas dimensions in pixels.

//define canvas width
fd.control('Control1').width = 300

//define canvas height
fd.control('Control1').height = 300

Set ink color¶

Set the ink color. Define the color in the text, hex, or RGB format.

//set the ink color to red
fd.control('Control1').inkColor = 'red'

//set the ink color to black
fd.control('Control1').inkColor = 'rgb(0,0,0)'

//set the ink color to blue
fd.control('Control1').inkColor = '#0000FF'