At Holithemes Click to Chat, we added a contact form on the support page to collect the user details before contacting us.
Soon after a user fills out the form, it will navigate to WhatsApp chat with the form detail and at the backend, the admin will get an email notification with form details.
- Navigate to Click to chat and scroll down to Style,Position and select Style-7
2. Navigate to ‘Click to Chat’–> ‘Greetings’
3. select the Greetings Form from the list. [Greetings Form is available in the PRO version]
4. Build the Greetings form with the form fields like Name, Website Address, and Message.
5. Change the Main Content – Background Color to “#5952c50d” and Save Changes.
For Header Content, we will add a gradient color using Additional CSS.
6. Navigate to ‘Click to Chat‘–> ‘Customize’ and select ‘Style-7’.
7. Hide the Call to Action for Style-7.
8. Let us add the Gradient color to our Greetings form using Additional CSS.
- From the admin Dashboard, Navigate to ‘Appearance’–> ‘Customize’.
- To get the Header style, Greetings Call to Action button style, and Style-7 the same as the support page, add the below line of code to the class=”ctc_g_heading”, “g_ctc_s_7_1″, class=”ctc_s_7_icon_padding”.
.ctc_g_heading,
.g_ctc_s_7_1,
.ctc_s_7_icon_padding {
background-image: linear-gradient(90deg,#f92c8b 0%,#b02cd6 100%);
}6. After modifying the code, click on publish.
Add CSS for the Theme Twenty Twenty Three
When we click on the ”WhatsApp Us” button, the Contact form gets opened.
To open the greeting form by clicking on any element, add the class name: ctc_greetings to that element.