Creating a cloud form in Wolfram Language is fairly straightforward, but it can be a little messy. In this tutorial, we’re going to learn how to streamline your code, create a basic form, deploy it, save and access submission data, send emails to submitters, manage permissions, and create basic reports of submitted data.
You can find a template for creating a form at the bottom of this post.
You can find a template for creating a form at the bottom of this post.
Before getting into this tutorial, you should:
◼
understand the structure of an Association
◼
know what a file path is
◼
Creating Questions
Creating Questions
We use the function FormFunction to make online forms. While the documentation gives an easy method to write a question, this method gets difficult to read and write when you make your form more complicated. It also introduces complications if you want to do anything with the submitted answers.
In order to write clean and easily readable code, we’re going to make each question with an Association. The most basic components we need for a question are the Key and the Label. In this case, the Key is the question tag, and the Label is what the form will display as the question.
When a user submits the form, each question will be saved within an Association, with the Key going to the submission for that question.
In[]:=
FormFunction["favoritecolor"<|"Label""What is your favorite color?"|>]
Out[]=
FormFunction
When submitted, the data collected would look like:
Out[]=
favoritecolorsubmitted answer
We can use other options to add more information to the question. For example, we can add help or hint text and make the question required or optional.
In[]:=
FormFunction["favoritecolor"<|"Label""What is your favorite color?","Help"->"give me some help","Hint"->"give me a hint","Required"->True|>]
Out[]=
FormFunction
By default, FormFunction questions accept a String as an input. But there are a lot of other question types you can use. You can change the question type with the “Interpreter” option. Let’s look at some examples of different question types.
Long Form Text Input
Long Form Text Input
Create a paragraph text box with TextArea.
In[]:=
FormFunction["longformtextquestion"<|"Interpreter""TextArea","Label""A question with a long form text response"|>]
Out[]=
FormFunction
Multiple choice questions
Multiple choice questions
You might want more than just a text response on your form, though. One of the simplest inputs is multiple choice. There are a few different options for presenting your multiple choice question. Three of the most common are in drop down menus (which are the default), radio buttons, and checkboxes to select multiple options.
For a multiple choice question, set the “Interpreter” to a list of choices. The choices can be any expression, like Strings, Images or Integers. The system will choose the most effective Control if you don’t set one. For a list of Strings, the default control is a drop down menu.
Drop Down Menu
Drop Down Menu
In[]:=
FormFunction["multiplechoice"<|"Label""A multiple choice question?","Interpreter"{"Choice 1","Choice 2","Choice 3"}|>]
Out[]=
FormFunction
RadioButtonBar
RadioButtonBar
We can specify how the multiple choice question looks using the Control option:
In[]:=
FormFunction["multiplechoice"<|"Label""A multiple choice question?","Interpreter"{"Choice 1","Choice 2","Choice 3"},"Control"RadioButtonBar|>]
Out[]=
FormFunction
Select Multiple Choices
Select Multiple Choices
We can also allow users to choose multiple answers by wrapping the list of choices with AnySubset:
In[]:=
FormFunction["multiplechoice"<|"Label""A multiple choice question?","Interpreter"AnySubset[{"Choice 1","Choice 2","Choice 3"}]|>]
Out[]=
FormFunction
You can limit the number of choices the user can make inside AnySubset, either with a single number for a maximum:
In[]:=
FormFunction["multiplechoice"<|"Label""A multiple choice question?","Interpreter"AnySubset[{"Choice 1","Choice 2","Choice 3"},2]|>]
Out[]=
FormFunction
or with a list for a minimum and a maximum:
In[]:=
FormFunction["multiplechoice"<|"Label""A multiple choice question?","Interpreter"AnySubset[{"Choice 1","Choice 2","Choice 3"},{1,2}]|>]
Different Inputs
Different Inputs
Numbers
Numbers
You can specify the type of input that the form will accept. For example, you could choose to only accept Integers.
Color Picker
Color Picker
Wolfram will display the most efficient way for the user to input their answer depending on the field. If you ask for a color, it will produce a color wheel or sliders for the user to select a color:
Upload an Image
Upload an Image
Uploading files will create a drag and drop box or a Browse button for the user to select a file.
This is the same method you would use to have the user upload a PDF or other file type.
Specific Interpreters
Specific Interpreters
The interpreter option includes a broad range of specific content. For example, you could set the interpreter to City, and then the user would have to enter the name of a city, which would be recorded as the Entity of that city. This works for any Input Interpreter, including email addresses, phone numbers, card numbers, ZIP codes, dates etc.
Compound Fields
Compound Fields
You might want to collect multiple pieces of data on the same line, which you can do in the Interpreter with a CompoundElement:
Repeating Fields
Repeating Fields
You might also want the user to be able to add more responses, which you can do with a RepeatingElement:
You can limit the number of responses the user can add:
Creating Multiple Questions
Creating Multiple Questions
To make a form with multiple questions, just add the Associations to a List within FormFunction:
Multiple Pages
Multiple Pages
Creating a multiple page form is as simple as splitting the questions into multiple lists. Each list of questions creates a separate page:
Deploying to a Specific Location
Deploying to a Specific Location
Before we get more complicated, let’s Deploy our form to the Cloud. We can specify a URL within the CloudDeploy function, after the FormFunction. In order to do this, we’ll need our username, and then we’ll need to choose a name for the form. The path you use will not just be the URL, but also where the form is stored in your cloud account file system.
If you haven’t deployed something recently, or ever, you will need to run CloudConnect with your email and password:
Permissions
Permissions
For anything we deploy to the cloud, we need to set the view permissions.
Public
Public
Setting Permissions to Public allows everyone to see the form.
Private
Private
Setting Permissions to Private makes it so that no one but you can see the form.
Authenticated
Authenticated
Setting Permissions to Authenticated means that you have to be logged into a Wolfram Cloud account to view and submit the form. This option is often the easiest if you want to be able to track individual user submissions across multiple forms.
For Authenticated, you may need to set the All option too, to allow users to Read, Write and Execute the form. This depends on your edition of Wolfram.
For Authenticated, you may need to set the All option too, to allow users to Read, Write and Execute the form. This depends on your edition of Wolfram.
Titles, Descriptions and HTML
Titles, Descriptions and HTML
Our form looks quite sad. Let’s add a title and a description. We set the title and description using AppearanceRules. AppearanceRules needs to appear within FormFunction, but outside the list of questions.
Adding more text
Adding more text
AppearanceRules only allow us to add text at the top of the form. Sometimes we might want more text at different points on the form. For example, between two questions. We can simply add text to the list, using Style to create titles etc.
Adding more text using HTML
Adding more text using HTML
If you want to get slightly more complicated, you can use HTML in your form. This allows you to do anything you would normally do with HTML.
If your HTML code includes “”, Wolfram will read those as starting and ending Strings, so you need to put a \ before each “.
Changing the layout and theme
Changing the layout and theme
By default, questions on the form are laid out Inline - the question and the answer box are on the same line. Usually, this is fine, but you may prefer to have the answer field underneath the question. We set this in AppearanceRules using ItemLayout:
We can also change the styling to one of the default options using PageTheme. PageTheme goes outside of AppearanceRules:
The built in stylesheets for PageTheme are White, Black, Blue and Red. You can also write your own CSS and apply it using an XMLTemplate, but that’s beyond the scope of this tutorial.
Storing Information in Cloud
Storing Information in Cloud
Right now, if a user submits the form, nothing happens. We don’t collect the data, or do anything with it. So let’s store the submitted information in the Cloud.
To do this, we need to save the results inside a Module, and then CloudPut the results into a folder.
If we use Authenticated for the Permissions, the form will automatically grab the user’s WolframID, which we can use for the file name. Alternatively, you could use Now to use the date and time of submission as a file name, generate a random number etc.
To do this, we need to save the results inside a Module, and then CloudPut the results into a folder.
If we use Authenticated for the Permissions, the form will automatically grab the user’s WolframID, which we can use for the file name. Alternatively, you could use Now to use the date and time of submission as a file name, generate a random number etc.
Getting stored information from Cloud
Getting stored information from Cloud
While you can now go to your cloud account and find the submission in the folder you set, you can also get this information programmatically. I submitted a response to the form for us to see.
You can get the list of objects within the folder using CloudObjects:
With the CloudObjects list, you can get the responses from all of the links. We only have one link here, but this code would get a list of all the response Associations.
If you need to maintain the WolframID or file name, you would just do:
Displaying a Post-Submission Message
Displaying a Post-Submission Message
Now that we have a fully functioning form with multiple question types, that saves data to a specific spot, let’s improve the user experience.
One way to do this is to display a post-submission message. This could simply say thank you, or it could display their answers.
One way to do this is to display a post-submission message. This could simply say thank you, or it could display their answers.
Static Text
Static Text
Let’s display a “thanks for filling out the form” message. The easiest way to make the message look good (centered, using the same style sheet as the rest of the form) is to use a blank GalleryView, which essentially creates a blank page which you can add a title and description to. This code should be inside the Module.
Showing User Responses
Showing User Responses
You could also display the user’s responses using a Grid. KeyValueMap allows us to get the response in the correct format for Grid:
So displaying the results would be:
Sending Emails
Sending Emails
A really useful feature of a form is sending emails - both to the submitting user and to you as the form owner.
You can even write the contents of the email programmatically. In this case, I added the submission email address. If you collected their name, you could personalize their email. You could email them the results of their form using the same Grid as we used to show user responses. There are lots of things you could do.
Sending an email is really easy, and we can do it within the Module. We send an email to the RequesterWolframID (only works if you used Authenticated Permissions), and to a static email address (yours).
Form Template
Form Template
Let’s pull it all together into a template you can use yourself:
There are a lot of other things you can do with forms, including creating dynamic forms, programmatically adding input, and using the AskFunction to generate new questions. You can also use the responses from a form to generate reports by creating and deploying a Notebook within the Module.
Hopefully this was useful, and allows you to create all the forms you might need!
CITE THIS NOTEBOOK
CITE THIS NOTEBOOK
Creating Cloud Forms Tutorial
by Rory Foulger
Wolfram Community, STAFF PICKS, January 11, 2024
https://community.wolfram.com/groups/-/m/t/3100441
by Rory Foulger
Wolfram Community, STAFF PICKS, January 11, 2024
https://community.wolfram.com/groups/-/m/t/3100441