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.


  1. Go to http://design.appmachine.com and login;
  2. Open an existing app or create a new app to which we will add the Form block;
  3. Click the "+ block" button;
  4. Select the "Pro" tab;
  5. Select the "Form" block;
  6. Click Add Block;
  7. Give a name to the new block, e.g. "Submit your photo", and click Finish;
  8. 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 customise the look and feel, the behaviour 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".
  9. Let's 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 button.
  10. 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 customise your controls and form.
  11. Once you have selected the Text field you need to adjust a few properties:
    1. Change the Label to "Your name";
    2. Change the Watermark to "Please enter your name";
    3. Change the Name to "ContestantName";
  12. 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 colours.
  13. We need to add some additional controls to the contest form, so repeat the few steps above and add the following controls:
    1. 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";
    2. Add a Date and Time Picker and change the Label to "When did you take this photo?" and change the Name to "DateTaken";
    3. Add a Text box and change the Label to "Describe your photo" and change the Name to "Description";
  14. Your Form should look somehow like this:
  15. Allright, we are almost there. Click Save to save the changes so far;
  16. Select the "Advanced" tab;
  17. 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;
  18. Click Save again, and you are all set and ready to launch the photo contest!
  19. 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.