How we designed the Contact form on the support page

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, admin will get an email notification with form details.

  1. 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’.

Add CSS for Twenty Twenty Three Theme.

For Twenty Twenty Three Theme, to customize CSS, we need to add customize.php at the WordPress dashboard URL.
  • At the left sidebar, select Additional CSS
  • 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”.
background-image: linear-gradient(90deg,#f92c8b 0%,#b02cd6 100%);

6. After modifying the code, click on publish.

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.

Leave a comment

Your email address will not be published. Required fields are marked *