{"id":466,"date":"2017-10-18T12:43:16","date_gmt":"2017-10-18T16:43:16","guid":{"rendered":"http:\/\/amy.imarketbeta.com\/blog\/?page_id=466"},"modified":"2017-12-12T14:29:51","modified_gmt":"2017-12-12T22:29:51","slug":"contact-forms","status":"publish","type":"page","link":"http:\/\/amy.imarketbeta.com\/blog\/part-1-introduction-to-imarket-websites\/website-components\/contact-forms\/","title":{"rendered":"Contact Forms"},"content":{"rendered":"<h1>Contact Forms<\/h1>\n<p>Website contact forms are a place for site visitors to enter and submit data, which can then be collected for use by the client. Contact forms may be used to generate leads, collect feedback, or receive employment applications.<\/p>\n<p>Each form includes a designated form page and a corresponding &#8220;thank you&#8221; page. Some sites may include mini forms on the subpage and\/or homepage.<\/p>\n<p>Once submitted, a form generates two emails: one to the client and one to the form submitter. The form submission will be noted in the forms module.<\/p>\n<h2>Forms Included (Default)<\/h2>\n<p>By default, the following forms are available with Active Leads and Domination packages. <em>The client may request to disable\/modify certain forms and\/or add new forms based on the site design. <\/em><\/p>\n<ol>\n<li><strong>Send a Message<\/strong><\/li>\n<li><strong>Request an Estimate<\/strong><\/li>\n<li><strong>Schedule Service<\/strong><strong><br \/>\n<\/strong><\/li>\n<li><strong>Take Our Survey<\/strong><strong><br \/>\n<\/strong><\/li>\n<li><strong>Refer A Friend<\/strong><strong><br \/>\n<\/strong><\/li>\n<li><strong>Careers<\/strong><\/li>\n<\/ol>\n<h2>Contact Form Page<\/h2>\n<p>Typically, all contact form pages exist under a top-level weblink with the filename &#8220;contact&#8221;. The client may request a different sitemap setup, but in most cases the URL structure will end up like this:<\/p>\n<p>http:\/\/www.clientURL.com\/contact\/formPageFilename<br \/>\n<em> Actual example:<\/em><br \/>\nhttp:\/\/www.avisac.com\/contact\/send-message<\/p>\n<p>The Contact Form Page includes:<\/p>\n<ul>\n<li>Heading with the name of the contact form<\/li>\n<li>Contact form<\/li>\n<li>May include\/exclude sidebar, depending on the site design or client request<\/li>\n<li>Additional content may be added above or below the form through the content editor<\/li>\n<\/ul>\n<p>In the resource editor, the form will appear as an iMarket shortcode. iMarketStaff users should take care not to modify this content if\/when editing the page.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1571\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/contact-form-shortcode.png\" alt=\"\" width=\"1002\" height=\"299\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/contact-form-shortcode.png 1002w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/contact-form-shortcode-300x90.png 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/contact-form-shortcode-768x229.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><\/p>\n<h3>Styling<\/h3>\n<p>At this time, the Contact Form pages do not use custom styling provided by the Design team. However, the Developer may make small tweaks to the default styling to better suit the overall site design at the time of building the site.<\/p>\n<figure id=\"attachment_1566\" aria-describedby=\"caption-attachment-1566\" style=\"width: 1350px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-1566\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/form-page.jpg\" alt=\"\" width=\"1350\" height=\"1350\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/form-page.jpg 1350w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/form-page-150x150.jpg 150w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/form-page-300x300.jpg 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/form-page-768x768.jpg 768w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/form-page-1050x1050.jpg 1050w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/form-page-100x100.jpg 100w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><figcaption id=\"caption-attachment-1566\" class=\"wp-caption-text\">Sample Contact Form Page<\/figcaption><\/figure>\n<h2>Thank You Page<\/h2>\n<p>Typically, all thank you pages pages exist under their respective contact form page and with the filename &#8220;thanks&#8221;.\u00a0 The URL structure will usually look like this:<\/p>\n<p>http:\/\/www.clientURL.com\/contact\/formPageFilename\/thanks<br \/>\n<em> Actual example:<\/em><br \/>\nhttp:\/\/www.avisac.com\/contact\/send-message\/thanks<\/p>\n<p>The Contact Form Thank You Page includes:<\/p>\n<ul>\n<li>Heading with short thank you message<\/li>\n<li>Full thank you message text with email disclaimer.<\/li>\n<li>May include\/exclude sidebar, depending on the site design or client request<\/li>\n<\/ul>\n<p>This page has Developer-only permissions, so any changes to the page settings or content will need to be requested by Development through a ticket.<\/p>\n<h3>Styling<\/h3>\n<p>At this time, the Contact Form Thank You pages do not use custom styling provided by the Design team. However, the Developer may make small tweaks to the default styling to better suit the overall site design at the time of building the site.<\/p>\n<figure id=\"attachment_1573\" aria-describedby=\"caption-attachment-1573\" style=\"width: 1350px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-full wp-image-1573\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/thankyou-page.jpg\" alt=\"\" width=\"1350\" height=\"1017\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/thankyou-page.jpg 1350w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/thankyou-page-300x226.jpg 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/thankyou-page-768x579.jpg 768w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/thankyou-page-1050x791.jpg 1050w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><figcaption id=\"caption-attachment-1573\" class=\"wp-caption-text\">Sample Contact Form Thank You Page<\/figcaption><\/figure>\n<h2>Mini Forms<\/h2>\n<div>Mini forms are purposefully short forms, meant to encourage a visitor to quickly submit information without needing to leave the page they\u2019re on. A Mini Form will be visible on almost every page of a site, typically in the sidebar or as a full-width banner. Mini forms are only added to sites based on the site design and\/or client request (they are a not a default form).<\/div>\n<h3><\/h3>\n<h3>Behavior<\/h3>\n<div>The mini forms behave in the same way that the default contact forms behave. Though they exist in sidebar\/homepage blocks, they also include a fall-back form page and a thank you page. If a user incorrectly enters information into the form and submits it, they will be redirected to the form&#8217;s corresponding page to correct their submission. After submitting the form, they will be directed to the appropriate thank you page.<\/div>\n<div>\n<h3><\/h3>\n<h3>Styling<\/h3>\n<p>Mini forms will include custom styling provided by the Design Team. Two samples are displayed below.<\/p>\n<\/div>\n<div>\n<figure id=\"attachment_1576\" aria-describedby=\"caption-attachment-1576\" style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-1576 size-full\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/miniform1.png\" alt=\"\" width=\"1370\" height=\"130\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/miniform1.png 1370w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/miniform1-300x28.png 300w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/miniform1-768x73.png 768w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/miniform1-1050x100.png 1050w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 905px, 1075px\" \/><figcaption id=\"caption-attachment-1576\" class=\"wp-caption-text\">Sample Mini Form #1<\/figcaption><\/figure>\n<figure id=\"attachment_1577\" aria-describedby=\"caption-attachment-1577\" style=\"width: 386px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-1577 size-full\" src=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/miniform2.png\" alt=\"\" width=\"386\" height=\"448\" srcset=\"http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/miniform2.png 386w, http:\/\/amy.imarketbeta.com\/blog\/wp-content\/uploads\/2017\/10\/miniform2-258x300.png 258w\" sizes=\"(max-width: 386px) 100vw, 386px\" \/><figcaption id=\"caption-attachment-1577\" class=\"wp-caption-text\">Sample Mini Form #2<\/figcaption><\/figure>\n<\/div>\n<h2>Modifying Contact Forms and Related Pages<\/h2>\n<p>Modifications to a form&#8217;s fields and settings is done through <a href=\"http:\/\/amy.imarketbeta.com\/blog\/part-2-staff-user-guide\/modules\/contact-forms\/\">the module.<\/a>\u00a0 Additional content outside of the form itself can be added to the form page by editing the respective page through the CMS editor. By default, siteadmin (client-access) logins do not have access to edit these pages, but the iMarketStaff login does. Changes to the content on the corresponding thank you pages must be made by Development.<\/p>\n<h2>Lead Attribution<\/h2>\n<p>iMarket tracks the source\/medium for all form submissions using the iMS Analytics tool. When a form is submitted, it&#8217;s added to the Leads Manager tab in the contact forms module along with the source\/medium of the visit. This information is also sent to the client&#8217;s project in the Dashboard through the <a href=\"http:\/\/amy.imarketbeta.com\/blog\/part-1-introduction-to-imarket-websites\/dashboard-api\/\">Dashboard API<\/a>. (Note that this data is used in combination with data from Google Analytics to generate a more accurate figure.)<\/p>\n<p>You can learn more about using this feature by visiting the <a href=\"http:\/\/amy.imarketbeta.com\/blog\/part-2-staff-user-guide\/modules\/contact-forms\/\">Contact Forms Module<\/a> entry.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How do contact forms function and where do they display on a site?<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":453,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/466"}],"collection":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/comments?post=466"}],"version-history":[{"count":7,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/466\/revisions"}],"predecessor-version":[{"id":2070,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/466\/revisions\/2070"}],"up":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/453"}],"wp:attachment":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/media?parent=466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/categories?post=466"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/tags?post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}