Today in this article, we will discuss how to design a contact page on a blogger site and design it in such a way that when any of your website visitors submits a message to contact you, that message goes directly to your Telegram account. Today we will share with you a quote of such a design
.png "How to Create a Stylish Contact Page Using Telegram API") |
| How to Create a Stylish Contact Page Using Telegram API |
How to customize codes :
Now let's see what steps you need to take to customize these codes:
- You need to create two pages for your blogger site
- Contact Us Page
- Thank You Page
- You must have a Telegram account
How to create a page on Blogger Site
- Log in to your Blogger account.
- Go to Pages in the left sidebar.
- Click New Page and select Blank Page.
- Give your page a title, such as "Contact Us."
- Switch to the HTML view (click the pencil icon or the HTML button).
- Copy the codes given here and paste the codes on the contact page.
<div class="st-apicontact-contact-container">
<h1 class="st-apicontact-heading">Contact Us</h1>
<p class="st-apicontact-description">If you have any questions, you can contact us. We will try our best to answer your questions.</p>
<input type="text" id="st-apicontact-name" class="st-apicontact-input" placeholder="Enter your full name" required>
<input type="email" id="st-apicontact-email" class="st-apicontact-input" placeholder="Enter your email address" required>
<input type="text" id="st-apicontact-telegram" class="st-apicontact-input" placeholder="Enter your Telegram username (optional)">
<textarea id="st-apicontact-message" class="st-apicontact-textarea" rows="5" placeholder="Type your message here..." required></textarea>
<button class="st-apicontact-button" onclick="validateAndSendMessage()">
<i class="fas fa-paper-plane send-icon"></i> Send
</button>
<div class="st-apicontact-status-message" id="st-apicontact-status"></div>
</div>
<!-- Social Media Section -->
<div class="st-apicontact-social-section">
<div class="st-apicontact-social-box">
<p class="st-apicontact-social-text">Or connect with us on social media:</p>
<div class="st-apicontact-social-icons">
<a href="#" target="_blank" class="st-apicontact-social-link"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank" class="st-apicontact-social-link"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank" class="st-apicontact-social-link"><i class="fab fa-instagram"></i></a>
<a href="#" target="_blank" class="st-apicontact-social-link"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<style>
/* Base Styles */
.st-apicontact-contact-container {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 900px;
text-align: center;
margin: 0 auto; /* Center the container */
}
.st-apicontact-heading {
margin-bottom: 1.5rem;
font-size: 2rem;
color: #333;
}
.st-apicontact-input, .st-apicontact-textarea {
width: 100%;
padding: 0.75rem;
margin: 0.5rem 0;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
background-color: white;
color: #333;
}
.st-apicontact-button {
background-color: #ff7f50; /* Orange color */
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.st-apicontact-button:hover {
background-color: #ff6347; /* Darker orange on hover */
}
.st-apicontact-status-message {
margin-top: 1rem;
font-size: 0.9rem;
color: #333;
}
/* Social Media Section */
.st-apicontact-social-section {
margin-top: 2rem;
text-align: center;
}
.st-apicontact-social-box {
background: white;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Shadow effect */
}
.st-apicontact-social-text {
font-size: 1rem;
color: #333;
margin-bottom: 1rem;
}
.st-apicontact-social-icons {
display: flex;
justify-content: center;
gap: 1rem;
}
.st-apicontact-social-link {
text-decoration: none;
color: #ff7f50; /* Orange icon color */
font-size: 1.5rem;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 2px solid #ff7f50; /* Orange outline */
}
.st-apicontact-social-link:hover {
background-color: #ff7f50; /* Orange background on hover */
color: white; /* White icon color on hover */
}
/* Send Button Icon Animation */
.send-icon {
transition: transform 0.3s ease;
}
.st-apicontact-button:active .send-icon {
transform: translateY(-5px) rotate(45deg); /* Move up and rotate */
}
/* Dark Mode Styles */
.dark-mode {
body {
background-color: #121212; /* Dark background */
color: #ffffff; /* Light text */
}
.st-apicontact-contact-container {
background-color: #1e1e1e; /* Dark container background */
color: #ffffff; /* Light text */
}
.st-apicontact-heading {
color: #ffffff; /* Light text */
}
.st-apicontact-input, .st-apicontact-textarea {
background-color: #2d2d2d; /* Dark input background */
color: #ffffff; /* Light text */
border-color: #444; /* Dark border */
}
.st-apicontact-status-message {
color: #ffffff; /* Light text */
}
.st-apicontact-social-box {
background-color: #1e1e1e; /* Dark background */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Enhanced shadow in dark mode */
}
.st-apicontact-social-text {
color: #ffffff; /* Light text */
}
.st-apicontact-social-link {
color: #ff7f50; /* Orange icon color */
border-color: #ff7f50; /* Orange outline */
}
.st-apicontact-social-link:hover {
background-color: #ff7f50; /* Orange background on hover */
color: white; /* White icon color on hover */
}
}
/* Responsive Styles */
@media (max-width: 600px) {
.st-apicontact-contact-container {
padding: 1.5rem;
}
.st-apicontact-heading {
font-size: 1.75rem;
}
.st-apicontact-input, .st-apicontact-textarea {
font-size: 0.9rem;
}
.st-apicontact-button {
font-size: 0.9rem;
padding: 0.5rem 1rem;
}
.st-apicontact-social-link {
font-size: 1.2rem;
width: 35px;
height: 35px;
}
}
@media (max-width: 400px) {
.st-apicontact-contact-container {
padding: 1rem;
}
.st-apicontact-heading {
font-size: 1.5rem;
}
.st-apicontact-input, .st-apicontact-textarea {
font-size: 0.8rem;
}
.st-apicontact-button {
font-size: 0.8rem;
padding: 0.5rem;
}
.st-apicontact-social-link {
font-size: 1rem;
width: 30px;
height: 30px;
}
}
</style>
<script>
function validateAndSendMessage() {
const name = document.getElementById('st-apicontact-name').value.trim();
const email = document.getElementById('st-apicontact-email').value.trim();
const telegram = document.getElementById('st-apicontact-telegram').value.trim();
const message = document.getElementById('st-apicontact-message').value.trim();
// Check if required fields are empty
if (!name || !email || !message) {
document.getElementById('st-apicontact-status').innerText = 'Please fill out all required fields.';
return; // Stop the function if validation fails
}
// If all required fields are filled, proceed to send the message
sendMessage(name, email, telegram, message);
}
function sendMessage(name, email, telegram, message) {
const text = `Name: ${name}\nEmail: ${email}\nTelegram: ${telegram || 'Not provided'}\nMessage: ${message}`;
const botToken = 'YOUR_BOT_TOKEN'; // Your bot token
const chatId = 'YOUR_CHAT_ID'; // Your chat ID
const url = `https://api.telegram.org/bot${botToken}/sendMessage`;
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
chat_id: chatId,
text: text
})
})
.then(response => response.json())
.then(data => {
if (data.ok) {
// Redirect to the thank you page after successful submission
window.location.href = 'THANK_YOU_PAGE_URL'; // Replace with your thank you page URL
} else {
document.getElementById('st-apicontact-status').innerText = 'Failed to send message.';
}
})
.catch(error => {
document.getElementById('st-apicontact-status').innerText = 'An error occurred.';
console.error('Error:', error);
});
}
</script>
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
- Click Publish to save and publish the page.
How to find API token and Chat ID
Let us now know how to extract API token and group chat ID from a Telegram bot and a Telegram group.
How to find a bot API token?
- Open your Telegram app and search for BotFather bot, there is a bot named BotFather, open it.
- Now click on the 'Create a New Bot' option, create a bot for your contact page, once created, you will get an API token for your bot.
 |
