{"id":59,"date":"2019-12-12T10:05:25","date_gmt":"2019-12-12T10:05:25","guid":{"rendered":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/?p=59"},"modified":"2020-03-20T06:45:42","modified_gmt":"2020-03-20T06:45:42","slug":"contact-forms","status":"publish","type":"post","link":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/contact-forms\/","title":{"rendered":"Contact Forms"},"content":{"rendered":"\n

Adding Contact Forms<\/strong><\/p>\n\n\n\n

Contact forms are not built into a Theme (for many reasons) so we recommend using a 3rd party plugin for this. The free one we like is Contact Form 7 and the premium one we like is Gravity Forms<\/a>. Both can be used to add forms anywhere on your site. <\/p>\n\n\n\n

In our demos we\u2019ve used Contact Form 7<\/a>.<\/p>\n\n\n\n

Contact Forms with Columns<\/p>\n\n\n\n

Spices includes the powerful bootstrap grid system that you can use for pretty much anything, this includes creating Contact Forms with multiple columns.<\/p>\n\n\n\n

Understanding the Bootstrap Grid<\/strong><\/a><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Example Grid HTML<\/strong><\/p>\n\n\n\n

Here is a basic grid example:<\/p>\n\n\n\n

<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-sm\">\n      One of three columns\n    <\/div>\n    <div class=\"col-sm\">\n      One of three columns\n    <\/div>\n    <div class=\"col-sm\">\n      One of three columns\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Using the\nBootstrap Grid in Your Contact Forms<\/strong><\/p>\n\n\n\n
Now that you hopefully understand how the grid works here is a screenshot of how you can use the grid classes in your Contact Form. The example below is using the Contact Form 7 plugin.<\/p>\n\n\n\n
Demo<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<div class=\"row\">\n   <div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">\n      <h6>Send a message<\/h6>\n   <\/div>\n   <div class=\"col-lg-6 col-md-6 col-sm-12 col-xs-12\">\n      <div class=\"form-group\"><span class=\"contact-label\">Your name *<\/span>[text* your-name maxlength:50 class:form-control]<\/div>\n   <\/div>\n   <div class=\"col-lg-6 col-md-6 col-sm-12 col-xs-12\">\n      <div class=\"form-group\"><span class=\"contact-label\">Your email Id *<\/span>[email* your-email maxlength:50 class:form-control]<\/div>\n   <\/div>\n<\/div>\n<div class=\"row\">\n   <div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">\n      <div class=\"form-group\"><span class=\"contact-label\">Your message<\/span>[textarea your-message class:form-control]<\/div>\n   <\/div>\n<\/div>\n<div class=\"row\">\n   <div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">\n      <div class=\"form-group\">[submit class:btn class:send-btn \"Send message\"]<\/div>\n   <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Adding Contact Forms Contact forms are not built into a Theme (for many reasons) so we recommend using a 3rd party plugin for this. The free one we like is Contact Form 7 and the premium one we like is Gravity Forms. Both can be used to add forms anywhere on your site. In our…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/wp-json\/wp\/v2\/posts\/59"}],"collection":[{"href":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":12,"href":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/wp-json\/wp\/v2\/posts\/59\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/wp-json\/wp\/v2\/posts\/59\/revisions\/655"}],"wp:attachment":[{"href":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themesvillage.com\/documentation\/spices-wordpress-food-blog-themes\/wp-json\/wp\/v2\/tags?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}