How to build your own sample form

Follow

To build the sample from, you need the extended version of the powerpoint plugin

Building a sample form is very easy and useful in many ways.

This is what you need to know / learn in order to complete this case:

- Survey elements - Learn more
- Digital signature - Learn more
- Computations - Learn more

In our example we will create 3 slides: 1) Credentials part to get the customer's information. 2) Samples & Date, to get the required examples and the time that it needs to be delivered and 3) The overview of the order to be gathered.

Step 1: Create your layout & design

Start by creating your layout using the master slide. Use a background that suits your sample form. If needed add your company logo.

Go to view > master slide

Step 2: Create your form. 

In this example we will ask for a couple of credentials such as name, email and address. You can always modify this like you wish.

Tip: once you've created your first open question, you can copy and paste it to create your forms faster.

Make these fields mandatory and provide a button to go to the next slide.

Step 3: Ask for the time of delivery.

We use check boxes to ask the customer when this would suit them best. We've created a table for the days and time in PowerPoint. For the check boxes we use the survey elements of our PowerPoint Plugin.

We fill in a question but we hide it in the PowerPoint by setting the size to 1. This we do to capture the question in our submit results and at the same time hide it from our slide. Do this for all the possible time frames.

 Step 4: The sample order form

In this step we will build a simple check box survey to see which samples are being ordered.

 Provide a back button and a next button using hyperlinks on shapes. Discover more.

This is what we have for the 2nd slide:

Step 5: Create the overview slide

In this slide we want to capture all the provided data and get it in 1 clean slide.

Use the result summary function to fetch the data given in the survey elements on the previous slides. Than select which data you want to show for the result summary. Do this for all the different blocks.

Insert a digital signature, a date field and use a submit button to finish the slide:

We now have a perfectly working sample form! Congratulations!

But wait, there's more (if you like).

We want the user to decide if the delivery address is different from their provided address. So we provide 3 new fields on the 1st slide: Delivery Address, Postal Code and City. We use a check box to ask the customer if the delivery address is different:

To finalize everything: The computations!

With computations you can literally do anything. It's custom Javascript and html that you add to your presentation to create interactive things. 

We will use the computations for 2 things:

1) Hide and show fields:
The new delivery fields need to be hidden if the delivery address is not different.

2) Attach a product document to the email.
We want to add a specific document based on the selected product.

Hide and show fields

Open computations and use the .hide function to hide and show the fields in the app:

As you see, we use the survey label to check if it's selected or not. Than we hide the fields using CSS and Javascript.

This is the code:

if(data[DeliveryAddressIsDifferent] == 'Yes') {
$('.s4m12c, .s4m11c, .s4m10c, .s4m9c').show();
}
else {
$('.s4m12c, .s4m11c, .s4m10c, .s4m9c').hide();
}

Attach a document to the email based on the selection

Add new lines to the computations checking if something is checked. If so, you want to add something to the mail body. In this case we want to add a link to a document in the mail.

This is how it looks:

Basically we first provide a variable that adds text to the mail body. The \r\n provides new lines in Javascript to modify the layout of the email.

Next we check if the label "product1" is checked. If this is the case we want to add "Product1 10gr SMPC - and the link of that document to the email. 

Do this for all your products.

Finalize by equalizing the variable: 

data[mailBody] = mailContent;

This will be your end result (you can copy the code):

if(data[DeliveryAddressIsDifferent] == 'Yes') {
$('.s4m12c, .s4m11c, .s4m10c, .s4m9c').show();
}
else {
$('.s4m12c, .s4m11c, .s4m10c, .s4m9c').hide();
}

var mailContent = "Dear Customer, \r\n \r\n Attached you'll find the requested samples, as well as the SMP's.\r\n \r\n";

if(data[Product1] != undefined && data[Product1] == 2){
mailContent += "Product1 10gr SmPC - https://goo.gl/9h00cx \r\n \r\n";
}

if(data[Product2] != undefined && data[Product2] == 2){
mailContent += "Product2 30gr SmPC - http://goo.gl/q8bDHw \r\n \r\n";
}

if(data[Product3] != undefined && data[Product3] == 2){
mailContent += "Product3 30gr SmPC - http://goo.gl/bQcD5J ";
}

data[mailBody] = mailContent; 

You've completed the full case! Good job!

You can download the final result of our sample form here.

 

Enjoyed reading the tutorial?

You may contact us for new cases or project issues at support@dink.eu

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk