- Section
- Troubleshooting – Icons missing from the blocks
- Spectra Patterns
- How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?
- Styling Checkbox / Radio / Acceptance control in Contact Form 7 Designer block of Spectra
- Unable to Style Checkbox / Radio Buttons / Acceptance Control using Contact Form 7 Styler of Spectra
- Tab Index – for multiple Gravity Forms
- How to Get Started with Spectra
- How to Exclude A Heading from Table of Contents?
- Spectra – Display Conditions for Blocks
- Importing Single Pages, Templates, and Block Patterns In Spectra
- How to Enable or Disable the Design Library Button
- Spectra – Copy and Paste Style
- Spectra – Container Flex property
- Spectra – Default Content Width
- Spectra – Blocks Editor Spacing
- Spectra – Collapse Panels
- Spectra – Responsive Conditions
- Spectra Pro Dynamic Content Extension
- Site Visibility
- Clearing Cache with Spectra Actions
- Quick Action Bar
- Add Multiple Instagram Accounts in Spectra
- Getting Started with Grid Builder
- Move the Title Bar to Top
- Resolving Layout Conflicts with Spectra Containers After Astra Update
- How to Register High-Privileged Users on Your Website
- Additional User Roles to Access AI Assistant
- Spectra Database Update Instructions (Version 2.0.0 and Below)
- Frequently Asked Questions – VIP Priority Support
- Whitelist an Email Address
- Installing and Importing Starter Templates
- How to Get Started with Spectra
- Manually Install Spectra via FTP
- Automatic Beta Updates for Spectra
- How to Rollback to Previous Spectra Versions
- How to Load Google Fonts Locally
- Activate the Spectra Pro License Key
- How to Install Spectra Pro Plugin
- Translate Spectra Strings using Loco Translate
- How to add a Transparent / Sticky header?
- How to Change the Site Logo?
- How to Change Global Styles?
- How to Disable Title on Posts, Pages?
- How to add a transparent/ sticky header for a single page/post?
- Change Header and Footer Patterns in Spectra One Theme
- Add Custom/Google Fonts In Spectra One
- How To Reset Global Default Styling?
- Manually Install Spectra One via FTP?
- Disable or Enable Header/Footer for Specific Pages/Posts
How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?
Many times you wish to add multiple form fields in column structure. This can be done by using a wrapper class.
The class you’ll be using for this is: “
You will need to use a parent wrapper with the above class name for every line you wish to insert. You will also need to enclose every Form element within a <span>tag.
For example –
For a 3 column layout:
<div class="uagb-cf7_styler-col">
<span class="uagb-cf7_styler-col-1"> Field 1 </span>
<span class="uagb-cf7_styler-col-2"> Field 2 </span>
<span class="uagb-cf7_styler-col-3"> Field 3 </span>
</div>
For a 2 column layout:
<div class="uagb-cf7_styler-col">
<span class="uagb-cf7_styler-col-1"> Field 1 </span>
<span class="uagb-cf7_styler-col-2"> Field 2 </span>
</div>
Note: You can replace Field 1, Field 2, Field 3, etc with the field code of Contact Form 7. Such as :
<span>[text* your-name placeholder “Your Name”]</span>
All this has to be done in the form you create using Contact Form 7. Here is a quick code that will help you understand how you implement the same.
<div class="uagb-cf7_styler-col">
<span class="uagb-cf7_styler-col-1">[text* your-name placeholder "Your Name"]</span>
<span class="uagb-cf7_styler-col-2">[email* your-email placeholder "Your Email"]</span>
</div>
<div class="uagb-cf7_styler-col">
<span>[text your-subject placeholder "Your Subject"]</span>
</div>
<div class="uagb-cf7_styler-col">
<span>[textarea your-message placeholder "Your Message"]</span>
</div>
<div class="uagb-cf7_styler-col">
<span>[submit "Send"]</span>
</div>
The above code was an example of the backend settings in Contact Form 7. Take a look at the screenshot below to see how it looks.
We don't respond to the article feedback, we use it to improve our support content.