-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtailwind-chat-box-form.html
144 lines (142 loc) · 5.9 KB
/
tailwind-chat-box-form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<div class="flex items-center justify-center p-12">
<!-- Author: FormBold Team -->
<!-- Learn More: https://formbold.com -->
<div class="w-full">
<div
class="formbold-form-wrapper mx-auto hidden w-full max-w-[550px] rounded-lg border border-[#e0e0e0] bg-white"
>
<div
class="flex items-center justify-between rounded-t-lg bg-[#6A64F1] py-4 px-9"
>
<h3 class="text-xl font-bold text-white">Let's chat? - Online</h3>
<button onclick="chatboxToogleHandler()" class="text-white">
<svg width="17" height="17" viewBox="0 0 17 17" class="fill-current">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.474874 0.474874C1.10804 -0.158291 2.1346 -0.158291 2.76777 0.474874L16.5251 14.2322C17.1583 14.8654 17.1583 15.892 16.5251 16.5251C15.892 17.1583 14.8654 17.1583 14.2322 16.5251L0.474874 2.76777C-0.158291 2.1346 -0.158291 1.10804 0.474874 0.474874Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.474874 16.5251C-0.158291 15.892 -0.158291 14.8654 0.474874 14.2322L14.2322 0.474874C14.8654 -0.158292 15.892 -0.158291 16.5251 0.474874C17.1583 1.10804 17.1583 2.1346 16.5251 2.76777L2.76777 16.5251C2.1346 17.1583 1.10804 17.1583 0.474874 16.5251Z"
/>
</svg>
</button>
</div>
<form
action="https://formbold.com/s/FORM_ID"
method="POST"
class="py-6 px-9"
>
<div class="mb-5">
<label
for="name"
class="mb-3 block text-base font-medium text-[#07074D]"
>
Your Name
</label>
<input
type="text"
name="name"
id="name"
placeholder="ENter your name"
class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
/>
</div>
<div class="mb-5">
<label
for="email"
class="mb-3 block text-base font-medium text-[#07074D]"
>
Email Address
</label>
<input
type="email"
name="email"
id="email"
placeholder="[email protected]"
class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
/>
</div>
<div class="mb-5">
<label
for="message"
class="mb-3 block text-base font-medium text-[#07074D]"
>
Message
</label>
<textarea
rows="4"
name="message"
id="message"
placeholder="Explain your queries"
class="w-full resize-none rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
></textarea>
</div>
<div>
<button
class="hover:shadow-form w-full rounded-md bg-[#6A64F1] py-3 px-8 text-center text-base font-semibold text-white outline-none"
>
Start Chat
</button>
</div>
</form>
</div>
<div
class="mx-auto mt-12 flex max-w-[550px] items-center justify-end space-x-5"
>
<button
class="flex h-[70px] w-[70px] items-center justify-center rounded-full bg-[#6A64F1] text-white"
onclick="chatboxToogleHandler()"
>
<span class="cross-icon hidden">
<svg
width="17"
height="17"
viewBox="0 0 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.474874 0.474874C1.10804 -0.158291 2.1346 -0.158291 2.76777 0.474874L16.5251 14.2322C17.1583 14.8654 17.1583 15.892 16.5251 16.5251C15.892 17.1583 14.8654 17.1583 14.2322 16.5251L0.474874 2.76777C-0.158291 2.1346 -0.158291 1.10804 0.474874 0.474874Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.474874 16.5251C-0.158291 15.892 -0.158291 14.8654 0.474874 14.2322L14.2322 0.474874C14.8654 -0.158292 15.892 -0.158291 16.5251 0.474874C17.1583 1.10804 17.1583 2.1346 16.5251 2.76777L2.76777 16.5251C2.1346 17.1583 1.10804 17.1583 0.474874 16.5251Z"
fill="white"
/>
</svg>
</span>
<span class="chat-icon">
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.8333 14.0002V3.50016C19.8333 3.19074 19.7103 2.894 19.4915 2.6752C19.2728 2.45641 18.976 2.3335 18.6666 2.3335H3.49992C3.1905 2.3335 2.89375 2.45641 2.67496 2.6752C2.45617 2.894 2.33325 3.19074 2.33325 3.50016V19.8335L6.99992 15.1668H18.6666C18.976 15.1668 19.2728 15.0439 19.4915 14.8251C19.7103 14.6063 19.8333 14.3096 19.8333 14.0002ZM24.4999 7.00016H22.1666V17.5002H6.99992V19.8335C6.99992 20.1429 7.12284 20.4397 7.34163 20.6585C7.56042 20.8772 7.85717 21.0002 8.16659 21.0002H20.9999L25.6666 25.6668V8.16683C25.6666 7.85741 25.5437 7.56066 25.3249 7.34187C25.1061 7.12308 24.8093 7.00016 24.4999 7.00016Z"
fill="white"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
<script>
const formWrapper = document.querySelector(".formbold-form-wrapper");
const crossIcon = document.querySelector(".cross-icon");
const chatIcon = document.querySelector(".chat-icon");
function chatboxToogleHandler() {
formWrapper.classList.toggle("hidden");
crossIcon.classList.toggle("hidden");
chatIcon.classList.toggle("hidden");
}
</script>