PSG Forms Library - Forms Manager: How to build a simple Fish Fry/Dinner Event form

How to build a simple Fish Fry/Dinner Event form

There are many ways to create a great online form for an event or dinner you are hosting! Here is a sample form for a Fish Fry dinner event where people order their meal(s) and select a date and time for curbside pickup. The form totals all the meal costs and also gives them the option of adding a donation to their order. 

Link to Webinar form

  1. Click Forms to go to the Forms Manager then click Create New Form.
    0_Forms_CreateNew.png
  2. While you could start building from a template (such as Event Registration), this article will show you how to build from scratch. Select Start from Scratch, give your form a name, and click Start Building Form.
    1_Start_from_scratch_Name__fish_fry___the_Form_Start_New_Smaller.png
  3. To begin building the form:
    • First, let's add a Form Description to give basic information at the top of the form. Click Form Properties.
    • Then, add text about your event (day & time meals are available, what's included in a meal, etc) and click Done.
      Add_properties_such_as_desc_etc.png


                                          Add a Section Header
  4. Add a Section Header field to the form to visually group the meal order fields together.
    • Click Section Header on the right side and drag it onto the form. 
    • Then, in the window that appears change the name to "Meal Order."
      add_and_name_section_header_smaller.png


      Add several Calculated Amount fields and fill each in according to its purpose
  5. a) We will use a Calculated Amount field to allow people to enter how many meals they want and multiply it by the cost per meal.
    • Add a Calculated Amount field by clicking the Calculated Amount button and dragging it to the bottom of the form.
    • In the Field Properties window that appears, pattern your text after the following example. Then, select the appropriate fund for the money to go into under Fund. Then click Done.
      Name Adult Cod Dinner - 3 pc fish, roll, fries
      Item Name Adult Dinner
      Item Price $10.00

      *This will let them know what they are buying, change the text below the field, set the price, and set which fund those monies are allocated to, respectively.
      drag_calc_field_and_open_calc_properties.png
  1. b) Repeat the steps above to add a Child Dinner field. After filling in the fields, select the appropriate fund and click Done. 
    Name Child Cod Dinner - 1 pc fish, roll, fries
    Item Name Child Dinner
    Item Price $7
  1. c) Repeat the steps above to add a Cake field. After filling in the corresponding fields, select the appropriate fund and click Done. 
    Name Cake
    Item Name Piece of Cake
    Item Price $3
                                                       Add a divider
  2. Add a Divider field to separate the Meal Option section from the Pickup Details section. To do so click and drag the Divider field to the bottom of the form; then click Done.
    grab_divider.png
  3. Repeat Step 4 to add a section header field naming it "Pickup Details" for the next section.


    Add a required Dropdown field and several options
  4. We will use a Dropdown field to allow people to select what date they will pick up their order.
    • Add a Dropdown field by dragging the dropdown field on the right to the bottom of the form.
      grab_dropdown.png
    • In the Field Properties window that appears, change the name to "Pickup Date."
      name_dropdown_option.png
    • Then, click Options at the top. Click Add an Option and type in the first date, "March 4th. Repeat for the rest of the dates needed (3/11, 3/18, 3/25, 4/1, and 4/8).
      add_dropdown_options.png
    • Finally, click Validation at the top, and check the box to make this field required. Then click Done.
      dropdown_validation.png
  5. Repeat step 9 but for the Pickup Time. Name is Pickup Time, Options are 1-2pm, 2-3pm, 3-4pm, etc.
    add_dropdown_time_options.png
  6. We will use a Person's Name field to get the name of the person picking up the order.
    • Click and drag the Person's Name field to the bottom of the form.
    • Change the name of the field to "Pickup Person".
    • We're also going to add Help Text that will appear below the field making it clear whose name we're asking for.
      • The text we'll enter into the Help Text field is "Please enter the name of the person who will pick up your order".
    • Finally, we will make it required by clicking Validation and checking the Required box.
    • Then click Done.
      add_contact_info_person_s_name_on_top.png


  7. We will add a Phone number field for the pickup person.
    • Click and drag the Phone Number field into the form at the bottom.
    • In the Field properties, enter "Please enter the pickup person's phone number" into the Help text field. This will make sure they give you the right person's number. Also, under Validation, click Required. Then, click Done.
      add_phone_number_then_properties.png
  8. Now let's add an email for the pickup person.
    • Click and drag the Email field into the form at the bottom.
    • In the Field properties, enter "Please enter the pickup person's email" into the Help text field. This will make sure they give you the right person's email.
    • Also, under Validation, click Required. Then, click Done.
      add_email_field_and_help_message.png

  9. Repeat step #7 to add another Divider field to visually separate the Pickup Details section.
  10. We will add an optional donation field to the form. There are several ways to do this; we will add an Amount Button(s) field since it has a visually striking border to the button.
    • Click and drag the Amount Button(s) field to the bottom of the form.
    • In the field properties window, change the name to "Optional Lenten Donation and select the appropriate fund.
      optional_donation_amount.png
    • Under Line Items, delete the 3 suggested amount line items by clicking the trash can button next to each one.
      remove_line_items_from_optional_lenten_donation.png
    • Once you've deleted the line items, only the "Show Other Amount Item" box should remain, and it should be checked. You can also check the box that says, "Make other amount item tax-deductible." Then click Done.
      show_other_amount.png
  11. To add a logo, banner picture, or header image, click Add Header Image at the top of the form.
    • Drag the image from the file or...
      Drag_banner_image.png
    • In the window that appears, click Browse Files and select the image file you want to upload, then click Open. Then click Save. Note: the browse function automatically opens the Pictures file so for ease, you may want to save the image there before browsing.
      browse_and_select.png
  12. To change the color or main theme of a form, click the Advanced Theme button at the bottom. For this form, we'll select Citrus. It will change the font colors of the form.
    Advanced_Theme.png
    Note: the option for Advanced Theme may simply show as the current Form Theme. Either way, click the button to select a new theme.
    in_liueue_of_advanced_theme.png
  13. To add an email receipt/notification to the form submitter and parish staff:
    • Click Form Properties at the bottom of the page.
      • Click the Email tab.
      • Select "Send confirmation to form submitter.
      • Enter the church's email in the "From" box.
        properties_email.png

        Add the +All Response Details Placeholder
    • Click the Placeholder that says "+All Response Details". This will add all the form response details to the body of the email going to the form submitter.
      Add_response_details_placeholder.png
    • To add an additional email notification for office staff, click the "Add Additional Email Notification" button at the bottom.
      • Then select "Send notification to staff or volunteers.
        additional_email_notification.png
      • Enter in the church's email (or whoever you would like to send it to) into the "To" field. Then put the church's email in the "From" box.
        churchstaffemail.png
      • Just like the other email notification, click in the message box area, then click the Placeholder that says "+All Response Details". This will add all the form response details to the body of the email for the church contact. Then click Done. 
  14. Finally, click Save Changes, then click Publish. This will make your form usable as a webpage/live form.
    save_and_publish.png
  15. You can share your form with people to have them fill it out in multiple ways. All these options can be found in the Form Properties page highlighted at the bottom left in the above image.
    • QR Code: A coded picture for printed materials. People take a picture of it using their smartphone and it takes them to the form.
    • Embed code: A webmaster can put this on an existing webpage to put the form inside that page.
    • Direct link: This can be emailed to people, put on websites, texted to people. It takes them to the form.
      formpropertiesgeneral.png

 

 

 

 

 

 

 

 

 

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request