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:
- 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
Support Page – Gradient CSS
And the code we can add in Custom CSS is,
.ctc_g_heading,
.g_ctc_s_7_1,
.ctc_s_7_icon_padding {
background-image: linear-gradient(90deg, #f92c8b 0%, #b02cd6 100%);
}Pricing Page – Gradient CSS
And the code we can add in Custom CSS 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 required CSS, click Save Changes.
The gradient-styled contact form will now be visible based on the applied CSS.
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