API

How to Create a Contact Form using Telegram Bot API

Collect your visitors' form submissions on Telegram

How to Create a Contact Form using Telegram Bot API

Hello! Welcome to Fineshop Design. As we know, Blogger Contact Form API was updated recently and now it requires a token each an every time to successfully submit the form, that means you need to add Contact Form Widget through Layout which results in slow page loading due to blogger widgets javascripts, which we were using in only the form page earlier. Most of Bloggers use Telegram, so I have come up with a new post titled How to Create a Contact Form using Telegram Bot API . Today, I will share codes which will allow you to receive the form submissions directly to your Telegram Group. You can also add extra fields in this form, i.e. Mobile Number, Website or anything, which was not possible in Blogger Contact Form. This is an educational tutorial. Please consider using it for good intension. Before we start let's take a look at its Demo. Demo Requirements A telegram bot, if you don't have, you can read documentation here . Bot API token is required. A Telegram Group's ID, for tha…

About the author

deo@fineshopdesign:~$ echo "Hello World!"

9 comments

Chocolate con leche

How can I know the chat ID?
1. Deo Kumar
  
  Login to Telegram Web, open the group you will get Group ID in url.
2. Farhan
  
  I followed every steps.And when I tried to send a message via contact us page,It shows "An error occured".
3. M. M. Anik
  
  Just awesome. Perfectly working. Thank you so much
4. Deo Kumar
  
  @Farhan Have you added the correct Group Chat ID? Also make sure bot is in that group.
5. Yacine Bagua
  
  @Deo K. i follow step by step and still have the same problem , is "An error occured" , i need help
6. Deo Kumar
  
  @Yacine, Make sure you have put the correct details. Or can you share your page link?
Thabresh Syed

