How to Create Simple Contact Forms with Web Methods

CREATING THE WEB METHOD

To create a Web Method in Vivantio, log into the platform, open the Admin Area, and go to:

Integration & API » Web Methods

screenshot of web methods admin area

(If you don’t see Web Methods in this menu, please contact our support team.)

When you reach this screen, select the “Add” button. You’ll then get a dialog with a box for you to enter a name and a few sub tabs below to fill in. Submit a name and then move onto the first tab.

BASIC DETAILS

screenshot of add web method basic details

In this example, because we’re going for a simple form POST, we won’t be authenticating.

So, select Access Key Auth, and enter the IP range of the web server(s) that will host the form.

(Note: We’ve gone for 0.0.0.0 and 255.255.255.255 in our example. Don’t do that in practice!)

The other options on this tab are:

  • HTTP Method
  • Request Content Type

As this is a web form we’re dealing with, you will want to select ‘POST’ and ‘application/x-www-form-urlencoded’ respectively.

PARAMETERS

screenshot of vivantion add web wethod parameters

You can add as many parameters as you like, depending on how complicated you want your form to be.

In this example, we’ve kept it simple with:

  • First Name
  • Last Name
  • Email Address
  • Subject
  • Description

They are all configured in the same way.

ACTIONS

In this example, we want to create a Ticket when the Web Method is called. So, on the Action tab, choose

Add » Create Incident

(Note: You can use whichever of your Ticket Types is more appropriate for the situation.)

screenshot of vivantio add web method actions

After you’ve selected your Action, you will get a popup with two tabs: Conditions and New Record Details.

In this example, we want a Ticket to be created every time the Web Method is called. So, we will leave the Conditions tab empty and move onto New Record Details.

screenshot of vivantio add web methods 2

In this example, you can see we’re using {{notation}} to pass our parameter values into the Ticket Details.

You’ll also want to note though that we’ve put some literal values in for the Priority and Category. In our example, we want these set for every contact form submission, but we don’t want the user to choose them, so we’re specifying fixed values.

RESPONSE

When you’re setting up the Response, you can configure up to three options:

  • Response Type – For this field, you have the choice between Content or Redirect. Content allows you to specify content to be returned to the user as part of the Response Body. Redirect let’s you send them to a specific website with a 302 redirect.
  • Response Content Type – For this field, you have the choice between JSON, XML, or Text/HTML. This field is only available when you select the Content option for the Response Type field. It will inform the user of the Web Method which data type to expect in return.
  • Response Template – This field allows you to enter the actual response you would like to send: either the content or the redirect URL. If your Web Method contains a “Create Ticket” action, you can use {{notation}} to refer to properties from the created ticket within the response template such as {{ticket.displayid}} to get the ID of the inserted ticket.

For our example, we’re going to set up a Content Response using the Content Type “Text/HTML” that shows a basic “Thank You” message and refers to the Ticket ID.

screenshot of add web method response

After you hit the “Save” button, you’ll be shown the unique URL for your Web Method.

screenshot of vivantio web method URL

CREATING THE CONTACT FORM

When creating the form, the things you need to know are:

  • The form method should be “POST”.
  • The form action should be the Web Method URL you noted earlier.
  • When you’re setting the names of your form inputs, they should match the names of the parameters you added earlier.

Here’s a sample form below that is ready to use apart from the action URL on the form:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>HTML Form &raquo; Web Method Example</title>

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” rel=”stylesheet”>

<!–[if lt IE 9]>

<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>

<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>

<![endif]–>

</head>

<body>

<div class=”container”>

<div class=”row”>

<div class=”col-lg-6 col-offset-lg-3″>

<form method=”POST” action=”YOUR WEB METHOD URL HERE”>

<div class=”form-group”>

<label for=”firstname”>First Name</label>

<input type=”text” class=”form-control” id=”firstname” name=”firstname” />

</div>

<div class=”form-group”>

<label for=”lastname”>Last Name</label>

<input type=”text” class=”form-control” id=”lastname” name=”lastname” />

</div>

<div class=”form-group”>

<label for=”email”>Your Email Address</label>

<input type=”email” class=”form-control” id=”email” name=”email” />

</div>

<div class=”form-group”>

<label for=”subject”>What can we help with?</label>

<input type=”text” class=”form-control” id=”subject” name=”subject” />

</div>

<div class=”form-group”>

<label for=”description”>Any additional details?</label>

<textarea class=”form-control” id=”description” name=”description” rows=”10″>

(Note: You’ll note that we’ve referenced Bootstrap in this sample. You do not have to do that and can use whatever UI framework you like.)

Here’s what the sample form would look like in practice:

vivantio web method form sample

Using the code, you can publish the form to your website. After a user fills in and submits the form, a Ticket will be created via the Web Method. The user will then see the content configured on the Web Method Response.

Share This Story!

5.5 min read

FREE GUIDE

Get the roadmap that puts your customer service at the center of your company’s business strategy.