Contact Form 7 Columns

Support
#1

How can we use built in shortcodes or the built in responsive framework in Pro to achieve columns in contact form 7? I put my contact form 7 fields in <div class="x-column x-sm x-1-2"></div> and that sort of worked but wasn’t exactly right. then i tried this [column type="one-half"] Place some of the fields here [/column] [column type="one-half" last="true"] and some here [/column] and that sort of worked but the columns weren’t on the same “row”

any help is appreciated.,

#2

well it might be a hack job but this is what I did.

my row in Pro is 1/2+1/2 and inside the left 1/2 I wanted a contact form using 2 columns. so yes, nested columns. This code did it for me:

`<div class="x-column x-sm x-1-2">[text* your-name placeholder "Name"][text* your-phone placeholder "Phone"]</div><div class="x-column x-sm x-1-2" style="margin-right: 0">[email* your-email placeholder "Email"][text website placeholder "Website"]</div>[text* your-subject placeholder "Subject"][textarea* your-message placeholder "Message"][submit "Send Mail"]`

it gave me this: http://tech4eleven.com/shots/Contact__Tech4Eleven_2017-08-18_13-41-53.png

#3

Hello There,

Thanks for writing in! In addition to your code, you would need to have a row container first before adding the column divs. This is to avoid any future issue it might create. You can make use of this code instead:

<div class="x-container"><div class="x-column x-sm x-1-2">[text* your-name placeholder "Name"][text* your-phone placeholder "Phone"]</div><div class="x-column x-sm x-1-2" style="margin-right: 0">[email* your-email placeholder "Email"][text website placeholder "Website"]</div></div><div class="x-container"><div class="x-column x-sm x-1-1">[text* your-subject placeholder "Subject"][textarea* your-message placeholder "Message"][submit "Send Mail"]</div></div>

Here is the indented version to have a clear idea of how it should be laid out:

<div class="x-container">
	<div class="x-column x-sm x-1-2">
		[text* your-name placeholder "Name"][text* your-phone placeholder "Phone"]
	</div>

	<div class="x-column x-sm x-1-2" style="margin-right: 0">
		[email* your-email placeholder "Email"][text website placeholder "Website"]
	</div>
</div>

<div class="x-container">
	<div class="x-column x-sm x-1-1">
		[text* your-subject placeholder "Subject"][textarea* your-message placeholder "Message"][submit "Send Mail"]
	</div>
</div>

Hope this make sense.

#4

perfect sense. I’ve applied it and it works. thanks!

#5

You’re welcome!
Thanks for letting us know that it has worked for you.

#6

Hi there,

This is great and easy to use but my only thought is when you are filling out the form and want to skip to the next field you would usually hit the tab key and go across to the next field, not down to the next one.

Is there anyway around this?

Thanks :slight_smile:
Amy

#7

Perhaps this plug-in is an easier way to add columns?

#8

Thanks for sharing @yingfuli :slight_smile: