Super Forms
  • Drag & Drop Form Builder for WordPress
  • Quick start
    • Installation
    • Registration
    • Starting your 15 day trial
    • Purchasing a license
    • Activating a license
    • First time setup
    • Secure file uploads
    • Creating a form
    • Adding form elements
    • Editing elements
    • Publishing your form
    • FAQ
  • Account
    • Dashboard
      • Your Invoices
      • Billing details
      • Your Licenses
      • E-mail Notification
      • Password reset
      • Cancel subscription
  • Common problems
    • Common problems
      • Email delivery problems
        • Why is my form not sending emails?
        • Why are emails going into spam folder/inbox?
      • File upload problems
      • Session expired
      • reCaptcha Troubleshooting – Fix “Not Loading” & Verification Errors
  • Elements
    • Layout elements
      • Column/Grid
      • Multi-part / step
    • Form elements
      • Calculator
      • Signature
      • File upload
      • Datepicker
      • Variable field
      • Dropdown
      • Text field
      • Autosuggest
      • Keywords
      • Radio button
      • Keyword Field
      • Button
      • Audio Recording (microphone)
    • HTML elements
      • Heading
      • HTML (raw)
      • Image
      • TinyMCE
      • Divider
      • Spacer
      • PDF page break
      • Google map element WordPress form
  • Features
    • Basic
      • Confirmations emails
      • Save Form Progression (continue later)
      • Build In Translation System
      • Populate form
      • Popups
      • Import & Export
      • Hide form after submitting
      • Hide or lock out user from your forms
      • Validation
    • Advanced
      • WordPress form with Google sheets dropdown
      • Custom registration form for WordPress
      • Custom login form for WordPress
      • Custom lost password form for WordPress
      • Update current logged in user
      • Secrets
      • Prevent duplicate entries
      • Lock & hide form
      • Password protect
      • Conditional Logic
      • Tags system
      • Address lookup/auto complete
      • Analytics Tracking
      • Conversion Tracking
      • Distance & Duration Calculation
      • If statements
      • Foreach loops
      • E-mail Reminders
      • Variable Fields
      • Form templates - Include elements into other forms - WordPress
      • Transferring data from one form to another
    • Integrations
      • PDF Generator
      • Listings
      • WooCommerce Checkout
        • Fixed price checkout
        • Dynamic price checkout
        • Variable product checkout (variations)
        • Replacing the "Add to cart" on a product page with a form
        • Hiding product from shop and order via custom form
      • PayPal
      • MailChimp
      • Mailster
      • Zapier
      • Stripe (BETA)
      • WooCommerce Instant Order (in progress)
  • Tutorials
    • WordPress Form to Google Sheet Integration
    • GDPR Consent / Terms agreement
    • How to update the plugin
    • Sending emails to specific department for WordPress contact forms
  • Example Forms for WordPress
    • Booking 24 hours ahead of time
  • Developers
    • Code Examples
      • Lookup City by Zipcode for your WordPress form
      • Audio Recording Field
      • Custom API Phone Number Validation for Your WordPress Form
      • Updating WordPress user meta data after login
      • Automatically redirecting to next step after displaying text or a progress bar
      • Dropdown with groups (categories)
      • Prevent form submission based on entered field values
      • Track form submissions with GTM (Google Tag Manager)
      • Tracking Multi-part steps with Google Analytics
      • Tracking Multi-part steps with GTM data layer (dataLayer.push)
      • Track form submissions with third party
      • Compare input field value with database value
      • Insert form data into a custom database table
      • Delete database row after contact entry is deleted in WordPress
      • Limited date availability (slots) for your WordPress booking form
      • Send submitted form data to another site
      • Exclude empty fields from emails
      • Execute custom JS when a column becomes conditionally visible
      • Toolset Plugin: Update comma separated string to Array for meta data saved via Front-end Posting
      • Toolset Plugin: Update file ID to file URL for meta data saved via Front-end Posting
      • Delete uploaded files after email has been send
      • Increase Cookie lifetime for client data such as [Form Progression]
      • Altering cookie secure and httponly parameters
      • Define fake cronjob to clear old client data if cronjob is disabled on your server
      • Define page language attribute based on page ID or URL
      • Define custom headers when doing a POST request
      • Change checkbox/radio layout to vertical on mobile devices
      • Show remaining available form submission allowed
      • Global fields / elements
      • Trim values of fields
      • Re-sending E-mails after editing entries via Listings for WordPress
      • Combine multiple field values into one column on Contact Entries page
      • Altering the attachments for E-mails via PHP code for WordPress
      • Generate dynamic columns with dates based on user selected date from Datepicker element
      • Hide `eye` icon from Listings row based on user role
    • Data storage
    • BETA version
  • Changelog
  • Support
