At HoliThemes Click to Chat, we added a contact form on the support page to collect user details before contacting us. This feature streamlines communication but also provides essential information upfront, enhancing both the user experience and our ability to offer timely support.
Key Features of the Contact Form Integration:
- Streamlined Navigation:
- Once the user fills out the form, the filled details are redirected to a WhatsApp chat, pre-filled with their form details.
- Notifications (Email & Webhooks):
- The admin receives an email notification with the user’s submitted details for record-keeping and follow-up.
- We can also use webhooks to share the form details with other Applications
Step-by-Step Guide to Configure the Contact Form:
- Navigate to the ”Click to Chat” page at Style, Position, select Style-7, and position to fixed.
- And next, go to ”Click to Chat” → ”Greetings” and select ”Greetings Form” from the list
- Customize the form fields (e.g., Name, Website Address, Message) to collect the necessary user details
Adding Custom CSS From Click to Chat Plugin itself
- Navigate to Other setting —> Custom CSS Section to add Custom Gradient CSS form
- Add the Custom CSS in the Box there
And the code we have entered there is,
.ctc_g_heading,
.g_ctc_s_7_1,
.ctc_s_7_icon_padding {
background-image: linear-gradient(90deg, #f92c8b 0%, #b02cd6 100%);
}- Here, ctc_g_heading is the class of the heading in the form
- g_ctc_s_7_1 is the class name for the call-to-action Button
- ctc_s_7_icon is the class for the icon
After adding the code, don’t forget to click on save changes. And then you can see the changes, like our support page.