Create an Inquiry Form with the Ruby SDK

Contents

Overview

There are many cases where inquiries and contact forms are configured and managed on a company’s website. This article introduces how to manage these inquiries using the Kintone REST API client for Ruby (External link) and an inquiry form on a website created with Ruby on Rails.

tips
Note

The SDK introduced in this article is a 3rd party SDK. Check the licenses, functions, etc. before using.

This tutorial uses the following tools:

  • Rails Development Environment (For those new to Rails, refer to Getting Started with Rails (External link) to set up an environment)
  • Ruby 2.7.0 or later (This article uses Ruby 2.7.5, Rails 7.0.2.)
  • A Kintone account with the Help Desk Management App

Create the App

Add the Help Desk Management App

Log into Kintone and add the Help Desk Management App from the Kintone Marketplace. Refer to Adding a Sample App (External link) from the Kintone Help for more details.

Screenshot: Kintone Marketplace screen highlighting the Help Desk Management App.

Navigate to the Help Desk Management App and click the Change app settings icon (gear icon) to access the App settings.

Screenshot: The Change app settings icon in the Help Desk Management App is highlighted.

Add a Text field to the form for the Company name. Then update the field title and field code for each field in the form to match the table below. Save the form when finished.

Field Type Field Name Field Code
Text Company Company
Text Name Customer_name
Radio Button Inquiry Type QType
Text Area Details Detail

Screenshot: User adds a Text field to the form Company name.

Screenshot: User updates the field title and field code, and save the form.

Generate an API Token

Next, open the App Settings tab and click API Token under Customization and Integration.

Screenshot: The API Token option is highlighted on the App Settings screen.

Click the Generate button and check Add records. Then save the settings.
Make a note of the generated API token, as it will be necessary later for the customization code. Also make a note the App ID (in the following sample application, the App ID is 272).

Screenshot: The API Token screen explains the steps to generate the API Token.

Finally, to apply the App settings, click the Update App button.

Screenshot: Update App in the Help Desk Management App is highlighted.

Settings for the Help Desk Management App are now complete.

Create an Inquiry Form with Ruby

Step 1

Next, make an inquiry form application with Ruby on Rails.
(For those without a development environment for Ruby on Rails, refer to Getting Started with Rails (External link) to set up an environment.)

Open the terminal and execute the following command.

1
$ rails new contact

This creates a Rails application called contact.
As the subsequent commands are executed in the created contact directory, move to the directory with the following command.

1
$ cd contact

Screenshot: The contact directory.

Step 2

Before creating the form, install the Kintone REST API client for Ruby (External link).

Open Gemfile and add the command as shown below.

Screenshot: User adds Kintone commands to Gemfile in the text editor.

After saving the file, execute the following command.

1
$ bundle install

Step 3

Create a controller with the following command. As an example, the controller is named inquiries.

1
$ rails generate controller inquiries

Screenshot: The Controller file within the the controllers directory is highlighted.

Step 4

Open the routes.rb file in the config folder.

Screenshot: The routes.rb file within the config directory is highlighted.

Edit it to match the following code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
=begin
RoR Route Config Sample
Copyright (c) 2022 Cybozu
Licensed under the MIT License
=end

Rails.application.routes.draw do
  get '/inquiries', to: 'inquiries#new'
  post '/inquiries', to: 'inquiries#create'
  resources :inquiries

  root 'inquiries#new'
end

Step 5

Create a new.html.erb file in the inquiries folder under the views folder.

Screenshot: The new.html.erb file within the inquiries directory is highlighted.

Using the following code in the newly created new.html.erb file, create an inquiry form by using FormBuilder.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<%#
# RoR Webform View Sample
# Copyright (c) 2022 Cybozu
# Licensed under the MIT License
%>

<h1>Inquiry</h1>
<%= form_for :inquiry, url: inquiries_path do |form| %>
  <p>
    <%= form.label :company_name, "Company:" %><br>
    <%= form.text_field :company_name %>
  </p>
  <p>
    <%= form.label :client_name, "Name:" %><br>
    <%= form.text_field :client_name %>
  </p>
  <p>
    <%= form.label :contact_type, "Inquiry Type:" %><br>
    <table style="border: 1px solid black;">
      <tr>
        <td>
    <%= form.radio_button :contact_type, "Sales Inquiry"%>
    <%= form.label :product, "Sales Inquiry" %>
    <%= form.radio_button :contact_type, "Support"%>
    <%= form.label :order, "Support" %>
    <%= form.radio_button :contact_type, "Partnertship"%>
    <%= form.label :claim, "Partnertship" %>
    <%= form.radio_button :contact_type, "Other"%>
    <%= form.label :misc, "Other" %>
        </td>
      </tr>
    </table>
  </p>
  <p>
    <%= form.label :details, "Details:" %><br>
    <%= form.text_area :details, size: "50x6" %>
  </p>

  <p>
    <%= form.submit "Send" %>
  </p>
