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 Click to Chat → General → Widget Style & Position, select Style 7, and set its 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, #14b8a6 0%, #0d9488 100%) !important;
}- 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_padding is the class for the icon container, and ctc_s_7_cta is the class for its Call to Action text.
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