Contact Forms in Movedo

  • 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. Check the examples below and have in mind that you can combine anything you need:

With Columns One Third with Round fields
<div class="grve-form grve-fields-round grve-align-center">
<div class="grve-fields-wrapper">
<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 class:grve-round "Send your message"]</div>
</div>
</div>
Vertical Newsletter Form Type
<div class="grve-form grve-fields-grey-bg grve-fields-extra-round grve-align-center">
<div class="grve-fields-wrapper">
<div>[text* your-name placeholder "Your Name (required)"]</div>
<div>[email* your-email placeholder "Your Email (required)"]</div>
<div>[submit class:grve-extra-round "Send your message"]</div>
</div>
</div>
Underline Style Contact Form
<div class="grve-form grve-underline">
<div class="grve-fields-wrapper">
<div>[text* your-name placeholder "Your Name (required)"]</div>
<div>[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 "Send your message"]</div>
</div>
</div>
Contact Form with Icons and Columns
<div class="grve-form">
<div class="grve-fields-wrapper">
<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>
</div>
Horizontal Newsletter
<div class="grve-newsletter grve-fields-white-bg">
<div class="grve-fields-wrapper">
<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>
</div>
Newsletter without Button (Personal Blog demo)
<div class="grve-newsletter grve-only-icon">
<div class="grve-fields-wrapper grve-border grve-border-bottom">
<div>[email* your-email placeholder "Your Email (required)"]</div>
<div class="grve-submit-icon"><i class="fa fa-arrow-right"></i>[submit class:grve-custom-btn]</div>
</div>
</div>
Book Table Form (Restaurant Demo)
<div class="grve-form">
<div class="grve-fields-wrapper">
<div class="grve-one-half"><div class="grve-link-text">Your Name</div> [text* your-name]</div>
<div class="grve-one-half grve-last-column"><div class="grve-link-text">Your Email</div> [email* your-email]</div>
<div class="grve-one-half"><div class="grve-link-text">Date</div> [date* date-412 "Date"]</div>
<div class="grve-one-half grve-last-column"><div class="grve-link-text">Time</div> [select menu-607 "17:30" "18:00" "18:30" "19:00" "19:30" "20:00" "20:30" "21:00" "21:30"]</div>
<div class="grve-one-half"><div class="grve-link-text">Seats</div> [select menu-138 "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]</div>
<div class="grve-one-half grve-last-column"><div class="grve-link-text">Table</div> [select menu-139 "Any" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]</div>
<div><div class="grve-link-text">Comment</div> [textarea your-message]</div>
<div class="grve-align-center">[submit "Book Table"]</div>
</div>
</div>