A step-by-step guide on how to automate data collection from your clients with an on-page website intake form.

What’s a web development client questionnaire?

A web development, or a web design, client questionnaire is a website intake form that consists of a set of questions that a web developer asks their client to get a better understanding as to what their expectations are towards a website they are ordering, e.g. their goals, preferences, the timeline etc. A website intake form typically covers such topics as a client’s target audience, branding, design preferences, functionality requirements, content strategy, and budget. By gathering this information, a web developer can create a website mockup that addresses the client’s needs and ensures that the final product meets their expectations. A well-developed questionnaire can also help both sides save time, establish clear communication and prevent misunderstandings throughout the development process.

Initially, client intake forms were in paper format. Nowadays, when the world is moving to digitalization and automation of any paper routine, it’s hard to imagine a web developer going to a client with a pen and a printed out paper form.

In this article we are going to create a web design client questionnaire using a free full scale demo of the Survey Creator library. This demo tool will automatically generate a survey model for us that defines the contents and layout of a form in JSON format. You can then add this form to your website using SurveyJS Form Library and have it rendered by any JavaScript framework you use. Once a form is incorporated into a page, you will be able to invite your customers to fill it out online right on your website, and then use the received results as a starting point in further more detailed discussion during a meeting.

Why choose SurveyJS Form Library to make a web form and collect responses?

SurveyJS is a fast, versatile, free, and open-source (MIT license) JavaScript client-side library for React, Angular, Vue.js, Knockout, and jQuery that can be used to build forms and surveys of any complexity. It has a data-driven approach — fully dynamic surveys defined as JSON schemas, with templating for UI elements. SurveyJS renders a form on a page of your website, collects responses from users and sends the survey data to your database. Since all survey data is in industry-standard JSON format, the frontend and the backend are separated, so you can use any server + database combination with it.

SurveyJS allows for great customization and flexibility. You have total control over the look and feel of your forms — you can select from a variety of built-in themes and personalize them with custom CSS code. It also supports automatic survey localization and the integration of third-party JavaScript components, such as bootstrap-datepicker or Inputmask, and many others.

Why self-host survey data instead of using online survey platforms?

Self-hosting survey data — both survey contents and their results — has several benefits over using third-party survey platforms. One of the main benefits is increased control of the data flow between server and client without any third-party involved. Only you decide where and how the data is stored, who has access to it, and how it is transferred. This is especially important when it comes to handling sensitive or confidential commercial information, as it can help ensure the privacy and security of the data. With SurveyJS, you have full ownership of the survey data and can finally avoid using third-party black box SaaS platforms.

Another important advantage is cost savings. Online survey platforms often charge a monthly fee for their services, which can add up over time. By self-hosting your survey data, you can avoid these fees at all.

Questions to ask in a Website Intake Form and best question types to choose

Most of the questions in a website intake form are open-ended questions, meaning that they don’t have predefined choice options. Among the most popular open-ended question types that SurveyJS ships with is a Text Entry field. It’s suitable for short (hopefully concise) answers. You can use it to, for example ask a client the following questions:

• What is the purpose of the website?
• Who is the target audience for the website?
• What is the budget for the website project?
• Who will be responsible for maintaining and updating the website?

To query a client about the project due date, you can either integrate a third-party date picker library, like jQuery datepicker or Bootstrap datepicker, or simply change an input type to “date” to enable the built-in calendar as shown below:

Another popular question type is Text Area or a Comment filed. This type of question provides more space for the respondent to write a longer or more detailed answer and would be suitable for such questions such as the following:

• What features and functionality do you want on the website?
• Is there a content strategy for the website?

If you’d like your potential client to share their color preference for a certain element of a new website, for example the background color that would be shared among all pages, you can use yet another question type that SurveyJS offers out-of-the-boxt -a Color Picker question. It allows respondents to enter a color in RGB, HSL, and HEX formats or select it with a visual interface.

In case a client would like to have their logo unchanged and it includes several different colors, you can select a Multiple Text Entry question and change the input type for each entry to “color”.

To enable a client to upload a file with a company logo, or any other existing branding guidelines and materials, add a File Upload question type to your form and restrict the allowed format to the one you prefer, for example SVG.

Setting up a TOC (Table of Contents)

