> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/plugins/developing-plugins/developing-web-plugins/example-building-simple-form.md).

# 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)