I followed every steps.And when I tried to send a message via contact us page,It shows "An error occured". please help
1. Deo Kumar
  
  Make sure you have added the correct Chat ID

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2263754362-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7L9kArUByDZxSz2AdsfI_HCaRs0A:1733301799470';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3667079295234480644','//www.fineshopdesign.com/2022/07/telegram-api-contact-form.html?amp\x3d1','3667079295234480644');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3667079295234480644', 'title': 'Fineshop Design', 'url': 'https://www.fineshopdesign.com/2022/07/telegram-api-contact-form.html?amp\x3d1', 'canonicalUrl': 'https://www.fineshopdesign.com/2022/07/telegram-api-contact-form.html', 'homepageUrl': 'https://www.fineshopdesign.com/?amp\x3d1', 'searchUrl': 'https://www.fineshopdesign.com/search', 'canonicalHomepageUrl': 'https://www.fineshopdesign.com/', 'blogspotFaviconUrl': 'https://www.fineshopdesign.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-83PT0ZGCQ7', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en-GB', 'localeUnderscoreDelimited': 'en_gb', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Fineshop Design - Atom\x22 href\x3d\x22https://www.fineshopdesign.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Fineshop Design - RSS\x22 href\x3d\x22https://www.fineshopdesign.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Fineshop Design - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3667079295234480644/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Fineshop Design - Atom\x22 href\x3d\x22https://www.fineshopdesign.com/feeds/7332488657134362353/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/24db001739b32820', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en_GB\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '7332488657134362353', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJC03zpmTXdnym-ZpAwOu2Hy4Z3xyCRn92rbZ__dmKoxLocjf5p808NPvyWg38PKs7QdUE5UuzTIVp4jTmwO2ZUIE9bNEFv9XQSru52hV7S9vDoroJicifWPwttmVBn7s9wgARJK30N_kF_OlNe9U5yi7HWP5O6QmPjqAsk9OGC4OIpOz1U0zLaKZm5A/s72-c-rw/Contact_Form_Telegram_Bot_API.webp', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJC03zpmTXdnym-ZpAwOu2Hy4Z3xyCRn92rbZ__dmKoxLocjf5p808NPvyWg38PKs7QdUE5UuzTIVp4jTmwO2ZUIE9bNEFv9XQSru52hV7S9vDoroJicifWPwttmVBn7s9wgARJK30N_kF_OlNe9U5yi7HWP5O6QmPjqAsk9OGC4OIpOz1U0zLaKZm5A/s1280-rw/Contact_Form_Telegram_Bot_API.webp', 'pageName': 'How to Create a Contact Form using Telegram Bot API', 'pageTitle': 'Fineshop Design: How to Create a Contact Form using Telegram Bot API', 'metaDescription': 'Collect your visitors\x27 form submissions on Telegram'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard', 'ok': 'Ok', 'postLink': 'Post link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How to Create a Contact Form using Telegram Bot API', 'description': 'Collect your visitors\x27 form submissions on Telegram', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJC03zpmTXdnym-ZpAwOu2Hy4Z3xyCRn92rbZ__dmKoxLocjf5p808NPvyWg38PKs7QdUE5UuzTIVp4jTmwO2ZUIE9bNEFv9XQSru52hV7S9vDoroJicifWPwttmVBn7s9wgARJK30N_kF_OlNe9U5yi7HWP5O6QmPjqAsk9OGC4OIpOz1U0zLaKZm5A/s1280-rw/Contact_Form_Telegram_Bot_API.webp', 'url': 'https://www.fineshopdesign.com/2022/07/telegram-api-contact-form.html?amp\x3d1', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 7332488657134362353}}, {'name': 'widgets', 'data': [{'title': 'Fineshop Design (Header)', 'type': 'Header', 'sectionId': 'sec_Header_Title', 'id': 'Header01'}, {'title': 'Try \x27Cloudflare\x27', 'type': 'BlogSearch', 'sectionId': 'sec_Header_Search', 'id': 'BlogSearch01'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'sec_Header_Icon', 'id': 'TextList01'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'sec_Nav_Widgets_1', 'id': 'HTML01'}, {'title': 'Additional Links', 'type': 'PageList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'PageList02'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'sec_Main_Widgets', 'id': 'Blog01', 'posts': [{'id': '7332488657134362353', 'title': 'How to Create a Contact Form using Telegram Bot API', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJC03zpmTXdnym-ZpAwOu2Hy4Z3xyCRn92rbZ__dmKoxLocjf5p808NPvyWg38PKs7QdUE5UuzTIVp4jTmwO2ZUIE9bNEFv9XQSru52hV7S9vDoroJicifWPwttmVBn7s9wgARJK30N_kF_OlNe9U5yi7HWP5O6QmPjqAsk9OGC4OIpOz1U0zLaKZm5A/s1280-rw/Contact_Form_Telegram_Bot_API.webp', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'in'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'in'}, {'name': 'location', 'label': 'Location:'}]}, {'title': 'Table of contents', 'type': 'HTML', 'sectionId': 'sec_Main_Widgets', 'id': 'HTML11'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'sec_Side_Widgets', 'id': 'PopularPosts01', 'posts': [{'title': 'How to build a PWA (Progressive Web App) for Blogger Site in 2024', 'id': 5695471488630163172}, {'title': 'How to get Channel or Group Information using Telegram API', 'id': 8664372353820550215}, {'title': 'How to permanently remove ?m\x3d1 from Blogger Blog', 'id': 4990960623216260259}, {'title': 'Realtime View Counter using Firebase Database', 'id': 4528218019996351282}, {'title': 'How to build a PWA (Progressive Web App) with Push Notifications for Blogger', 'id': 7396795056227285389}]}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Side_Widgets', 'id': 'Label01'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'sec_Error_404', 'id': 'HTML404'}, {'title': 'Organization Name [BlogTitle]', 'type': 'Image', 'sectionId': 'sec_Footer_Widgets_1', 'id': 'Image21'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'sec_Footer_Credit', 'id': 'HTML21'}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Theme_Hidden', 'id': 'Label41'}, {'title': 'Contact Form', 'type': 'ContactForm', 'sectionId': 'sec_Theme_Hidden', 'id': 'ContactForm41'}, {'title': 'Pageviews last month', 'type': 'Stats', 'sectionId': 'sec_Theme_Hidden', 'id': 'Stats41'}, {'title': 'Image Uploader', 'type': 'Image', 'sectionId': 'sec_Addon_Widgets', 'id': 'Image61'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header01', 'sec_Header_Title', document.getElementById('Header01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch01', 'sec_Header_Search', document.getElementById('BlogSearch01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList01', 'sec_Header_Icon', document.getElementById('TextList01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML01', 'sec_Nav_Widgets_1', document.getElementById('HTML01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList02', 'sec_Nav_Widgets_2', document.getElementById('PageList02'), {'title': 'Additional Links', 'links': [{'isCurrentPage': false, 'href': '/p/sitemap.html', 'title': 'Sitemap'}, {'isCurrentPage': false, 'href': '#', 'title': 'Disclaimer'}, {'isCurrentPage': false, 'href': '#', 'title': 'Privacy'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog01', 'sec_Main_Widgets', document.getElementById('Blog01'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3802231538-lbx__en_gb.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sec_Main_Widgets', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts01', 'sec_Side_Widgets', document.getElementById('PopularPosts01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label01', 'sec_Side_Widgets', document.getElementById('Label01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'sec_Error_404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image21', 'sec_Footer_Widgets_1', document.getElementById('Image21'), {'resize': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'sec_Footer_Credit', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label41', 'sec_Theme_Hidden', document.getElementById('Label41'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm41', 'sec_Theme_Hidden', document.getElementById('ContactForm41'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '3667079295234480644', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'AOuZoY7JTr2JOBZJtXTvq6et32LD5mHWDw:1733301799471', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats41', 'sec_Theme_Hidden', document.getElementById('Stats41'), {'title': 'Pageviews last month', 'showGraphicalCounter': false, 'showAnimatedCounter': false, 'showSparkline': true, 'statsUrl': '//www.fineshopdesign.com/b/stats?amp\x3d1\x26style\x3dBLACK_TRANSPARENT\x26timeRange\x3dLAST_WEEK\x26token\x3dAPq4FmA0lzij_8EI-6wxxL5qJWslT21M4V-3gQfpOZzYhZG2a_C1wk9aMcKWArNBeh94OucAwCKEfjw_Dj8-U13CioZuP8IGZQ'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image61', 'sec_Addon_Widgets', document.getElementById('Image61'), {'resize': false}, 'displayModeFull'));
</script>
</body>