The Form block gives you the ability to design a custom form so users of your app can submit data to you. When using the Form block AppMachine will take care of the data storage, so you don't have to host a web service.
In this How To we will guide you through the process of adding and configuring the Form block. In addition there's an extra feature explained at the end. This new feature (as of november 2019) allows you to send the user directly to a different block and skip the confirmation message.
How To
In this How To we will create a simple photo contest application. So the users of the app should be able to upload their photo, along with their name, a description of the photo etc.
- Go to http://design.appmachine.com and login;
- Open an existing app or create a new app to which we will add the Form block;
- Click the "+ block" button;
- Select the "Pro" tab;
- Select the "Form" block;
- Click Add Block;
- Give a name to the new block, e.g. "Submit your photo", and click Finish;
- The block will be added and you will see the Form Editor. The form editor lets you drag controls onto your Form. You will be able to configure each control so you can customize the look and feel, the behavior and the name of the control. The submit button is already available on the screen. Do not change the "Name" property of the Submit button. This should always remain "btnSubmit".
- Lets start with some basic information about the contestant, so add a Text field. To add a control, hover over the control, click, and drag it onto the mock-up phone next to the list of controls, above the Submit buton.
- Select the Text field control by clicking it;
Note: When you select a control, you will be able to see all the configuration options for the control in the left pane. Use these options to customize your controls and form. - Once you have selected the Text field you need to adjust a few properties:
- Change the Label to "Your name";
- Change the Watermark to "Please enter your name";
- Change the Name to "ContestantName";
- While designing your form you see the result live via the simulator at the right side of your screen. This is really useful while working with margins and colors.
- We need to add some additional controls to the contest form, so repeat the few steps above and add the following controls:
- Add an Image Picker this will let the user select an image from their camera roll or take a photo directly from within the app. Change the Label to "Your photo" and change the Name to "Photo";
- Add a Date and Time Picker and change the Label to "When did you take this photo?" and change the Name to "DateTaken";
- Add a Text box and change the Label to "Describe your photo" and change the Name to "Description";
- Your Form should look somehow like this:
- Allright, we are almost there. Click Save to save the changes so far;
- Select the "Advanced" tab;
- If you would like to receive a notification email when the user submits the form, fill out your Email address in the Send results to section;
- Click Save again, and you are all set and ready to launch the photo contest!
- When you open the app using the AppMachine previewer you will be able to use your device's camera to take a photo or upload one of your existing photos.
Reviewing the results
You can see the filled in forms at the Data tab. All the results will be shown in a grid. We will soon add the ability to export the results to an Excel document.
Extra feature: Navigating to other block after completing form
We've built a new feature in the Form (Beta) block that allows you to let users navigate to a specific building block after completing the form and skip the confirmation message. There are two methods that you can use. The first method will navigate the user to the block you've chosen and upon hitting the back-button the user will return to the homescreen of the app. The second method will return the user to the Form block upon hitting the back-button.
GoTo homescreen method
1. Since you've already completed the form in the steps listed above, you can directly navigate to the "Advanced" tab of your Form (beta) block. In the Description box for the confirmation message, click the block link icon: 
2. Select the block you want to navigate the user to from the list: 
3. It will look like this: 
And you're done! Save it and send an update to your app.
Insert/Inject method
1. Perform the three steps from the GoTo homescreen method first.
2. Open the HTML view of the Description box: 
3. Add #insert or #inject directly after the blockname in the block:// link exactly like this: 
Both options will work the same way.
All done! Save your work and update your app.
Comments
20 comments
It would be nice to have more form elements like radio buttons as an example. On a phone based form you should try and limit the amount of typing and design something that allows the user to 'select' rather than 'type'. Are you planning to add more elements like this soon?
The submit button doesn't work in the emulator. Neither can i set any properties where to store the data so i can use this later on in a webservice.
+1 for Johan de Lange's comment.
@Johan we've already included a dropdown / pickerwheel in the next release. And I will put the radio buttons on the list ;-) Thanks for your suggestions.
@Remco if you would like to use your own web service to submit data, don't add a Form block but add a Web Service block, and make sure to set the HTTP Method to Post. Enter all the fields of your form as parameters for your Web Service.
Thanks Matthijs, but what if i want the app to remember the entered data? Say for example when i ask the user to enter their hometown i want the app to remember that so that when the user goes to another tab to ask for details about the weather they get both their hometown and current locations weather (of course from a service). I don't want them to enter their hometown at every request.
@Remco I'm happy to let you know that we are already working on this feature and it will probably be available in our next release.
@Matthijs Sounds great! I'm eager to see the next release.
The image picker is working on iPhone previewer but not on android previewer. I tried on android 4.0 phone and samsung mega 4.22. Still waiting for solution in support.
We have just released new versions of both the iOS and Android previewer ( https://apps.appmachine.com/previewer), can you please confirm the issue has been resolved in the Android previewer. If not please send us an email at support@appmachine.com and mention me (Matthijs Koopman).
In our next version (1.0.4) of the Windows Phone Previewer we've also added full support for the Form block.
My apps only send email once. All sub sequence input doesn't works.
I prefer data not saved but sent directly to email.
It's 6 months ago now since last post.
I wonder whether it is now possible to receive the data in your e-mail inbox on submission? So not only by entering the appmachine.
Also I'm not getting any notifications in the preview modus.
Hi Guys every time I use the dropdown box the information I captured disappears and I am doing this in Google Chrome as recommended. Why would this happend or should I change the value and and what should I change the value to?
I too keep getting my drop down data lost even if I save and save again. On a different note, is is possible to export all your submissions into one excel sheet for analyzing data. I only see how to export one at a time and this will not be sufficient. For instance if I have a short survey for each session of a conference, my client going to want to gather all this feedback into one sheet.
hi
about saving data offline when it can be available.
(when user do not have internet can use App. when he get internet directly App make replication to AppMachine database)
Hi
How can I reuse the information in the forms app?
They appear in the "data tab" and are contained in a dataprovider but do not know which module to use to list them on the app itself
is there anyway to make the dropdown able to do multiple selections?
is it possible to make certain data required before sending? I would like to use it as an evaluation form and need some data to be mandatory. thank you
Hi Martijn,
If you take a look at this screenshot you can see how to mark fields as required.
https://support.appmachine.com/hc/article_attachments/203338744/Mark%20fields%20as%20required.png
Hi,
Anyone an idea how I can transfer the image over a restservice?
Please sign in to leave a comment.