Skip to main content

Step 3: Add a Component

With your script connected to the InForm platform, let’s add one more component so you can see how changes in Grasshopper appear on the web UI.

3.1 Add an Input Component (Slider)​

Let's add some spice and make the depth of the text variable.

  1. In Grasshopper, locate the InForm UI components panel.
  2. Drag a Slider input component onto the canvas.

alt text

  1. Add a number slider and connect to the Slider component.

alt text

  1. Change the number slider properties to go between 0.5 and 2.0 by double clicking on the slider. Also give it a name.

alt text

  1. You can now see the name appear below the slider component. This indicates that it works.

alt text

  1. Let's add a new group:

alt text

  1. Connect the new input to the variable we want to change! In this case the 'depth' input in the text surface.

alt text

3.2 Update InForm​

DONE ✅✅✅✅✅✅

Now let's see the new changes directly in InForm.

  1. Hit the send button again (no need to copy a new key). And see the changes!

alt text

  1. Test it by changing the slider and hitting submit!

alt text

Tips & troubleshooting​

  • Did your key expire? Get a new one by clicking on the key icon next to the publish button in the blue ribbon.
  • Sliders do not support Expressions.
  • Group related inputs and outputs for a clean, readable canvas.

Next Step​

Explore the full library of InForm components and patterns.

Next: Add an Action →

← Previous: Connect to Platform | Back to Overview