How to create a simple contact from
Hello friends, welcome to the Techly350 blog. And today in this article, we will know about the simple contact from Script for Blogger Script. And in such a situation, many friends nowadays use Blogger or Blogspot to do blogging.
In such a situation, there is no facility to install any plugin for Blogger. So Blogger Widget has been started for this. In this way, new blogger Widgets are being created by coding.
simple contact from Script for Blogger by Techly360
Now, Finally simple contact from script free download for blogger is here. as we know New Year 2023 is very close. and now this is Earning time for bloggers. So Nowadays Happy New Year Wishing Websites are Very Trending.
So using Our Script you can easily create your own happy simple contact from on Blogger. To apply it to your blog, some script has to be used. A mixture of HTML and Pure CSS is seen in this script. So follow the steps given below.
So I have provided an HTML script for simple contact from.
- How to Add simple contact from Script for Blogger.
- Go to page section.
- Now Click on create a new page
- And paste paste.
- Now save project.
- And copy link.
- Go to layout section.
- Click add a new gadget.
- Select and add linklist option.
- Paste "name" replace to "connect page" and "https://" replace to "link".
- And save.
- View blog.
First step:
open code editor
Second this code is copy
<!doctype html>
Contact Form
<style>
bodyx {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: auto;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
font-weight: bold;
}
input, textarea, button {
margin-bottom: 15px;
padding: 10px;
font-size: 16px;
}
button {
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
</style>
<h1>Contact Us</h1>
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required />
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit" class="buttonX">Send</button>
</form>
<script>
const botToken = '<Bot Token>';
const chatId = '<Chat Id>';
document.getElementById('contactForm').addEventListener('submit', async (e) => {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
const message = document.getElementById('message').value;
const text = `
New Contact Form Submission:
- Name: ${name}
- Email: ${email}
- Phone: ${phone}
- Message: ${message}
`;
try {
const response = await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
chat_id: chatId,
text: text
})
});
if (response.ok) {
alert('Message sent successfully!'); document.getElementById('contactForm').reset();
} else {
alert('Failed to send message. Please try again.');
}
} catch (error) {
console.error('Error:', error);
alert('An error occurred. Please try again later.');
}
});
</script>
</!doctype>
And paste code editor
Second step:
Replace bot token and chat ID
<Bot Token>
Link click here
<Chat Id>
Link click here
Conclusion – How did you like this article in simple contact from Script for Blogger? You must definitely comment by commenting in the comment box below. If you also want to give some kind of Suggestion, then you can share your opinion with us in the Comment Box below
