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 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.