Add body charts to your web form

Objective: 

Explain how you can add body charts to enhance your web forms, giving your patients a way to pinpoint and describe areas of concern on an image. 

What are body charts?

Interactive images that you can add to your web forms, allowing patients to indicate areas of concern on an image and add descriptions in the accompanying fields.

How to add body charts to your form 

1. Find the body chart feature under Advanced fields in the control panel along the left side of your form builder. 
2. Drag the body chart field onto your form. A stock image, pain type and severity fields will show up. These are all customizable.

How to change the image

1. Click anywhere on the feature to open options.
2. Click Replace image. 
3. You will have the option to choose to either upload your own image or select an image from our stock image gallery. The best type of image for a body chart is an SVG file, because it will scale to fit the screen. However, most image files such as JPG, GIF, and PNG work well. Choose an image that’s at least 600 pixels in width and a file size less than 1 MB.

How to change the field titles

1. Hover and click the sections you want to edit, and the customization window will appear.
2. You can then change the field titles.

How to add fields

1. You can drag and drop new fields onto the body chart either by dragging them directly from the form’s control panel or by duplicating fields you already have on your form.
2. Be sure to drag the field you’re adding over the dotted line so that it's part of the body chart feature. This ensures that the field is duplicated when a new marker is added.

Layout tips

Horizontal layout 

• Unlike our other features, the body chart feature can not be resized horizontally 

Body chart visibility 

• Like our other features, you can set the body chart to appear when a condition is met 
• Turn on Show advanced options to set the condition
• You can read more about setting conditions in our blog posts: Using field conditions in your web form and Advanced techniques for using conditional visibility in web forms.

Repeaters 

• The body chart feature does not work with repeaters 
• A red box will appear if you try to drag and drop the body chart into a repeater 

Understanding how markers work

Markers are the blue indicators patients can use to mark areas on the image. When completing the form, your patients will be able to adjust their placement of the markers by dragging and dropping them. Each time a new marker is dropped onto the image, the fields you set when you created the form appear for the patient to fill out.

• You can set the minimum and maximum number of markers patients can place on an image. 
• When completing the form, the markers are movable. 

Next steps: 

If you would like more information about body charts, read our blog post New body charts and intake forms for chiropractors, physical therapists, and more and watch our video tutorial.

If you need extra help with conditional visibility, Customer Care is always happy to assist.