{"id":411,"date":"2016-10-22T16:00:39","date_gmt":"2016-10-22T19:00:39","guid":{"rendered":"https:\/\/wiki.samuelchopard.ch\/?p=411"},"modified":"2020-05-03T18:46:00","modified_gmt":"2020-05-03T16:46:00","slug":"creating-a-responsive-two-column-form-using-contact-form-7","status":"publish","type":"post","link":"https:\/\/samuelchopard.ch\/wiki\/library\/creating-a-responsive-two-column-form-using-contact-form-7\/","title":{"rendered":"Creating a responsive two column form using Contact form 7"},"content":{"rendered":"

<\/p>\n

Using a child-theme<\/a> is the best option when editing your themes files.<\/p>\n

Code (to insert in the form):<\/strong><\/p>\n

<div id=\"responsive-form\" class=\"clearfix\">\r\n\r\n<div class=\"form-row\">\r\n<div class=\"column-half\">First Name [text* first-name]<\/div>\r\n<div class=\"column-half\">Last Name [text* last-name]<\/div>\r\n<\/div>\r\n\r\n<div class=\"form-row\">\r\n<div class=\"column-half\">Email [email* your-email]<\/div>\r\n<div class=\"column-half\">Phone [text* your-phone]<\/div>\r\n<\/div>\r\n\r\n<div class=\"form-row\">\r\n<div class=\"column-full\">Subject [text* your-subject]<\/div>\r\n<\/div>\r\n\r\n<div class=\"form-row\">\r\n<div class=\"column-full\">Your message  [textarea your-message]<\/div>\r\n<\/div>\r\n\r\n<div class=\"form-row\">\r\n<div class=\"column-full\">[submit \"Send\"]<\/div>\r\n<\/div>\r\n\r\n<\/div><!--end responsive-form--><\/pre>\n
 <\/p>\n
 <\/p>\n
Code to paste in your child-theme<\/a>‘s style.css<\/strong><\/p>\n
#responsive-form{\r\n  max-width: 100% \/*-- change this to get your desired form width --*\/;\r\n  margin: 0 auto;\r\n        width: 100%;\r\n}\r\n.form-row{\r\n  width: 100%;\r\n}\r\n.column-half, .column-full{\r\n  float: left;\r\n  position: relative;\r\n  padding: 0.65rem;\r\n  width:100%;\r\n  -webkit-box-sizing: border-box;\r\n        -moz-box-sizing: border-box;\r\n        box-sizing: border-box\r\n}\r\n.clearfix:after {\r\n  content: \"\";\r\n  display: table;\r\n  clear: both;\r\n}\r\n\r\n\/**---------------- Media query ----------------**\/\r\n@media only screen and (min-width: 48em) { \r\n  .column-half{\r\n    width: 50%;\r\n  }\r\n}<\/pre>\n
Source: http:\/\/www.wpsnippet.com\/creating-responsive-two-column-form-using-contact-form-7\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Using a child-theme is the best option when editing your themes files. Code (to insert in the form): <div id=\"responsive-form\" [...]","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[55,65,113,249,307],"class_list":["post-411","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-cf7","tag-contact-form-7","tag-form","tag-responsive","tag-two-columns"],"_links":{"self":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/comments?post=411"}],"version-history":[{"count":3,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/411\/revisions"}],"predecessor-version":[{"id":55116,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/411\/revisions\/55116"}],"wp:attachment":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/media?parent=411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/categories?post=411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/tags?post=411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}