AppMachine Help Center

How can we help you?

Follow

Form (Beta)

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.

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;
    Schermafbeelding_2014-04-09_om_17.57.03.png
  4. Select the "Pro" tab;
    Screenshot_028.png
  5. Select the "Form" block;
    Schermafbeelding_2014-04-09_om_17.58.31.png
  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 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".
    Schermafbeelding_2014-04-09_om_18.02.10.png
  9. 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.
    Schermafbeelding_2014-04-09_om_18.04.03.png
  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 customize 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";
      Schermafbeelding_2014-04-09_om_18.07.32.png
    2. Change the Watermark to "Please enter your name";
      Schermafbeelding_2014-04-09_om_18.07.36.png
    3. Change the Name to "ContestantName";
      Schermafbeelding_2014-04-09_om_18.15.56.png
  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 colors.
    Schermafbeelding_2014-04-09_om_18.09.28.png
  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:
    Schermafbeelding_2014-04-09_om_18.16.40.png
  15. Allright, we are almost there. Click Save to save the changes so far;
  16. Select the "Advanced" tab;
    Schermafbeelding_2014-04-09_om_18.17.52.png
  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;
    Schermafbeelding_2014-04-09_om_18.19.08.png
  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.

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments

  • Avatar
    Johan de Lange

    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?

  • Avatar
    Remco Boerma

    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. 

  • Avatar
    Remco Boerma

    +1 for Johan de Lange's comment.

  • Avatar
    Matthijs Koopman

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

  • Avatar
    Remco Boerma

    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.

     

  • Avatar
    Matthijs Koopman

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

  • Avatar
    Remco Boerma

    @Matthijs Sounds great! I'm eager to see the next release. 

  • Avatar
    man Rashid

    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.

  • Avatar
    Matthijs Koopman

    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.

  • Avatar
    UUM Dev

    My apps only send email once. All sub sequence input doesn't works.

  • Avatar
    UUM Dev

    I prefer data not saved but sent directly to email.

  • Avatar
    Jon de Wit

    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.

  • Avatar
    Douglas

    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?

  • Avatar
    Jessica Schultz

    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.

  • Avatar
    Charles leveillee

    it will great when the user send a picture it will go on a Facebook page

  • Avatar
    hussam jblawi

    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)

  • Avatar
    Paulo Arthur C. Filho

    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

  • Avatar
    3t.web.design

    is there anyway to make the dropdown able to do multiple selections?

  • Avatar
    Martijn Kiszelnik

    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

  • Avatar
    Matthijs Koopman

    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

  • Avatar
    SK

    Hi,

    Anyone an idea how I can transfer the image over a restservice?

Powered by Zendesk