<% end  %>

The following form should be generated.

Screenshot: The form generated with Ruby.

Step 6

Generate a model of the resource name specified earlier.
Run the following command to generate the inquiry model.

1
$ rails generate model Inquiry company_name:string client_name:string contact_type:string details:text

This generates the following model.

Field Name Field Type
company_name string
client_name string
contact_type string
details text

Execute migration with the following command to create a table in the database.

1
$ rails db:migrate

An Inquiries table is now created in the database.
In this case, the default database sqlite 3 was used. If sqlite 3 has not been installed yet, execute the following command to install it.

1
$ gem install sqlite3

Step 7

Edit the controller created earlier.
Open inquiries_controller.rb in the controllers folder with an editor.

Screenshot: The Controller file within the controllers directory is highlighted.

Type the following code into the inquiries_controller.rb file. Replace the {subdomain}, {API Token}, and {App ID} in lines 17 and 18 with the name of the Kintone subdomain, the API token of the App, and the App ID.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
=begin
RoR Controller Sample
Copyright (c) 2022 Cybozu
Licensed under the MIT License
=end

require 'kintone'
class InquiriesController < ApplicationController

  def new
  end

  def create
    @inquiry = Inquiry.new(inquiry_params)
    if @inquiry.save
      # Use token authentication
      api = Kintone::Api.new("{subdomain}.kintone.com", "{API Token}")
      app = {App ID}

      # Record register(single record)
      # Use Hash
      record = {"Company" => {"value" => inquiry_params[:company_name]},
                "Customer_name" => {"value" => inquiry_params[:client_name]},
                "QType" => {"value" => inquiry_params[:contact_type]},
                "Detail" => {"value" => inquiry_params[:details]}
                }
      api.record.register(app, record)
      redirect_to root_path
    else
      render 'new'
    end
  end

  private
    def inquiry_params
      params.require(:inquiry).permit(:company_name, :client_name, :contact_type, :details)
    end
end

Code Description

Step 4

The routing within the above code is defined as follows to create the inquiry form.

HTTP method Path Field Code Purpose
GET /inquiries inquiries#new Returns an HTML form to create one inquiry
POST /inquiries inquiries#create Creates one inquiry

The resource name specifies the inquiries created earlier.

1
resources :inquiries

The code also sets a form for creating an inquiry on the homepage.

1
root 'inquiries#new'

For the sake of simplicity, only the new and create actions of the controller are defined.
The inquiry form is displayed with the new method (as there is no processing in particular, the method is blank) and the input data is saved with the create method.

1
2
def new
end

After saving the form data in the database, the data is registered into the Kintone App.

1
2
3
if @inquiry.save
  ...
end

Step 7

The following code loads the Kintone REST API client for Ruby and creates an instance.
Specify the sub-domain name, the API token, and the App ID noted in the Generate an API Token section (refer to the README (External link) for more details).

1
2
3
4
require 'kintone'
# Use token authentication
  api = Kintone::Api.new("{subdomain}.kintone.com", "{API Token}")
  app = {App ID}

The record data is set using Hashes, and is registered into the Kintone App via REST API.

1
2
3
4
5
6
7
8
# Record register(single record)
# Use Hash
record = {"Company" => {"value" => inquiry_params[:company_name]},
          "Customer_name" => {"value" => inquiry_params[:client_name]},
          "QType" => {"value" => inquiry_params[:contact_type]},
          "Detail" => {"value" => inquiry_params[:details]}
          }
api.record.register(app, record)

Test the Integration

Start the local Rails server with the following command.

1
$ rails server

Accessing http://localhost:3000 through the browser will display the following inquiry form.
Enter in data and click the Send button to add a new record to Kintone.

Animated GIF: The information entered in the form is added to Kintone App.

References