Powered by GitBook
On this page
  • What is a foreach loop?
  • How to create my own foreach loops?
  • How to loop over selected checkboxes and dropdown items?
  • How to loop over files?
  1. Features
  2. Advanced

Foreach loops

How to loop over dynamic form data inside your E-mails to retrieve user input inside the email body content.

Note: This feature also works with HTML elements since v4.6.0+

What is a foreach loop?

A foreach loop is a method used inside your E-mails, HTML element and generated PDF file.

It can be used in combination with Dynamic column.

This will allow you to loop over all the dynamically added fields by a user and display this information either in your E-mails, HTML elements on the front-end or inside your generated PDF file.

How to create my own foreach loops?

In order for the foreach loop to work you must have a Dynamic column added to your form.

Note: Make sure that the HTML element is placed outside your dynamic column!

For example, let's say you have a form that users fill out to register for a team based game/match. They are required to enter 3 to 5 persons per team.

In this case you will add a Dynamic column to your form and set it's limits to a minimum of 3 and a maximum of 5.

Now inside the dynamic column add two Text fields First name and Last name.

The final step is to place the HTML element with the below content outside the dynamic column (do not put it inside the dynamic colum):

foreach(first_name):
    Team member #<%counter%>: <%first_name%> <%last_name%><br />
endforeach;

As you can see we used first_name to loop over the dynamic column that contains the field named first_name.

The example above also implements the <%counter%> tag to retrieve the current index of this team member.

The result of above foreach loop with a total of 4 team members filled out on the form could be as follows:

    Team member #1: Bill Gates
    Team member #2: Steve Jobs
    Team member #3: Elon Musk
    Team member #4: Mark Zuckerberg

How to loop over selected checkboxes and dropdown items?

The below example loops over all selected items of a Checkbox field and prints both the item Label and Value. This can be used inside the Dynamic column itself:

foreach(option;loop):
    #<%counter%>: Label: <%label%> / Value: <%value%><br />
endforeach;

If you wish to combine multiple checkboxes that are inside a dynamic column you could merge them with the use of a HTML element. First create a dynamic column with your checkbox element inside. Now add a HTML element and set it's content to below (rename option to your checkbox field name). You can name the HTML field options_list.

foreach(option;loop):
    #<%counter%>: <%value%><br />
endforeach;

Now outside of the dynamic column add a final HTML element and set it's content as follows. This will loop over all the option fields in the form, and then it prints out the options_list that belongs to this dynamic column. If there are multiple columns then the below foreach loop will simply append them after eachother. As you can see the foreach loop above contains a horizontal rule so that each checkbox items are seperated nicely. Of course you are totally free to design this in the way you wish, because this is plain HTML and CSS.

foreach(option):
    {options_list}
endforeach;

How to loop over files?

When you are using a File upload element you can display the file info (including the image itself) before they are being uploaded.

Super Forms does this by default, but if you need the picture to be displayed somewhere else in your form you can do so with the use of the below example code inside your HTML element:

foreach(file;loop):
    <strong>Name (<%counter%>):</strong> <%name%>
    <strong>URL (<%counter%>):</strong> <%url%>
    <strong>Extension (<%counter%>):</strong> <%ext%>
    <strong>Type (<%counter%>):</strong> <%type%>
    <strong>ID (<%counter%>):</strong> <%attachment_id%>
endforeach;

The below example loops over the files and links to the file itself:

foreach(file;loop):
    <strong>File <%counter%>:</strong> <a href="<%url%>"><%name%></a>
endforeach;

To display the image directly to the user you can use the below HTML.

Keep in mind that if you allow users to upload files other than images, you might want to make sure you add a custom File upload element purely for image file types.

foreach(file;loop):
    <img src="<%url%>" style="max-width:200px;max-height:200px;" /><br />
endforeach;
PreviousIf statementsNextE-mail Reminders

Last updated 2 years ago