Posted By

deliciousthemes on 01/07/17


Tagged

form wordpress 7 contact


Versions (?)

Contact Form 7 Fields on 2 Columns


 / Published in: HTML
 

URL: https://deliciousthemes.com/contact-form-7-fields-columns/

Displaying Contact Form 7 fields on 2 columns using CSS.

  1. ************CF7 markup***************
  2.  
  3. <div class="one-half">
  4. <label> Your Name (required)
  5. </label>
  6. </div>
  7.  
  8. <div class="one-half last">
  9. <label> Your Email (required)
  10. [email* your-email] </label>
  11. </div>
  12.  
  13. <label> Your Message
  14. [textarea your-message] </label>
  15.  
  16. [submit "Send"]
  17.  
  18.  
  19.  
  20.  
  21. ************CSS***************
  22.  
  23. .one-half,
  24. .one-third {
  25. position: relative;
  26. margin-right: 4%;
  27. float: left;
  28. margin-bottom: 20px;
  29.  
  30. }
  31.  
  32. .one-half { width: 48%; }
  33. .one-third { width: 30.66%; }
  34.  
  35. .last {
  36. margin-right: 0 !important;
  37. clear: right;
  38. }
  39.  
  40. @media only screen and (max-width: 767px) {
  41. .one-half, .one-third {
  42. width: 100%;
  43. margin-right: 0;
  44. }
  45. }

Report this snippet  

You need to login to post a comment.