How to insert columns into the form

(@ryan94)

This is the code I’m using, but it doesn’t have the desired effect, because it does not display it in three columns, but as one long vertical line:

<div id="left">File 1: [file file-1 filetypes:gif|png|jpg|jpeg|pdf /]
File 4: [file file-4 filetypes:gif|png|jpg|jpeg|pdf /]
File 7: [file file-7 filetypes:gif|png|jpg|jpeg|pdf /]
File 10: [file file-10 filetypes:gif|png|jpg|jpeg|pdf /]
File 13: [file file-13 filetypes:gif|png|jpg|jpeg|pdf /]</div>

<div id="center">File 2: [file file-2 filetypes:gif|png|jpg|jpeg|pdf /]
File 5: [file file-5 filetypes:gif|png|jpg|jpeg|pdf /]
File 8: [file file-8 filetypes:gif|png|jpg|jpeg|pdf /]
File 11: [file file-11 filetypes:gif|png|jpg|jpeg|pdf /]
File 14: [file file-14 filetypes:gif|png|jpg|jpeg|pdf /]</div>

<div id="right">File 3: [file file-2 filetypes:gif|png|jpg|jpeg|pdf /]
File 6: [file file-5 filetypes:gif|png|jpg|jpeg|pdf /]
File 9: [file file-8 filetypes:gif|png|jpg|jpeg|pdf /]
File 12: [file file-11 filetypes:gif|png|jpg|jpeg|pdf /]
File 15: [file file-14 filetypes:gif|png|jpg|jpeg|pdf /]</div>

https://wordpress.org/plugins/contact-form-7/

Viewing 2 replies - 1 through 2 (of 2 total)

davmerit
(@davmerit)

10 years, 5 months ago

See Styling Contact Form 7 Forms for a general explanation of styling CF7 forms using CSS.

If you find you need more detailed advice, after reading and working through the above link, please include a link to your Contact Form 7 form, so others here can examine your form in detail using Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements and provide you with a possible solution.

davmerit
(@davmerit)

10 years, 5 months ago

You could also consider using Contact Form 7 Skins to style your Contact Form 7 Forms.

You can now use the add-on CF7 Skins Ready to create multiple columns.

Contact form 7 form in columns – shows how to place form fields vertical columns using the CF7 Skins Ready Add-on.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How to insert columns into the form’ is closed to new replies.