| How to find a bot API token? |
- Now paste the codes that you copied from our website into your contact us page. Go to the script section of that code and you will see a text called YOUR_BOT_TOKEN, put your bot API token in that place.
How to find a Chat ID?
- Open your Telegram app and create a group.
- Now add your created bot as a group member to your Telegram group.
- Now you log in to the web.telegram.org website from your Telegram account.
- Now open the group you created and copy the URL of the group.
- Now at the end of the URL, after the hashtag, there are some numbers with minus. These numbers with minus are your chat ID. (Example : -23456)
.png "How to find a Chat ID?") |
| How to find a Chat ID? |
- Now paste the code copied from our website into your Contact us page. Go to the script section of that code and you will see a text called YOUR_CHAT_ID, put your CHAT ID in that place.
How to create a Thank You page for a blogger site
- Log in to your Blogger account.
- Go to Pages in the left sidebar.
- Click New Page and select Blank Page.
- Give your page a title, such as "Thank You."
- Switch to the HTML view (click the pencil icon or the HTML button).
- Copy the codes given here and paste the codes on the contact page.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
/* Light mode styles */
.st-ctthank-container {
font-family: sans-serif;
text-align: center;
background-color: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%; /* Responsive width */
max-width: 800px; /* Maximum width for larger screens */
position: relative;
margin: 0 auto;
margin-top: 50px;
}
.st-ctthank-mail-icon {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
background-color: #ff8c42; /* Orange color */
color: white;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
animation: envelopeOpen 2s ease-in-out; /* Unique envelope animation */
}
@keyframes envelopeOpen {
0% {
transform: translateX(-50%) scale(1);
}
20% {
transform: translateX(-50%) scale(1.1);
}
40% {
transform: translateX(-50%) scale(1);
}
60% {
transform: translateX(-50%) rotate(-10deg) scale(1.1);
}
80% {
transform: translateX(-50%) rotate(10deg) scale(1.1);
}
100% {
transform: translateX(-50%) rotate(0deg) scale(1);
}
}
.st-ctthank-heading {
color: #333;
margin-bottom: 20px;
font-size: 24px; /* Responsive font size */
opacity: 0; /* Start invisible for fade-in */
animation: fadeIn 1s ease-in-out 2s forwards; /* Fade-in animation */
}
.st-ctthank-paragraph {
color: #666;
line-height: 1.6;
margin-bottom: 30px;
font-size: 16px; /* Responsive font size */
opacity: 0; /* Start invisible for fade-in */
animation: fadeIn 1s ease-in-out 2.5s forwards; /* Fade-in animation */
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.st-ctthank-social-section {
padding: 20px;
border: 1px solid #ddd;
border-radius: 4px;
margin-top: 20px; /* Space between button and social section */
}
.st-ctthank-social-section h2 {
font-size: 18px;
margin-bottom: 15px;
color: #333;
opacity: 0; /* Start invisible for fade-in */
animation: fadeIn 1s ease-in-out 3s forwards; /* Fade-in animation */
}
.st-ctthank-social-icons {
display: flex;
justify-content: center;
margin-top: 20px;
}
.st-ctthank-social-icons a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ff8c42; /* Orange color */
margin: 0 5px;
text-decoration: none;
font-size: 16px;
color: white; /* White icons for contrast */
opacity: 0; /* Start invisible for fade-in */
animation: bounceIn 0.5s ease-in-out 3.5s forwards, bounce 2s ease-in-out 4.5s infinite; /* Bounce animation */
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.5);
}
70% {
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.st-ctthank-visit-button {
background-color: #ff8c42; /* Orange color */
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 20px;
font-size: 16px; /* Responsive font size */
opacity: 0; /* Start invisible for fade-in */
animation: fadeIn 1s ease-in-out 2.5s forwards; /* Only fade-in animation */
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
.st-ctthank-container {
background-color: #1e1e1e;
}
.st-ctthank-heading,
.st-ctthank-social-section h2 {
color: #f5f5f5;
}
.st-ctthank-paragraph {
color: #ccc;
}
.st-ctthank-social-section {
border-color: #444;
}
.st-ctthank-social-icons a {
background-color: #ff8c42; /* Orange color */
color: white;
}
.st-ctthank-mail-icon {
background-color: #ff8c42; /* Orange color */
color: white;
}
.st-ctthank-visit-button {
background-color: #ff8c42; /* Orange color */
color: white;
}
}
/* Media Queries for Responsive Design */
@media (max-width: 768px) {
.st-ctthank-container {
padding: 20px; /* Reduce padding on smaller screens */
}
.st-ctthank-heading {
font-size: 20px; /* Smaller font size for smaller screens */
}
.st-ctthank-paragraph {
font-size: 14px; /* Smaller font size for smaller screens */
}
.st-ctthank-visit-button {
width: 100%; /* Full width for button on smaller screens */
}
}
@media (max-width: 480px) {
.st-ctthank-mail-icon {
width: 40px;
height: 40px;
font-size: 20px; /* Smaller icon for very small screens */
}
.st-ctthank-heading {
font-size: 18px; /* Smaller font size for very small screens */
}
.st-ctthank-paragraph {
font-size: 12px; /* Smaller font size for very small screens */
}
}
</style>
<div class="st-ctthank-container">
<div class="st-ctthank-mail-icon"><i class="fas fa-envelope"></i></div>
<h1 class="st-ctthank-heading">Thank you!</h1>
<p class="st-ctthank-paragraph">Your submission has been successfully received. We appreciate your time and will get back to you shortly.</p>
<!-- Go To Home Button -->
<a href="/" class="st-ctthank-visit-button">
<i class="fas fa-home"></i> <!-- Home icon -->
Go To Home
</a>
<!-- Connect With Us Section -->
<div class="st-ctthank-social-section">
<h2>Connect With Us</h2>
<div class="st-ctthank-social-icons">
<a href="https://facebook.com/yourpage"><i class="fab fa-facebook-f"></i></a>
<a href="https://linkedin.com/yourpage"><i class="fab fa-linkedin-in"></i></a>
<a href="https://pinterest.com/yourpage"><i class="fab fa-pinterest-p"></i></a>
<a href="https://twitter.com/yourpage"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
- Click Publish to save and publish the page.
- Then view the page and copy the page URL.
- Now go to the script section of the contact us page code and find THANK_YOU_PAGE_URL and paste the URL of your thank you page there.
What features are used in this code?
The code provided is a fully functional contact form integrated with a Telegram bot for sending messages. Here is a detailed description of its key features:
- Contact Form: The form collects username, email, Telegram username (optional) and a message. It ensures that the required fields (name, email, and message) are filled in before submitting. This is done using JavaScript validation.
- Telegram API: When the form is submitted, the data is sent to a Telegram bot, which forwards the message to a specific chat. It is useful for receiving notifications directly on Telegram, which makes it a great tool for real-time communication.
- Social Media Links: At the bottom of the form, there are social media icons (Facebook, Twitter, Instagram, LinkedIn) that users can click to connect with you on other platforms. This section is styled to be visually appealing and interactive.
- Styling and Responsiveness: The form is styled using CSS to look clean and modern. It is also responsive, meaning it adjusts to different screen sizes, making it mobile-friendly. The design includes subtle animations and hover effects to enhance the user experience.
- Dark Mode Support: The code includes a dark mode feature, which changes the color scheme for better visibility in low-light environments. This is achieved using CSS variables and classes.
- Error Handling and Status Messages: The form has a status message area that displays error messages (eg, if required fields are missing) or success messages (eg, when the form has been submitted successfully).
Why use this contact page code?
This code is a great starting point for those looking to:
- Add a contact form to their website.
- Receive real-time notifications via Telegram.
- Provide an easy way for users to connect on social media.
- Ensure a responsive and visually appealing design.
- Implement dark mode for an improved user experience.
Info!
Customizing the code may seem intimidating at first, but with a little practice, it becomes much easier. The provided code is flexible and can be adapted to different needs. Whether you are building a personal website or a business platform, this contact form is a valuable addition.
Don't hesitate to experiment with the code, make changes, and see how it works. If you have any questions or need further assistance, don't hesitate to get in touch.
Frequently Asked Questions (FAQs)
What does this code do?
This code creates a contact form with fields for the user's name, email, Telegram username (optional), and a message. It also includes a social media section with links to Facebook, Twitter, Instagram, and LinkedIn. When the user submits the form, the data is sent to a Telegram bot using the Telegram Bot API. If the submission is successful, the user is redirected to a "Thank You" page.
How does the Telegram integration work?
The form data is sent to a Telegram bot using the Telegram Bot API. Here's how it works:
- The sendMessage() function constructs a message with the user's input (name, email, Telegram username, and message).
- It sends this message to a specified Telegram chat using the bot's token and chat ID.
- The bot token and chat ID need to be replaced with actual values for the integration to work.
How do I set up the Telegram bot?
Create a Telegram Bot:
- Open Telegram and search for the BotFather.
- Use the /newbot command to create a new bot and get the bot token.
Get Your Chat ID:
- Start a chat with your bot.
- Use the getUpdates method from the Telegram API to retrieve your chat ID:
- Look for the chat.id field in the response.
https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates
Replace Placeholder Values:
- Replace YOUR_BOT_TOKEN and YOUR_CHAT_ID in the JavaScript code with your actual bot token and chat ID.
How do I customize the form fields?
You can add, remove, or modify form fields by editing the HTML:
- Add a Field:
- Remove a Field: Delete the corresponding <input> or <textarea> element.
- Modify a Field: Change the type, id, placeholder, or other attributes as needed.
<input type="text" id="st-apicontact-phone" class="st-apicontact-input" placeholder="Enter your phone number">
How do I change the social media links?
Replace the # placeholder in the href attribute of each social media link with the actual URL:
<a href="https://facebook.com/yourpage" target="_blank" class="st-apicontact-social-link">
<i class="fab fa-facebook-f"></i>
</a>
How do I enable dark mode?
Dark mode is implemented using the .dark-mode class. To enable it:
- Add the .dark-mode class to a parent element (e.g., <body>):
- Ensure the dark mode styles are correctly applied (see the "Improvements and Fixes" section for details).
<body class="dark-mode">
How do I change the styling?
You can customize the styles in the <style> section:
- Colors: Modify the background-color, color, and border-color properties.
- Layout: Adjust padding, margin, width, and height.
- Animations: Edit the transition and transform properties for the "Send" button icon.
How do I make the form responsive?
The form is already responsive, but you can adjust the breakpoints in the media queries:
@media (max-width: 600px) {
/* Styles for screens smaller than 600px */
}
@media (max-width: 400px) {
/* Styles for screens smaller than 400px */
}
How do I add CAPTCHA or spam protection?
You can integrate a CAPTCHA service like Google reCAPTCHA:
- Sign up for reCAPTCHA at Google reCAPTCHA.
- Add the reCAPTCHA script and widget to your form:
- Validate the CAPTCHA response on the server side.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
How do I test the form?
Open the HTML file in a browser.
- Fill out the form and click "Send."
- Check the browser console for errors.
- Verify that the message is received in the specified Telegram chat.
What if the form submission fails?
If the form submission fails:
- Check the browser console for errors.
- Ensure the bot token and chat ID are correct.
- Verify that the Telegram bot is active and has permission to send messages.
How do I redirect to a custom "Thank You" page?
Replace THANK_YOU_PAGE_URL in the JavaScript code with the URL of your thank you page:
window.location.href = 'https://yourwebsite.com/thank-you';
How do I add more social media platforms?
Add a new <a> element with the appropriate Font Awesome icon:
<a href="https://youtube.com/yourchannel" target="_blank" class="st-apicontact-social-link">
<i class="fab fa-youtube"></i>
</a>
How do I use a different icon library?
Replace the Font Awesome <link> with the library of your choice:
<!-- Example: Using Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Update the icons in the HTML accordingly:
<i class="material-icons">send</i>
How do I deploy this form?
Save the code in an .html file.
- Host the file on a web server (e.g., GitHub Pages, Netlify, or your own server).
- Ensure the Telegram bot token and chat ID are securely stored and not exposed publicly.
.png)