Blog

Dear Friends, As we know that Drupal as a headless technology booming right now, so we have lots of things to do.

In this article we are going to learn, How to submit webform data using rest api with an example.

Also, Read

• Drupal as a headless technology
• Install Drupal 9 using composer | install drupal 9 using composer with lando
• Create Drupal 9 Custom Module programatically

Let’s Start step by step

Step 1: Download Webform and Webform Rest module

You can download directly from Drupal.org

• Webform Module Download from Drupal.org
• Webform Rest Module Download from Drupal.org

Note: If you have downloaded it from drupal.org then place it in proper path inside /web/module/contrib/

You can download using composer

lando composer require drupal/webform 

lando composer require drupal/webform_rest 

Step 2: Install Webform, Webform UI and Webform Rest Module

You can install using your Drupal UI

Go to Main Navigation -> Extends and search here for your module and click on install.

You can install using Drush

lando drush en webform webform_ui webform_rest

Note: if composer ask for, enabled more module then type Yes and hit enter.

Step 3: Make sure you have installed & Enable Rest UI module, Or download and install from here

Step 4: Go to Main Navigation -> Configuration -> Web Services -> Rest

Step 5: Search for /webform_rest/submit and click on Enable to enable this API.

Step 6: Configure the API as below screenshot and click on Save configuration.

Step 7: Go to Structure and Click on Webform

Step 8: Click on Add Webform to add form.

Step 9: Choose field and field type and add field to the form.

Step 10: Configure the field type save + element to add more field in this form.

Step 11: Now you go to postman and prepare json data as per screenshot attached and configure below things.

• Provide endpoint : /webform_rest/submit
• Choose Method : POST
• Type: Basci Auth
• Provide your Drupal administrator credential.

Step 12: Click on Headers and provide below data.

• Header: Content-Type : application/json

Step 13: Click on Postman Body And Prepare Your Data in Json Format.

{
  "webform_id": "contact_us",
  "name": "Pradip Mehta",
  "mobile_number": "9716442211",
  "email_id": "pradipmehta10@gmail.com"
}

Note: You have done successfully, after success, this api will return SID in response.

Let me know using contact us page, if you are facing any challenges.