Custom Columns

CF7 Custom column width view - Themefic

Adding to the level of customizability, pro users of Ultimate Addons for Contact Form 7 can control the width of each column in their forms.

Along with the Pro version of Ultimate Addon, you’ll need to: 

  • Activate the UACF7 addon named Column Custom Width. 
  • Check the Enable Column or Grid box from Ultimate Addons settings and save the changes. 
CF7 Custom column width - Themefic

Adding Custom Columns to a Form

  1. Once you visit the Add New Contact Form page on Contact Form 7, you’ll see the Add Column button. You’ll have to click on that.
  2. As usual, you’ll first see templates in the form-tag generator to insert different numbers of columns in your form. Once you scroll down, you can find the Custom Column Width section, which wouldn’t be present without the respective addon.
  3. In this section, you can add however many columns you want by clicking on the +Add Column button. Each of the columns will have a corresponding text field for you to determine its width.
  4. The width fields can have two forms of input — in percentage (%) or in pixels (px). The percentage refers to the total width of the form’s body, not the viewport width (VW). For optimal results, you can make the total values equal to the form’s width. 
  5. Once done, click on the Insert Tag button to input the form tags into Contact Form 7’s form creation section. Each column will have an opening and closing tag (akin to HTML’s syntax). 

All you need to do is get your <label> containers for each column and put them into the respective custom column tags. Once done, you can save the form and publish the page, and see the changes. 

Note: Depending on the theme you’re using, your form may not translate as expected on the front end. In such cases, try altering the width values.  

Please see this: