How To Use Contact Form 7 Fields With Columns

How To Use Contact Form 7 Fields With Columns


When using the Contact Form 7 plugin, the fields will each be on their own row filling up the space. If you wish to put multiple fields in one row, you can do this by adding the proper HTML markup when creating the form. Please see below.

A form with one field per row will look like this:

Copy to Clipboard

A form with multiple fields in one row will look like this. For example, this uses 3 column sections, one field per column:

Copy to Clipboard

You can easily use Avada's column system to display the form contents by using wrapping containers with the correct class names. Below you will find the available sizes and corresponding class names, as well as some special purpose classes.

Column Size Classes

  • 1/1 - fusion-one-full
  • 5/6 - fusion-five-sixth
  • 4/5 - fusion-four-fifth
  • 3/4 - fusion-three-fourth
  • 2/3 - fusion-two-third
  • 3/5 - fusion-three-fifth
  • 1/2 - fusion-one-half
  • 2/5 - fusion-two-fifth
  • 1/3 - fusion-one-third
  • 1/4 - fusion-one-fourth
  • 1/5 - fusion-one-fifth
  • 1/6 - fusion-one-sixth

Special Purpose Classes

  • Add spacing on right (left on RTL) of column - fusion-spacing-yes
  • No spacing on right (left on RTL) of column - fusion-spacing-no
  • For last column in a row - fusion-spacing-last

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept