Techy350

How to create a simple contact from

Hello friends, welcome to the B2C Software 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 B2C Software 

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.

1. Open the your blogger dashboard 
2. Open page section 
3. Create a new page a
4. This .html code copy 
5. Pest your page 

	
<form id="contactForm">
    <label>Name:</label>
    <input id="name" name="name" required="" type="text" />
    <label>Email:</label>
    <input id="email" name="email" required="" type="email" />
    <label>Phone Number:</label>
    <input id="phone" name="phone" required="" type="tel" />
    <label>Message:</label>
    <textarea id="message" name="message" required="" rows="5"></textarea>
    <button class="buttonX" type="submit">Send</button>
  </form>

• This .css code is copy 

  <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>

• This .js code is copy 

 
 <script>
	const botToken = 'ENTER_YOUR_BOT_TOKEN';
    const chatId = 'ENTER_YOUR_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>

And paste code editor

Second step:

Replace bot token and chat ID

	const botToken = 'ENTER_YOUR_BOT_TOKEN';

Link click here 

 const chatId = 'ENTER_YOUR_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