Creating a simple cloud form using Mathematica

Creating a Simple Cloud Form Using Mathematica

Posted in Web Development on October 2021

Mathematica is a robust computational software that’s been around for a very long time. Now with the advent of the Wolfram Cloud, Mathematica is now able to do more various types of tasks. Specifically, it makes simple cloud forms. Whether you’re an avid Mathematica user or just looking for a simple way to make a cloud form, I’ve documented how to utilize this.

This tutorial will be broken down into six separate sections: FormObject, AppearanceRules, CSS, Email, Thank You Message, and Deploy Form. I’ve found that this is the easiest way to understand, implement, and train people on how to create Mathematica cloud forms.

Prerequisite

You can do this in a desktop notebook or the Wolfram Cloud, but, most importantly, you’ll need a cloud account to deploy a form. You’re unable to only use Mathematica desktop, since this cloud form needs to be deployed on the web. If you don’t have a cloud account, you can download a free trial.

FormObject

You’ll need to start with something called FormObject. This displays form fields that can be filled in, either by entering text or using other controls. The basics are as follows:

1. Label is used for captioning a specified element.

2. Required is for making an element required or not.

3. Interpreter represents an object that can be applied to an input. Examples include: String, TextArea, and EmailAddress. 

fo = FormObject[<|
   "name" -> <|
     "Label" -> "Name",
      "Interpreter" -> "String",
     "Required" -> True
     |>,
   "email" -> <|
     "Label" -> "Email",
     "Interpreter" -> "EmailAddress",
      "Required" -> True
     |>,
   "message" -> <|
     "Label" -> "How can we help you?",
     "Interpreter" -> "TextArea",
     "Required" -> True
     |>
   |>,

You’ll notice there’s fo and text like "name" -> in the code as well. These are variables, that will be referenced later.

Next, we’ll add a title and description.

Read more about FormObject

AppearanceRules

AppearanceRules is an option for generating the overall appearance of the form. These are the four main rules you’ll need to know:

1. "Title" creates the overall title for the form.

2. "Description" is text that can be included at the top of the form.

3. "IncludedCSS" gives you the ability to create custom CSS, which in this example I created ContactCSS.

4. "ItemLayout" layout for a single element, which can be Vertical or Horizontal. 

AppearanceRules -> <|
   "Title" -> "Contact Us",
   "Description" -> 
    "Do you have a question? Fill out the form below, and someone will answer shortly.",
   "IncludedCSS" -> ContactCSS,
   "ItemLayout" -> "Vertical"
   |>
 ]

Read more about AppearanceRules

CSS

This section should be pretty self-explanatory, as it controls your form’s styles. 

ContactCSS = "
	body { background: #fff; }
	.panel, .panel-default, .panel-footer {
		background: #fff;
		border: 0;
		box-shadow: none;
	}
	.form-object > .form-title {
		color: #dd1100;
		font-size: 4rem;
		font-weight: 400;
	}
";

Email

This section covers where to send the email. Most of this should be easy to understand. The only pieces that might be confusing are within the "Body". "Name: ", "Email: ", and "Message: " are all simple text strings, and their accompanied variables are what the user inputted into the form. This will allow the person receiving the email know what was filled out. 

form := FormFunction[fo,
   (
     SendMail[<|
       "To" -> {"nobody@gmail.com"},
       "Subject" -> "SUBJECT", 
       "Body" -> StringJoin[
         "Name: ", #name, "\n",
         "Email: ", #email, "\n",
         "Message: ", #message, "\n"
         ]
       |>];
      HTTPResponse[acknowledgement]
     ) &
   ];

Thank You Message

acknowledgement = "<h2>Thank you for submitting your request. You will be contacted soon regarding its status.</h2>"

The acknowledgement variable was set in the Email section. After submission, the user will receive an acknowledgement message. In this case, I used a H2 and left the styles as-is, but the appearance can be changed within the CSS.

Deploy Form

form1 = CloudObject["contact-us"]
enco = CloudDeploy[form, form1, Permissions -> "Public"]

I used CloudObject to create the name of this form, contact-us. Meanwhile, the rest are variables and permissions.

End Result

In order to run the code, you’ll need to evaluate the notebook. In a desktop notebook, you’ll find this in the toolbar: Evaluation > Evaluate Notebook. In the cloud, it will be: Evaluation > Evaluate All Cells.

The “demo” link below is what was created from the code above. I’ve also included a notebook, in case there was any confusion trying to write within a notebook.

DEMO

Download Notebook

Back To Top