{"id":9859,"date":"2020-04-19T13:23:33","date_gmt":"2020-04-19T13:23:33","guid":{"rendered":"http:\/\/themenectar.com\/docs\/salient\/?page_id=9859"},"modified":"2020-04-20T18:20:41","modified_gmt":"2020-04-20T18:20:41","slug":"contact-form-columns","status":"publish","type":"page","link":"https:\/\/themenectar.com\/docs\/salient\/contact-form-columns\/","title":{"rendered":"Contact Form Columns"},"content":{"rendered":"\n
<\/div>\n\n\n\n
\n
\n

Columns & Block fields<\/h3>\n\n\n\n

In this article we’ll be discussing how to make certain fields within a Contact Form 7 setup display using columns. To accomplish this, we’ll make use of the handy helper classes provided with Salient called “nectar-wpcf7-inline-form<\/em>” and “nectar-wpcf7-inline-field<\/em>“. <\/p>\n\n\n\n

Each field in your form that would like inside a column can be wrapped in a div with the class name “nectar-wpcf7-inline-field<\/em>“.<\/p>\n\n\n\n

You will find example snippets which you can copy\/paste and modify as needed into the Contact Form 7 form creation editor. If you don\u2019t already have that plugin installed, make sure to read over the Installing Plugins<\/a> chapter. <\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n
\n<div class="nectar-wpcf7-inline-form"> \n  <div class="nectar-wpcf7-inline-field"> \n     [text* your-name placeholder "Name"]\n  <\/div>\n  <div class="nectar-wpcf7-inline-field"> \n     [tel* tel-214 placeholder "Phone Number"]\n  <\/div>\n<\/div>\n\n[email* your-email placeholder "Email Address"]\n\n[submit "Contact Us"]\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
All Fields in Columns<\/h3>\n\n\n\n
 Using the structure from above, it’s easy to create further columns. Simply wrap each field with the nectar-wpcf7-inline-field div as many times as needed, and the total column number will automatically adjust to the fill the space. <\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n
\n<div class="nectar-wpcf7-inline-form"> \n  <div class="nectar-wpcf7-inline-field"> \n     [text* your-name placeholder "Name"]\n  <\/div>\n  <div class="nectar-wpcf7-inline-field"> \n     [tel* tel-214 placeholder "Phone Number"]\n  <\/div>\n  <div class="nectar-wpcf7-inline-field"> \n     [email* your-email placeholder "Email Address"]\n  <\/div>\n  <div class="nectar-wpcf7-inline-field"> \n     [submit "Contact Us"]\n  <\/div>\n<\/div>\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
Tweaking Mobile Columns<\/h3>\n\n\n\n
By default, the columns will persist through mobile viewports. Which works nicely when using 1-3 columns. However, if you’re using more per row and would like the fields to display at a reduced width on smaller screens, simply add the class name “mobile-2-col<\/em>” or “mobile-1-col<\/em>” on the wrapping div (nectar-wpcf7-inline-form). This will allow columns to alter their size for smaller screens. <\/p>\n<\/div>\n\n\n\n
\n<div class="nectar-wpcf7-inline-form mobile-fullwidth"> \n    <!-- Form fields here -->\n <\/div>\n\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n
<\/div>\n","protected":false},"excerpt":{"rendered":"
Columns & Block fields In this article we’ll be discussing how to make certain fields within a Contact Form 7 setup display using columns. To accomplish this, we’ll make use…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/9859"}],"collection":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/comments?post=9859"}],"version-history":[{"count":0,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/9859\/revisions"}],"wp:attachment":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/media?parent=9859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}