Advanced Search

Contact Form 7 Fields on 2 Columns

/ Published in: HTML
Save to your folder(s)
Displaying Contact Form 7 fields on 2 columns using CSS.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.