Review: Sandra

Frontend Forms

Review Phase

Case 1: Apply for job

  1. Go to the page Career.
  2. Apply for 1 job
  3. Go into the backend:
    • take a look at the latest entry
    • you should see: there is no info on the job you applied for. Thats what we want to change
  4. Now go to the from itself and edit it.
  5. Add fields, that can be used to identify the form when somebody applies.
    • What are you doing? What if your thought process?
    • Tip: you need to edit not only the form, but also where the form is injected.
    • If you need more help, scroll down
  6. Now try applying again
  7. Inspect the entry in the backend – do you see the difference?

Case 2: Update a movie

  1. Go to the page Search a movie.
  2. Go to a movie. Once there, click on the button “Edit movie”. We now want this form to update the current movie you are seeing – right in the frontend.
  3. Therefore edit the form.
  4. Inside the form, try to setup the fields for Genre & Country to automatically display the values that already exist.
    • Does it work?
    • Where did you have issues?
    • For more help, scroll down
  5. Now we need to setup the inputs so they are filling actual data into the post
  6. Edit the form. Scroll down to the metabox below the form. In “Interfaces” you can now enable “Posts”. Do that and adjust the options accordingly
    • Did you understand what to do?
    • Where did you have issues?
    • For more help, scroll down
  7. Now take a look at the movie in the frontend. I expect their to still be an issue.
    • Do you know what I mean?
    • In order for the form to know what movie to update, it needs to know the current “Post ID”.
    • There is a hidden field existing for that – but how do you get the value in there? Think about what you learned in Case 1 – or scroll down for Help.
  8. If you have setup everything correctly, you should be able to see the values of the current movie in the form in the frontend
    • Does it work?
    • Do you understand why?
    • Do you think you can now achieve something similar in your next project?

Help

for Case 1: Apply for job

  1. To make the form dynamic, first add 2 hidden fields. Make their values dynamic. Now you can map post fields onto these hidden fields in step 4.
  2. Now edit the editor template “Single item: Career“. You can just click “Edit Site” in the top admin bar while being on a job page in the frontend.
  3. Now focus the form. You can now convert it into a dynamic form.
  4. You should now be able to see the fields you have created in 1.) in the right sidebar. Map actual post fields (like post title) onto them and save the changes.

for Case 2: Update a movie

  1. Focus the fields for Genre & Country.
  2. In the right sidebar you can set the “entry type” in the panel “options”
  3. Try using the post title as the label and the post id as the value of the options

—

  1. Select “Movies” as posttype and “Published” as state
  2. Then map all the fields in the editor to post attributes.
  3. The Post ID is the most important one.
  4. To then get the form to actually update the current movie, ou have to:
    • first make the hidden-field for post-id dynamic inside the form
    • then go to the editor template “Single item: Movie“. You can just click “Edit Site” in the top admin bar while being on a movie page in the frontend.
    • Then focus the form.
    • Now map the post id to the hidden field and save.