Building Your First Form Template

Learning Objectives

After completing this tutorial, you’ll be able to:

  • Create a New Form Template
  • Add standard sections and a variety of questions in the Template Builder
  • Create your first Form!

Prerequisites: Install and Register Youreka

Haven’t Installed Youreka yet? Visit the Install Guide

Time Required: 10 minutes


Welcome to Youreka!

Youreka can be used to build a variety of forms for any use case industry. For now, we’ll start with a use case in the consumer goods and retail industry. In just a few steps, you’ll build your first form template and learn the basic functionality of our template builder so you can create your own custom form templates in the future.

In this exercise, you’ll build a form template for a fictitious client. The client, Arabica Coffee Co. is a small specialty coffee company based in Austin, TX. They source and sell fair trade coffee roasts and products in over 300 grocery stores and retail outlets across the country.

Arabica Coffee Pic.jpg

As a small company competing in a crowded space, they differentiate by offering a wide variety of complementary coffee products like cookies and coffee-infused chocolate products and they’re always looking for opportunities to be more competitive!

Arabica has a team of field sales reps that conducts store visits to audit product inventories in each store. They want to use Youreka mobile forms to capture data on things like which Arabica coffee products are available in which stores, the quantity of each, prices, shelf locations and product placements.

With each store visit, they also hope to uncover information about individual stores including the store’s contact information, competition, pricing consistency, and upsell or cross-sell opportunities for new product displays to help drive sales.

For these tutorials, we’ll show how to build a Youreka form to help Arabica achieve these goals. We will create a sophisticated template and make it available across a variety of platforms: The Youreka Mobile App, Salesforce1, and even from a Public site or via URL link


Create a New Form Template

  1. Once logged into your Org, navigate to Youreka from your App List.
    • In Classic
      1. From the app list, select Youreka
    • In Lightning Experience (LEX)
      1. Open the App Launcher
      2. Select Youreka from the list of All Apps.
  2. From your list of navigation tabs, select Form Templates and select New.
  3. Name the new template Arabica Coffee Store Visit and leave Standard Template as the selected option. Click OK. You can always go back and edit the name later.
  4. Drag and Drop a new section into the canvas and name it Store Contact Information. Set the number of columns as 2, leave Page Break unchecked, and click Save. This is a step you need to perform before adding any questions to your canvas. Each question needs to live inside of a defined section.
    New Section.jpg
  5. Now we will add questions to our new section which captures Account and Contact information of each store. In the right column we will have Contact-related questions and in the left column will be Account-related questions. Start by Dragging and Dropping a new Question into the Store Contact Information section in the Right column.
    1. Name the question Store Manager First Name  (Defined as the Question Text)
    2. Choose Text as the Type from the picklist menu. This will offer a simple text input on the form, but notice the 17 other options for Question Types. We’ll show you how to leverage them throughout these tutorials.
    3. Ignore the formatting options on the right side of the modal at this stage, and leave all other options as the default.
    4. Click Save.
  6. Repeat step 4 for the following questions as well, noting the Location, Question Text and Type. All other options should remain default.
    Column Question Text Type
    Right Store Manager Last Name Text
    Right Phone Number Phone
    Right Email Address Email
    Left Account Name Text
    Left Street Address Text
    Left City Text
    Left State Text
    Left Account Phone Phone
  7. The Store Contact Information section should now look like this.

    Youreka form Store Contact Info.jpg

Congrats! You just built your first section. Arabica’s store visit reps will now have a section of the form where they can capture the store contact information. These fields don’t yet map to fields in Salesforce, but we’ll show you how to make these quick adjustments in our Field Links Tutorial.


Add a Second Section