The purpose of a table of contents is to provide a client with a quick overview of the content and organization of the questionnaire and allow them to easily navigate to a specific question they want. Adding a TOC to a questionnaire (especially if it’s a long one) can also positively affect the completion rate as respondents can see in advance how many questions there are in a form, what those questions are, and how many remain unanswered.

SurveyJS Form Library has a built-in TOC feature that can be enabled and disabled and repositioned to the left or right at your preference using the showTOC property with ‘true’ or ‘false’ values respectively.

JSON ‘schema’

As we already mentioned earlier, SurveyJS uses JSON objects to define the survey data model. As we were adding the questions to a web design client questionnaire in a no-code UI of the Survey Creator demo, it automatically generated such a schema in JSON format for us. Let’s take a look at it.

{
  title: "Website Intake Form",
  description:
    "Please fill out the form so that we can have better understanding as to what your expectations are of a new website.",
  logo:
    "https://api.surveyjs.io/private/Surveys/files?name=01deec1e-60dc-4438-8b8e-9a3f8a1afbbe",
  logoWidth: "270px",
  logoHeight: "120px",
  logoPosition: "right",
  pages: [
    {
      name: "page1",
      elements: [
        {
          type: "text",
          name: "What is the purpose of the website?",
          title: "What is the purpose of the website?"
        },
        {
          type: "text",
          name: "Who is the target audience for the website?",
          title: "Who is the target audience for the website?"
        },
        {
          type: "text",
          name: "What is the budget for the website project?",
          title: "What is the budget for the website project?",
          placeholder: "Enter a value in USD"
        },
        {
          type: "text",
          name:
            "Who will be responsible for maintaining and updating the website?",
          title:
            "Who will be responsible for maintaining and updating the website?"
        },
        {
          type: "text",
          name: "What is the due date for the website project?",
          title: "What is the due date for the website project?",
          inputType: "date"
        },
        {
          type: "comment",
          name:
            "What features and functionality does the client want on the website?",
          title:
            "What features and functionality does the client want on the website?"
        },
        {
          type: "file",
          name: "Please upload your company logo in SVG format.",
          title: "Please upload your company logo in SVG format.",
          acceptedTypes: ".svg"
        },
        {
          type: "multipletext",
          name: "Please specify the colors used in the company logo?",
          title: "Please specify the colors used in the company logo?",
          items: [
            {
              name: "Background color",
              isRequired: true,
              inputType: "color",
              title: "Background color"
            },
            {
              name: "Text color",
              isRequired: true,
              inputType: "color",
              title: "Text color"
            }
          ]
        },
        {
          type: "text",
          name:
            "Please specify the prefered background color for a new website.",
          title:
            "Please specify the prefered background color for a new website.",
          inputType: "color"
        }
      ]
    }
  ],
  showTOC: true,
  tocLocation: "right",
  questionsOnPageMode: "questionPerPage",
  widthMode: "static",
  width: "800"
};

As you can see, each text entry field is simply an object defined with the type property set to “text” and added to the elements array. The inputType property is used to specify the input type. We only used a few values in our questionnaire. Please refer to the Form Library API reference to see all accepted values for the inputType property.

To demonstrate how it looks, here’s a ready-to-use multi-step Website Intake Form with a TOC that we made with SurveyJS Form Library.

Where to start?

Once you have decided on the type of data you want to obtain from your client and selected appropriate question types, you are ready to generate a survey JSON schema or modify the one we’ve just created. You then need to install and configure (using that JSON file) a framework-specific npm package by following one of the dedicated getting started guides available for each frontend technology, and implement the backend. To help you get a backend up and running quickly, SurveyJS has prepared demo examples for ASP.NET Core, NodeJS, PHP, and WordPress that you can use for free.

If you want to know more about the architecture of all SurveyJS libraries, please refer to the “SurveyJS Architecture” guide.

Conclusion

Web development client questionnaire serves as a tool for collecting important information about client’s expectations, preferences, existing guidelines, and so on. Interviewing your potential clients with such a tool before proceeding to website development can save time during a meeting for both sides — a web developer can get ready by preparing further questions, while enabling a client to have more time to think about the information they are asked and provide well-considered answers. By adding SurveyJS to your web application, you can make the client interviewing process not only faster, but more secure — as it lets you stay in control of all sensitive respondent data you receive.