{"id":335,"date":"2017-04-23T17:44:01","date_gmt":"2017-04-23T17:44:01","guid":{"rendered":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/?p=335"},"modified":"2017-04-23T17:44:01","modified_gmt":"2017-04-23T17:44:01","slug":"how-to-make-my-contact-form","status":"publish","type":"post","link":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/how-to-make-my-contact-form\/","title":{"rendered":"How to make my contact form?"},"content":{"rendered":"<p>Please follow the steps below to make your contact page like our live preview:<\/p>\n<ol>\n<li>Make sure &#8216;Contact Form 7&#8217; plugin is installed.<\/li>\n<li>Go to &#8216;Contact &#8211;&gt; Contact Forms&#8217; page, and in the &#8216;Form&#8217; textarea field copy and paste or write the following html:\n<div class=\"row\">\n<div id=\"highlighter_95752\" class=\"syntaxhighlighter php\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\">&lt;div class=&#8221;row&#8221;&gt;<br \/>\n&lt;div class=&#8221;col-lg-6 formmargin&#8221;&gt;<br \/>\n&lt;div class=&#8221;form-group&#8221;&gt;<br \/>\n[text* <strong>text-895<\/strong> class:form-control placeholder &#8220;Name&#8221;]<br \/>\n&lt;\/div&gt;&lt;div class=&#8221;form-group&#8221;&gt;<br \/>\n[email* <strong>email-980<\/strong> class:form-control placeholder &#8220;Email&#8221;]<br \/>\n&lt;\/div&gt;&lt;div class=&#8221;form-group&#8221;&gt;<br \/>\n[text* <strong>text-995<\/strong> class:form-control placeholder &#8220;Subject&#8221;]<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;&lt;div class=&#8221;col-lg-6&#8243;&gt;<br \/>\n&lt;div class=&#8221;form-group&#8221;&gt;<br \/>\n[textarea* <strong>textarea-688<\/strong> 40&#215;8 class:form-control placeholder &#8220;Message&#8230;&#8221;]<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;&lt;div class=&#8221;col-lg-12&#8243;&gt;<br \/>\n[submit id:yes class:btn class:btn-primary &#8220;Send Message&#8221;]<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>You can edit the field ids (given in bold font). For example: you can put text-9999 in place of text-895. You just need to make sure that, you are using the correct ids in the Mail fields of your Contact Form.<\/p>\n<p><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc9.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-294\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc9.png\" alt=\"\" width=\"1341\" height=\"577\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc9.png 1341w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc9-300x129.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc9-768x330.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc9-1024x441.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc9-60x26.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc9-150x65.png 150w\" sizes=\"(max-width: 1341px) 100vw, 1341px\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>After that,\u00a0copy the given shortcode by the form. Then create a new page and choose &#8216;Contact us&#8217; as the page template. You will find a &#8216;Form Shortcode&#8217; field below the text editor of the page. Paste the shortcode you just copied there and publish the page. You will see, the form is ready at the front-end.<a href=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc10.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-295\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc10.png\" alt=\"\" width=\"1333\" height=\"629\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc10.png 1333w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc10-300x142.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc10-768x362.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc10-1024x483.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc10-60x28.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc10-150x71.png 150w\" sizes=\"(max-width: 1333px) 100vw, 1333px\" \/><\/a><\/li>\n<li>If you want to use map, you can get your map iframe code from your google map, and paste that in the &#8216;Map&#8217; field.<\/li>\n<li>You can populate the right sidebar of the contact page by filling in the required fields you see below the &#8216;Editor&#8217; of your wp contact page.<a href=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc11.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-296\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc11.png\" alt=\"\" width=\"1343\" height=\"629\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc11.png 1343w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc11-300x141.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc11-768x360.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc11-1024x480.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc11-60x28.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-content\/uploads\/2017\/04\/sc11-150x70.png 150w\" sizes=\"(max-width: 1343px) 100vw, 1343px\" \/><\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Please follow the steps below to make your contact page like our live preview: Make sure &#8216;Contact Form 7&#8217; plugin is installed. Go to &#8216;Contact &#8211;&gt; Contact Forms&#8217; page, and in the &#8216;Form&#8217; textarea field copy and paste or write the following html: &lt;div class=&#8221;row&#8221;&gt; &lt;div class=&#8221;col-lg-6 formmargin&#8221;&gt; &lt;div class=&#8221;form-group&#8221;&gt; [text* text-895 class:form-control placeholder &#8220;Name&#8221;] [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,3],"tags":[],"_links":{"self":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/posts\/335"}],"collection":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/comments?post=335"}],"version-history":[{"count":0,"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/posts\/335\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/media?parent=335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/categories?post=335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/infocenter\/wp-json\/wp\/v2\/tags?post=335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}