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 column?
  • What features does a column have?
  • Conditional Logic:
  • Column Visibility:
  • Dynamic Add More:
  • Update Conditions Dynamically:
  • When to use a column?
  • How to add a column?
  1. Elements
  2. Layout elements

Column/Grid

A responsive and flexible column/grid (layout) system for your WordPress forms

PreviousLayout elementsNextMulti-part / step

Last updated 1 year ago

What is a column?

In short a column is a section of your form where you insert a set of elements. A column will determine the layout of the elements that are inside the column. You could see a column as a table (or a grid system). You can put an unlimited amount of columns next to each other. This makes creating forms really flexible because you now do not have limitation on how many elements you need next to each other. A column can also be inserted into another column with unlimited nesting possibility.

What features does a column have?

Each column has the following features:

  • - conditionally hide/show column based on other field values

  • - will make column invisible on front-end

  • - allows users to add/duplicate a set of fields

  • - keeps conditional logic on the column itself when Dynamic Add More is enabled

  • Hide on mobile devices - Based on form width (breaking point = 760px)

  • Keep original size on mobile devices (prevents 100% width) - Based on form width (breaking point = 760px)

  • Hide on mobile devices - Based on screen width (breaking point = 760px)

  • Keep original size on mobile devices (prevents 100% width) - Based on screen width (breaking point = 760px)

  • Force responsiveness on mobile devices (always 100% width) - Based on screen width (breaking point = 760px)

  • Styling options - background (image, color, opacity), custom padding, positioning (static, absolute etc.)

Conditional Logic:

When a column or any element is conditionally hidden the fields will not be included in emails (if enabled) and will not be saved under contact entries (if enabled) nor can you use {tags} to retrieve them inside your form or email body. Basically the field does not exist when conditionally hidden. This is different from making a column "invisible". Which means the user just can't see it, but it actually exists.

Column Visibility:

The Element Settings & Options section will open now. Make sure you are under the General TAB.

Now set the Make column invisible option to: Yes

Click the Update Element button to apply the changes to the column. You will notice that on the form builder the column will still be visible, this is because you otherwise wouldn't be able to edit it anymore. When you preview your form by clicking the Preview button at the top right of the page you will notice that the column and it's content will no longer be visible.

When a column is invisible the fields will still be included in emails (if enabled) and saved under contact entries (if enabled). If you still require specific fields inside a hidden column to be excluded, you can change this per field. To do this edit the field and go to Advanced TAB and change the Exclude from email and Do not save field in Contact Entry options accordingly.

Dynamic Add More:

Example: You have a team registration form and the teams vary from 2 up to 8 persons. For each person you need their first and last name.

If you need it to have a maximum duplications of 8 (which is the case in our example) you can change the Limit for dynamic fields (0 = unlimited) option.

Update Conditions Dynamically:

This will make sure that whenever a column is duplicated by the user on the front-end, it's conditions reference will be update to it's own column rather than the first original column.

When to use a column?

A column comes in handy when you ever need to apply the same conditional logic on each of those elements. This prevents you from having to add the same conditions on each element one by one. Now you can just add the conditional logic to the column and it will affect all the elements inside it.

The same method can be applied whenever you need to hide a set of fields at once.

If you are working on a large form and you have a set of fields that need to be duplicated and adjusted only based on their field names it would be a good idea to put these fields in a column. You can then duplicate the column which will then duplicate all of it's elements inside it automatically.

How to add a column?

In order to add a column you can open up the Layout Elements section on the builder page. You will see 4 elements, 3 of them are columns the other one is a so called Multi-part, which is not a column. The first one is a 100% width column or so called 1/1 column. The second column is a 50% width (1/2). The third is a 33% width (1/3) column. When added you can still change the column sizes to one of the following ratio's:

  • 1/1 (100%)

  • 1/2 (50%)

  • 1/3 (33%)

  • 1/4 (25%)

  • 1/5 (20%)

Once you have added your column you can add any element inside it with the exception to Multi-parts.

Because conditional logic can be applied on almost all elements this part is covered in the guide.

Whenever you want to hide a set of fields on the front-end you can enable the option to make the column invisible. In order to do this click on the icon of the column to start editing the column.

In some cases you want to allow the end user to add a new set of fields dynamically by clicking a button.

What you will do is add a 1/1 column, enable the Enable Add More option. Then add 2 text fields to the column 1 for first name, 1 for last name. Now when you preview the form you will notice the button which allows you to add another set of fields. So it basically duplicates the column on the front-end.

When you have enabled and you have elements inside the column that are using conditional logic based on a field inside this same column and you require these conditional logic to keep working on dynamically added columns you will have to enable the Update conditional logic dynamically option.

Another useful thing about columns is that when you are working with larger forms you can easily collapse the column on the builder page. This will free up a lot of working space whenever you have finished this part of the form. This will make it also a lot easier to drag & drop new elements into the correct place of your form. When you otherwise would have to scroll down or up all the way, you now probably only have to scroll a little bit or not at all

✏️
➕
➕
😉
Conditional Logic
Conditional Logic
Column Visibility
Dynamic Add More
Update Conditions Dynamically
Dynamic Add More