Articles in this section

Website - How to Create and Edit Forms

foreUP Education
  • Updated
Follow

Overview

Forms on your foreUP website power everything from simple contact pages to detailed event or party requests. Using the CMS’s Form component, you can build custom forms to gather information from visitors and deliver that data directly to your team.

This guide covers how to:

  • Create a new form
  • Customize form fields
  • Configure notifications and confirmations
  • Embed the form on a webpage
  • Test and manage your forms

 

Prerequisites

  • You must have CMS admin access (dashboard / page editor rights) to view or manage forms.
  • For payment-enabled forms: appropriate payment processor (such as Stripe or Square) must be configured before using payments in forms.
  • Make sure the page where you plan to embed the form already exists (or create a new page first).

 

Adding Forms

Access the Forms Section

  • From your CMS Dashboard → Forms, or
  • While editing a page: use the utility bar at the top to access forms

Under Forms, you’ll see options such as:

  • All Forms — view, quick-edit, duplicate, preview, or delete existing forms
  • Add New  Form— start a new form from template, blank, or AI-generated
  • Entries — view submissions
  • Payments — manage payment-enabled forms
  • Tools — for reusable forms and advanced settings

 

Create a New Form

  1. Select Add New (or use the page-editor form option).
  2. Provide an internal Form Name (e.g., “Contact Us Form,” “Tournament Request,” etc.).
  3. Choose a start method:
    1. Use Template (recommended for quick setup)
    2. Blank Form (to build from scratch)
    3. AI-Generated Form (describe form needs, let CMS generate it)
  4. For most users, a “Simple Contact Form” template is ideal to start. Once selected, CMS builds the base form automatically.

 

Use the Form Editor to Customize Fields

The editor shows up with a sidebar of available fields and a drag-and-drop layout.

  • Standard fields: single-line text, paragraph, dropdowns, multiple choice, etc.
  • Advanced fields: date/time picker, file upload, password, layout blocks, rich text, HTML — giving you maximum flexibility.

To add a field: click or drag the field into the form area. To reorder, drag fields up or down.

 

Example: Adding a “Date of Birth” Field

  • Drag a Date/Time picker under the email field.
  • Edit the field:
    • Change Label → Date of Birth
    • Under Format: choose Date only (remove time)
    • Mark as Required (if needed)
    • Optionally set size, placeholder text, default values, and limit selectable dates (e.g., disable future dates)

 

Example: Adding a “Did you have fun?” Multiple-Choice Field

  • Add a Multiple Choice field.
  • Edit it: set the label, add 2–3 options (e.g. Yes / No / Kind of), mark required, optionally adjust layout (inline, two-column, etc).

Note: Each field type offers different configuration options; exploring “General,” “Advanced,” and “Logic” tabs lets you fine-tune behavior and presentation.

 

Configure Form-Level Settings

At the top-left of the editor, you’ll see tabs such as Setup, Fields, Settings, and Payments.

  • Setup — internal name, template used
  • Fields — the form fields you configured
  • Settings — overall behavior: notifications, confirmations, spam protection, theme
  • Payments — only relevant when collecting payments via the form

Settings You Should Configure

  • Spam Protection: Built in; contact foreUP support if you notice spam flood.
  • Theme: Forms usually inherit your site’s style; only tweak if needed.
  • Notifications: Set who gets submission emails (internal admins, team members).
  • Confirmations: Customize the message shown to users after they submit.

 

Managing Email Notifications

  1. In Settings → Notifications, edit the default notification or create new ones.
  2. Key fields:
    1. Send to — add one or multiple emails (comma separated) to receive form submissions.
    2. Subject, From Name, From Email, Reply-To — ensure “Reply-To” uses the email field from the form so your team can reply directly to the user.
    3. Message Body — by default, include a shortcode like [All Fields] to embed all submitted data; optionally add custom intro text.
  3. Additional options: enable file uploads, attach CSVs, create separate confirmation emails to the user (e.g. “Thank you for contacting us!”).

 

Configuring the Confirmation Message

Under Settings → Confirmations, set what the user sees after submitting:

  • A simple thank-you message (e.g. “Thanks for contacting us! We will respond soon.”)
  • Optionally redirect to a dedicated “Thank You” page

Once finished creating t he form, select Save in the top right hand corner.

 

Embedding the Form on a Page

After saving the form:

  • Use the Embed option to insert the form on a page:
    • Choose select Existing Page or Create New Page
    • If adding the form to an existing page, use the dropdown to select the desired page and then click Let’s Go!
  • Go to Pages → [page name], open page editor, add a Form block/component, and select the form you created

Once embedded and saved, the form is live on your website.

 

Testing & Publishing Your Form

  1. Visit the live page with the form.
  2. Fill out and submit — use test info (name, email, DOB, etc.).
  3. Verify:
    1. On-page confirmation displays correctly
    2. Notification email is received by intended recipient(s)
    3. Reply-to works (if you reply, does the message go to the test email)

If all checks out, your form is ready for real submissions.

 

Editing or Updating an Existing Form

  • Navigate to Forms → All Forms
  • Click Edit beside the form you wish to modify
  • You can:
    • Add/remove fields
    • Change field labels or options
    • Adjust required settings and validation
    • Update notifications or confirmations
  • Save changes, and retest if necessary — especially if you changed key fields or notifications

 

Tips & Best Practices

  • Keep your form short and straightforward — fewer fields typically lead to higher submission rates.
  • Label fields clearly and include placeholder/hint text to reduce user error and support accessibility.
  • Use contrasting, clearly-visible button styling for your CTA (e.g., “Submit”, “Request Info”).
  • Include a privacy notice or consent checkbox if you collect personal data (to ensure compliance).
  • Regularly monitor submission routing — occasionally test the form to confirm you receive responses and your email filters have not blocked them.
  • If using integrations (CRM, sheets), ensure the mapping of fields remains consistent as you update the form over time.

Related articles