{"id":3843,"date":"2022-12-16T14:10:08","date_gmt":"2022-12-16T08:40:08","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=3843"},"modified":"2025-12-23T10:37:34","modified_gmt":"2025-12-23T05:07:34","slug":"case-study-1","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/case-study-1\/","title":{"rendered":"How we designed the Gradient Contact Forms"},"content":{"rendered":"\n<p>At <strong>HoliThemes Click to Chat<\/strong>, a contact form is added on both the <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/support\/\" data-type=\"link\" data-id=\"https:\/\/clicktochat.techponder.com\/support\/\">Support page<\/a> and the <a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/pricing\/\">Pricing page<\/a> to collect user details before starting a conversation. This ensures smoother communication and faster responses by capturing essential information upfront.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step-by-Step process to configure the Contact Form:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to the &#8221;<strong>Click to Chat&#8221;<\/strong> page at <strong>Style, Position,<\/strong> select Style-7, and position to fixed.<\/li>\n\n\n\n<li>And next, go to &#8221;<strong>Click to Chat<\/strong>&#8221; \u2192 &#8221;<strong>Greetings<\/strong>&#8221; and select <strong>&#8221;Greetings Form<\/strong>&#8221; from the list<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/clicktochat.techponder.com\/wp-content\/uploads\/2022\/12\/Greetings-Form-Selection--1024x320.webp\" alt=\"\" class=\"wp-image-7160\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Customize the form fields (e.g., Name, Website Address, Message) to collect the necessary user details<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Custom CSS From Click to Chat Plugin itself<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to&nbsp;&nbsp;&nbsp;<strong>Other setting \u2014&gt; Custom CSS <\/strong>Section to add Custom Gradient CSS form<\/li>\n\n\n\n<li>Add the Custom CSS in the Box there<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"351\" src=\"https:\/\/clicktochat.techponder.com\/wp-content\/uploads\/2022\/12\/Custom-CSS-Click-to-Chat-1024x351.webp\" alt=\"\" class=\"wp-image-7094\" style=\"width:756px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/12\/Custom-CSS-Click-to-Chat-1024x351.webp 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/12\/Custom-CSS-Click-to-Chat-300x103.webp 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/12\/Custom-CSS-Click-to-Chat-768x263.webp 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2022\/12\/Custom-CSS-Click-to-Chat.webp 1143w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Support Page \u2013 Gradient CSS<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/clicktochat.techponder.com\/wp-content\/uploads\/2022\/12\/Support-Page-Contact-Form.webp\" alt=\"\" class=\"wp-image-7158\" style=\"width:276px;height:auto\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>And the code we can add in Custom CSS is,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.ctc_g_heading,\n.g_ctc_s_7_1,\n.ctc_s_7_icon_padding {\n     background-image: linear-gradient(90deg, #f92c8b 0%, #b02cd6 100%);\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pricing Page \u2013 Gradient CSS<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/clicktochat.techponder.com\/wp-content\/uploads\/2022\/12\/Pricing-Page-Contact-Form.webp\" alt=\"\" class=\"wp-image-7159\" style=\"width:288px;height:auto\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>And the code we can add in Custom CSS is,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.ctc_g_heading,\n.g_ctc_s_7_1,\n.ctc_s_7_icon_padding {\n     background-image: linear-gradient(90deg, #f92c8b 0%, #b02cd6 100%);\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Here,&nbsp;<em>ctc_g_heading&nbsp;&nbsp;<\/em>is the class of the heading in the form<\/li>\n\n\n\n<li><em>g_ctc_s_7_1&nbsp;<\/em>is the class name for the call-to-action Button<\/li>\n\n\n\n<li><em>ctc_s_7_icon&nbsp;<\/em>is the class for the icon<\/li>\n<\/ul>\n\n\n\n<p>After adding the required CSS, click <strong>Save Changes<\/strong>.<\/p>\n\n\n\n<p>The gradient-styled contact form will now be visible based on the applied CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Key Features of the Contact Form Integration:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Streamlined Navigation<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Once the user fills out the form, the filled details are redirected to a WhatsApp chat, pre-filled with their form details.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Notifications (Email &amp; Webhooks)<\/strong>:\n<ul class=\"wp-block-list\">\n<li>The admin receives an email notification with the user\u2019s submitted details for record-keeping and follow-up.<\/li>\n\n\n\n<li>We can also use webhooks to share the form details with other Applications<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Related Links<\/h3>\n\n\n\n<p><a href=\"https:\/\/clicktochat.techponder.com\/custom-css\/\" data-type=\"link\" data-id=\"https:\/\/clicktochat.techponder.com\/custom-css\/\" target=\"_blank\" rel=\"noopener\">Custom CSS Code<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings-form\/\" data-type=\"link\" data-id=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/docs\/greetings-form\/\">Greetings Fom Documentation<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>At HoliThemes Click to Chat, a contact form is added on both the Support page and the Pricing page to collect user details before starting a conversation. This ensures smoother communication and faster responses by capturing essential information upfront. Step-by-Step process to configure the Contact Form: Adding Custom CSS From Click to Chat Plugin itself [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_htd2_assets":[]},"categories":[61],"tags":[],"class_list":["post-3843","post","type-post","status-publish","format-standard","hentry","category-case-study"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/3843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/comments?post=3843"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/3843\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=3843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=3843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=3843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}