{"id":59,"date":"2019-12-12T10:05:25","date_gmt":"2019-12-12T10:05:25","guid":{"rendered":"http:\/\/guteblog.themesvillage.com\/documentation\/?p=59"},"modified":"2019-12-17T08:31:23","modified_gmt":"2019-12-17T08:31:23","slug":"contact-forms","status":"publish","type":"post","link":"https:\/\/guteblog.themesvillage.com\/documentation\/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

Guteblog 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 Style1<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<div class=\"row\">\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-name maxlength:50 class:form-control placeholder \"Your name *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [email* your-email maxlength:50 class:form-control placeholder \"Your email Id *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-subject maxlength:50 class:form-control placeholder \"Subject *\"]\n    <\/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\">\n    [textarea your-message class:form-control placeholder \"Your message...\"]\n    <\/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\">\n    [submit class:btn class:send-btn \"Send\"]\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Demo Style2<\/h3>\n\n\n\n
<div class=\"row\">\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-name maxlength:50 class:form-control placeholder \"Your name *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [email* your-email maxlength:50 class:form-control placeholder \"Your email Id *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-subject maxlength:50 class:form-control placeholder \"Subject *\"]\n    <\/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\">\n    [textarea your-message class:form-control placeholder \"Your message...\"]\n    <\/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\">\n    [submit class:btn class:send-btn \"Send\"]\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Demo Style3<\/h3>\n\n\n\n
<div class=\"row\">\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-name maxlength:50 class:form-control placeholder \"Your name *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [email* your-email maxlength:50 class:form-control placeholder \"Your email Id *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-subject maxlength:50 class:form-control placeholder \"Subject *\"]\n    <\/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\">\n    [textarea your-message class:form-control placeholder \"Your message...\"]\n    <\/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\">\n    [submit class:btn class:send-btn \"Send\"]\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Demo Style4<\/h3>\n\n\n\n
<div class=\"row contact-page-wrapper\">\n  <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-name maxlength:50 class:form-control placeholder \"Your name *\"]\n    <\/div>\n\n    <div class=\"form-group\">\n    [email* your-email maxlength:50 class:form-control placeholder \"Your email Id *\"]\n    <\/div>\n\n    <div class=\"form-group\">\n    [text* your-subject maxlength:50 class:form-control placeholder \"Subject *\"]\n    <\/div>\n  <\/div>\n\n  <div class=\"col-lg-9 col-md-8 col-sm-6 col-xs-12\">\n    <div class=\"form-group\">\n    [textarea your-message class:form-control placeholder \"Your message...\"]\n    <div class=\"button-wrapper\">\n    [submit class:btn class:send-btn \"Send\"]\n    <\/div>\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Demo Style5 <\/h3>\n\n\n\n
<div class=\"row contact-page-wrapper\">\n<div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">\n<div class=\"form-group\">[text* your-name maxlength:50 class:form-control placeholder \"Your name *\"]<\/div>\n<div class=\"form-group\">[email* your-email maxlength:50 class:form-control placeholder \"Your email Id *\"]<\/div>\n<div class=\"form-group\">[text* your-subject maxlength:50 class:form-control placeholder \"Subject *\"]<\/div>\n<\/div>\n<div class=\"col-lg-9 col-md-8 col-sm-6 col-xs-12\">\n<div class=\"form-group\">[textarea your-message class:form-control placeholder \"Your message...\"]<\/div>\n<div class=\"button-wrapper\">[submit class:btn class:send-btn \"Send\"]<\/div>\n<\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Demo Style6<\/h3>\n\n\n\n
<div class=\"row\">\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-name maxlength:50 class:form-control placeholder \"Your name *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [email* your-email maxlength:50 class:form-control placeholder \"Your email Id *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-subject maxlength:50 class:form-control placeholder \"Subject *\"]\n    <\/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\">\n    [textarea your-message class:form-control placeholder \"Your message...\"]\n    <\/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\">\n    [submit class:btn class:send-btn \"Send\"]\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Demo Style7 <\/h3>\n\n\n\n
<div class=\"row\">\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-name maxlength:50 class:form-control placeholder \"Your name *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [email* your-email maxlength:50 class:form-control placeholder \"Your email Id *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-subject maxlength:50 class:form-control placeholder \"Subject *\"]\n    <\/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\">\n    [textarea your-message class:form-control placeholder \"Your message...\"]\n    <\/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\">\n    [submit class:btn class:send-btn \"Send\"]\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Demo Style8<\/h3>\n\n\n\n
<div class=\"row\">\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-name maxlength:50 class:form-control placeholder \"Your name *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [email* your-email maxlength:50 class:form-control placeholder \"Your email Id *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-subject maxlength:50 class:form-control placeholder \"Subject *\"]\n    <\/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\">\n    [textarea your-message class:form-control placeholder \"Your message...\"]\n    <\/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\">\n    [submit class:btn class:send-btn \"Send\"]\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Demo Style9 <\/h3>\n\n\n\n
<div class=\"row\">\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-name maxlength:50 class:form-control placeholder \"Your name *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [email* your-email maxlength:50 class:form-control placeholder \"Your email Id *\"]\n    <\/div>\n  <\/div>\n  <div class=\"col-lg-4 col-md-6 col-sm-12 col-xs-12\">\n    <div class=\"form-group\">\n    [text* your-subject maxlength:50 class:form-control placeholder \"Subject *\"]\n    <\/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\">\n    [textarea your-message class:form-control placeholder \"Your message...\"]\n    <\/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\">\n    [submit class:btn class:send-btn \"Send\"]\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Result:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\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":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"yst_prominent_words":[],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n