form builder elements

---

What's covered:

In the below article, we'll cover the following items:

• What is the Drawing element?
• How do I enable the new drawing element?
• How do I add the Drawing element to my form?
• What do the icons indicate in the toolbar menu?
• How do I move the toolbar menu?
• How do I load an image into the Drawing element?
• How do I add shapes to my photo?
• How do I choose which shape to draw with?
• How do I draw on my photo?
• How do I add text to my photo?
• How do I clear the annotation from my photo? 

Also, check out:

• How do I pre-fill/default a background image to my drawing element?
• How do I add custom icons to my drawing element?

---

What is the Drawing element?

The Drawing element allows you to draw an image as well as annotate an image taken with your device's camera or uploaded from the device's library. We have two versions of this element, the older instructions can be found here.

The new drawing element can be used on iForm iOS version 9.18 and Android version 9.10 or higher and is not currently on by default.

As of the 10.7 release (both iOS and Android), the new drawing element is out of beta and defaulted to "on".

Please follow the instructions below for using the enhanced drawing element.

---

How do I enable the new drawing element?

To enable the new drawing element, please follow the instructions below. These instructions are the same for both iOS and Android.

STEP 1. Once you are logged into the app, click on the Menu icon.

STEP 2. Click on Settings.

STEP 3. Click on Element Settings.

STEP 4. And finally, turn on the toggle next to New Drawing Element (Beta).

---

How do I add the Drawing element to my form?

To add the Drawing element, please follow the instructions below.

STEP 1. From inside the form builder, click the Drawing icon from the left-hand menu. You'll see it populate the device view.

STEP 2. On the right-hand side, you'll see the element properties. Enter the name of your element.  

PLEASE NOTE: If you check the Based on Label option, it will create a data column based on the Label on the element.

STEP 3. Save your form.

---

What do the icons indicate in the toolbar menu?

	Palette Tool - Choose color options
	Drawing Tool - Freehand a drawing
	Eraser Tool - Erase a freehand drawing
	Text Tool - Add text to the drawing element
	Image Tool - Add images to the drawing element
	Icons Tool - Add icons to the drawing element
	Shapes Tool - Add shapes to the drawing element
	Line Weight - Adjust the thickness of a freehand drawing, eraser or shape
	Opacity - Adjust the transparency of a freehand drawing or shape
	Font Size - Change the font size of the text tool
	Font Type - Change the font type of the text tool

---

How do I move the toolbar menu?

Click on the toolbar menu and press down to drag it around. It will position itself on either the right or left-hand side.

---

How do I load an image into the Drawing element?

To load an image in the Drawing element, please follow the instructions below.

STEP 1. Load the form on your device.

STEP 2. Click the Drawing element you added.

STEP 3. A prompt will appear asking you to choose how you would like to add the image.

• Take a picture with camera: The user will take a new photo with the device's camera.
• Pick from image gallery: The user will choose a photo from the device's photo library.

STEP 4. Once you've taken a new photo or upload a photo, you'll choose if you want the image to be a background image or an overlay image.

• Use as Background: This is a static image.
• Overlay Image: This is an image that can be moved around.

The image is now loaded into your Drawing element.

If you want to add an image later, click on the Camera icon (Image Tool icon).

Now that you have your image loaded, you can now annotate it. Please see below for instructions on how to do so.

---

How do I add shapes to my image?

STEP 1. From the toolbar menu, select the Icon Tool icon.

STEP 2. From the pop-up menu, select the shape you want to add.

STEP 3. You'll see the shape added to your image. You can adjust its position by pressing on it and moving it around, adjust the size by clicking on the double sided arrow or rotate the shape by clicking on the circle arrow icon. To click out of the shape option, click on the Icons Tool again.

---

How do I choose which shape to draw with?

You can choose whether to draw squares, draw circles, etc.

STEP 1. From the toolbar menu, select the Shapes Tool icon.

STEP 2. Choose what type of shape you'd like to draw.

STEP 3. Add your shapes. You can click and drag the shape to move it around, adjust the size by clicking on the double sided arrow, rotate it by clicking on the circle arrow or click on the X to delete the shape found on the border of the image.

You can also adjust the line weight by clicking on the line weight icon and/or change the color by clicking on the color palette icon. To click out of the shape option, click on the Shapes Icon again.

PLEASE NOTE: Once you save the drawing, the shape you added to the image cannot be erased.

---

How do I draw on my photo?

STEP 1. From the toolbar menu, select the Drawing icon.

STEP 2. Choose the size and opacity by clicking on the line or opacity icon. To change the color, you can click on the color palette icon.

STEP 3. Draw on your photo.

PLEASE NOTE: Once you save the drawing, the shape you added to the image cannot be erased.

---

How do I add text to my photo?

STEP 1. From the bottom menu, select the Text Tool icon.

STEP 2. Choose the Font Size and Font Color by clicking on either of the two icons below the Text Tool icon. To choose a new text color, click on the color Palette Tool icon. 

STEP 3. Tap anywhere inside the element where you want the text to display. The text box will appear once you tap on something. Hit "Done" once you are done typing.

The text will appear on your photo. You can adjust its position by pressing on it and moving it around. Adjust the size by clicking on the double sided arrow, rotate the text using the circle arrow icon or delete it by clicking on the X icon on the border of the text.

If you have the Text Tool icon still selected and you tap somewhere else on the image, it will insert a new text box. Click on the Text Tool icon to deselect it from adding new text.

---

How do I clear the annotation from my photo?

To clear the annotations, click the back arrow in the bottom toolbar. If you're clearing more than one, continue to click the back arrow until the annotations are cleared.

To delete the whole drawing (including images), click the Trashcan icon on the bottom left.

To clear text you added from the Text Tool, you can select the Text Tool icon, re-select the text on the image and click on the X icon. You would do the same for Icons (Icons Tool) and Shapes (Shapes Tool).