# Example: Building Simple Form

### **Step 1: Preparing Data**

Use the Population data structure from [last lesson](/plugins/developing-plugins/developing-web-plugins/example-using-chart.js-in-directual.md) and add fields such as "value," to write through a POST request. Here's how it should look:

![](/files/HD76l2oqEFte0R0BaJL6)

### **Step 2: Adding a New Web Component in the Plugin**

Next, go to your plugin and add a new "web component" with two parameters: an endpoint for reading data and a title to display on your simple form.

![](/files/PZRjLADfPtB5KagrH4nq)

**Add Initialization Script:**

```
function(instance, context) {

  div = $('<form id="myForm"></form>');
  
  instance.canvas.append(div);

}
```

**Add "Update" Script:**

```
function(instance, properties, context) {  
var ctx = document.getElementById('myForm');
var layout = $('myForm') // get form by id
var data = context.endpoint || [] 
var title = context.title
// reading data by api endpoint for set your future select
var data = context.endpoint || []
// replace below URL to your api-endpoint for saving data
var endpointForSave = "https://api.directual.com/good/api/v5/data/population/getPopulation?appID=2...b65&sessionID="

//build you form
$form = $("#myForm");
$form.empty() //remove all inputs
$form.append('<h1>' + title + '</h1>');
$form.append('<input type="text" value="you name" name="name">');
$form.append('<select id="population" name="value"></select>');
data.forEach((datum)=>{
  $('#population').append('<option value="' + datum.value + '">' + datum.value + '</option>');
})
var send = $("<button>Send data to server</button>");
send.click(()=>{
  //prepare json object to send server
  var formdata = $form.serializeArray();
  var data = {};
  $(formdata).each(function(index, obj){
      data[obj.name] = obj.value;
  });
  $form.empty()
  $form.append('<h1>' + title + '</h1>');
  $form.append('<span>sending data: ' + JSON.stringify(data) + ' to server</span>');
  
  fetch(endpointForSave, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  }).then(()=>{
    $form.empty()
    $form.append('<h1>' + title + '</h1>');
    $form.append('<span>Congratulations, the data has been sent to the server</span>');
  })
  
})
$form.append(send);

}
```

**Final Step: Using Your Plugin in Web Pages**

Insert the step with your component into the page and set it up.

![](/files/n8jwA8MU15z5f7Yh7wNf)

Open your page, fill out the form, and send it to the Directual platform.

![](/files/8JMIOrmxxyOyZRpA2yBO)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://readme.directual.com/plugins/developing-plugins/developing-web-plugins/example-building-simple-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.