Contact Forms in Blade

  • Created
  • Category

With this element, you can simply use any Contact Form 7 you’ve created. When using the Contact Form, the default layout is to have one field per row. However, you can have multiple fields with different styles in the same row by adding some HTML markup. For example:

With Columns One Third / Three fields in the same row and style 1
<div class="grve-form-style-1 grve-form-light">
<div class="grve-one-third"> [text* your-name placeholder "Your Name (required)"]</div>
<div class="grve-one-third">[email* your-email placeholder "Your Email (required)"]</div>
<div class="grve-one-third grve-last-column">[text your-subject placeholder "Subject"]</div>
<div>[textarea your-message placeholder "Your message"]</div>
<div>[submit "Send your message"]</div>
</div>
Contact Form Style 2 – Light Form
<div class="grve-form-style-2 grve-form-light">
<div class="grve-one-half">[text* your-name placeholder "Your Name (required)"]</div>
<div class="grve-one-half grve-last-column">[email* your-email placeholder "Your Email (required)"]</div>
<div>[text your-subject placeholder "Subject"]</div>
<div>[textarea your-message placeholder "Your message"]</div>
<div>[submit class:grve-custom-btn "Send your message"]</div>
</div>
Contact Form Style 2 – Dark Form
<div class="grve-form-style-2 grve-form-dark">
<div class="grve-one-half">[text* your-name placeholder "Your Name (required)"]</div>
<div class="grve-one-half grve-last-column">[email* your-email placeholder "Your Email (required)"]</div>
<div>[text your-subject placeholder "Subject"]</div>
<div>[textarea your-message placeholder "Your message"]</div>
<div>[submit class:grve-custom-btn "Send your message"]</div>
</div>
Contact Form Style 1 with Icons and Columns
<div class="grve-form-style-1">
<div class="grve-one-third grve-with-icon"><i class="fa fa-user"></i>[text your-name placeholder "Your Name"]</div>
<div class="grve-one-third grve-with-icon"><i class="fa fa-envelope"></i>[email* your-email placeholder "Your Email (required)"]</div>
<div class="grve-one-third grve-with-icon grve-last-column"><i class="fa fa-pencil"></i>[text your-subject placeholder "Subject"]</div>
<div>[textarea your-message]</div>
<div class="grve-align-center">[submit "Send your message"]</div>
</div>
Contact Form Newsletter example
<div class="grve-form-style-3">
<div class="grve-one-third"> [text* your-name placeholder "Your Name (required)"]</div>
<div class="grve-one-third">[email* your-email placeholder "Your Email (required)"]</div>
<div class="grve-one-third grve-last-column">[submit "Send your message"]</div>
</div>
 Contact Form Newsletter in white box
<div class="grve-form-style-1 grve-white-bg">
<h2>Join our Newsletter</h2>
<p class="grve-leader-text">We'll send you newsletters with news, tips & tricks. No spams here.</p>
<div>[email* your-email placeholder "Your Email (required)"]</div>
<div class="grve-align-center">[submit "Subscribe Now"]</div>
</div>
Sample Contact Forms with Columns for Restaurant users
<div class="grve-form-style-1 grve-form-light">
<div class="grve-one-third"> Your Name* [text* your-name]</div>
<div class="grve-one-third"> Your Email [email your-email]</div>
<div class="grve-one-third grve-last-column"> Date* [date* date-591]</div>
<div class="grve-one-third"> Persons* [select* menu-744 "1" "2" "3" "4" "5" "6" "7" "8"]</div>
<div class="grve-one-third"> Preference* [select* menu-751 "Smoking" "No Smoking"]</div>
<div class="grve-one-third grve-last-column">Telephone* [tel* tel-572]</div>
<div class="grve-align-center">[submit "Book Now"]</div>
</div>