Now we will build a section that will capture product-related information to help drive Arabica’s decision-making. Drag and drop a New Section below the Store Contact Information section with the title “General Information” with only one column and add the following questions:

  1. Arabica first wants to know how their prices compare to competitor prices so that they can ensure the store aligns with Arabica’s pricing strategy. Drag and Drop a new question into the section workspace with the Question Text: How do Arabica Coffee prices compare to other coffee brands?
    1. Set the Type to Radio Button List
    2. Leave the Create Discovery checkbox checked
    3. Enter the following options (Click Enter on your keyboard or the Add Another Value button to add another value)
      • Option 1: Higher than Average
      • Option 2: Average
      • Option 3: Lower than Average
    4. Choose button values for each option.
    5. Click Save
  1. Now Arabica wants to know which other complementary products are present so they can determine cross-selling opportunities. Drag and Drop a new question into the section workspace with the Question Text: Which of the following complementary coffee products are present in the aisle?
    1. Set the Type to Checkbox List
    2. Leave the Create Discovery checkbox checked
    3. Enter the following options:
      • Option 1: Coffee Filters
      • Option 2: Sugar or Sweeteners
      • Option 3: Coffee Stirrers
      • Option 4: Creamer
      • Option 5: Coffee Snacks
      • Option 6: Cocoa
    4. Click Save
  2. If there are coffee snacks present, Arabica wants to capture specifics. Drag and Drop a new question into the section workspace below your checkbox list with the Question Text: Which coffee snacks are available?
    1. Set the Type to Multi-select Picklist
    2. Leave the Create Discovery checkbox checked
    3. Enter the following options:
      • Option 1: Donuts or Pastries
      • Option 2: Cookies or Biscuits
      • Option 3: Nuts or Granola
      • Option 4: Chocolate
      • Option 5: Other
    4. Click Save
  3. If the rep selects ‘Other’ we want to give them the opportunity to add notes. Drag and Drop a new question into the section workspace with the Question Text: Specify Other
    1. Set the Type to Text
    2. Click Save
  4. Lastly, Arabica wishes to know if there is space available for cross-selling one of their product displays and if so, where? Drag and Drop a new question into the section workspace with the Question Text: Is there Display Real Estate available?
    1. Set the Type to Yes/No
    2. Leave the Create Discovery checkbox checked
    3. Click Save 
  5. Drag and Drop a new question into the section workspace below your Yes/No question with the Question Text: Where is the Display Real Estate located?
    1. Set the Type to Checkbox List
    2. Leave the Create Discovery checkbox checked
    3. Enter the following options:
      • Option 1: End Aisle Display
      • Option 2: Shelf Space
      • Option 3: Open Floor Display
      • Option 4: Checkout Display
    4. Click Save
  6. Drag and Drop a final question into the General Information section with the Question Text: Please take a Photo of the Aisle:
    1. Set the Type to Attachment/Photo question type which will prompt the end user to either take a photo on their device or upload an attachment as a part of the form.
    2. Choose to Auto-Name with Date/Time so that the photos taken are automatically named.
    3. Click Save.

Add a Tooltip

Tooltips provide concise descriptive text to your form filler to provide further explanation or value to a question. This simple yet powerful option allows you to elaborate on helpful details that aren’t directly stated in a question. And these tooltips aren’t just restricted to simple text either. Users can add formatting such as bold text, bulleted lists, as well as links and images.

  1. To add a tooltip to a question, check the Display a Tooltip checkbox in the question modal. A box will appear for you to add your Tooltip Label which you can use to elaborate on or provide guidance around taking a photo of the aisle. Add the tooltip label: Take multiple photos if products are spread out.

  2. When your user is completing the form, they need only hover over the small ‘i’ circle next to the question text and the Tooltip will appear:2017-07-25.png
  3. The General Information section should now look like this.

    Photo attachment question type final section.jpg

  4. When all fields are created, click Save and then click Preview (buttons located at the top of the template builder) to preview your form. This option gives you the ability to preview your template as you build so you can see the end-user view of your final form. Once previewed, click close in the top right-hand corner of the preview box to navigate back to the form template builder screen. Close out of Preview after confirming your looks the way you intended.Store Contact Info-1.jpg

    Youreka arabica coffee visit example.jpg

  5. Since we’re satisfied with the form template, click Publish on the form builder screen to publish our new template for use. Note: If you see a Continue button instead of Publish, uncheck Show Smart Features.

  6. This saves our template and navigates back to our Form Template Detail page where we will create a new form from this template. We have now created our first form template and can create our first form.

Create Your First Form

  1. To create a new form, click + New Form from the Form Template Detail page.

  2. This will take us to the Form Detail Page where we will be able to preview our questions. To make inputs on the form, click the blue Edit button.
  3. Fill in the form with Mock Data to test the process of creating a new form. When finished, press the Save button at the top of your form to save your inputs.

    Step 25_First Form Tutorial.jpg

  4. You will be returned to the Form Detail Page. From here we can see the details of our form and the information we entered.
  5. There is a settings option to the right of the Form name that contains functionality we will demonstrate in future tutorials.
  6. Navigate back to our Form Template Detail Page by clicking the Navigate To option to the left of the Form name.Youreka form arabica coffee store visit4.jpg
  7. From the Form Template Detail Page, the completed form is now available under the list of forms.

     

Congratulations! You’ve just created your First Form Template & Form!

Where to next? See what else our Academy has to offer!

Add branching logic to your template with our Show and Hide Questions Tutorial or use your form to Update Existing Salesforce Records with our Field Links Tutorial.

 

We use cookies to ensure that we give you the best experience on our website.
If you continue to use this site we will assume that you are happy with it.