Field Forms Side by Side

janton1 · June 2020

Thank you in advance for your help. I have never had this much trouble with a Themeforrest theme before. I want form Contact Form 7 fields to be able to appear side by side. I have played with the css for hours but can not get it working. This is the current CSS I am using at this time but it will not work. I don't understand why this is not working. Please help. I want the regular fields to appear side by side. Please help me get this working.

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea, select { padding: 13px; font-size: 18px; }

input[type="submit"] { font-size: 18px; font-weight: bold; text-transform: uppercase; padding: 12px 60px; border-top: 2px solid #71c8ff; border-bottom: 2px solid #0065c4; margin-right: 0; display: inline-block !important; width: auto !important;}

input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea { display: inline-block !important; width: auto !important;}

janton1 · June 2020

Here is the site http://54.215.1.130/~johnclessler/

Pablo · June 2020

Hello,

Please follow this documentation, it will explain you how to create proper CF7 without touching CSS code.

https://contactform7.com/docs/

Thanks

janton1 · June 2020

I use CF7 every day. I know how to create a form with the fields on the same line but the CSS on this theme is not allowing the fields to be on the same line. I regularly put all the fields on the same line but it will not allow it to happen with this theme. I will use a table. But this has nothing to do with CF7.

Bryan · June 2020

Hey,

in the pre-built websites we build the forms using the column shortcodes from Muffin Builder,

https://themes.muffingroup.com/be/theme/shortcodes/typography/#columns

Try this, we used this in the denim pre-built website

<div class="column one"><label>[text* your-name placeholder "Name"] </label></div>

<div class="column one-second"><label>[email* your-email placeholder "Email"]</label></div>

<div class="column one-second"><label>[text your-subject placeholder "Subject"]</label></div>

<div class="column one"><label>[text your-subject placeholder "Details"]</label></div>

<div class="column one"><label>[textarea your-message placeholder "Your message"] </label></div>

<div class="column one">[submit class:button_full_width "Send"]</div>

Field Forms Side by Side

Comments