Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.

Blogr-AMP for Contact Page & Form

Displays a contact form using default Blogger Contact Form widget on any Blogr-AMP Blogger template static pages.

No 3rd party service or scripts, Blogger contact form utilizes pre-built Blogger functions comes pre-installed in theme with success and error form submissions handlers.


Location


Dashboard Layout


ContactForm Gadget

  • Blogger default contact form gadget
  • To enable click Edit and Save widget.

Template HTML - ContactForm1


<b:widget id='ContactForm1' locked='true' title='Contact Form (Web View)' type='ContactForm' version='1' visible='true'>

  • Blogger widget tags to render contact form

Tags


<div id="theme-contact-page">

  • Include tag once in any Blogger static page.

Variables - Template HTML


var CONTACT = {
  'SendingMsg' : '<i class="md-icons md-18">settings</i> Processing...',
  'SentMsg' : '<i class="md-icons md-18">done</i> Thank you. Your message has been sent.',
  'NotSentMsg' : '<i class="md-icons md-18">warning</i> We\'re sorry. Message could not be sent, please try again later.',
  'InvalidEmailMsg' : '<i class="md-icons md-18">warning</i> Email address required.',
  'EmptyMessageMsg' : '<i class="md-icons md-18">warning</i> Message field cannot be empty.'
};

  • Update contact form variables for text displayed upon contact form error or successful submissions. 

Behavior


  • Uses pre-built Blogger contact form functions
  • By default Blogger contact form hidden from view on blog pages.
  • Requires availability of DOM element with attribute id of theme-contact-page
  • Displays error message if name, email or message field not provided
  • Displays success message if submission is successful
  • Notification sent to email to blog Admin(s).

Useful Reference





Have a comment/question? Add it here... expand_more

Comment on Google+ expand_more

Comment on Facebook expand_more

Have a code snippet to share? Format RAW codes here... expand_more

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Blogr-AMP Blogger AMP HTML Template
Rated 5/5 based on 98 reviews
Utilize Blogger contact form gadget Blogr-AMP Blogger template with AMP HTML integration includes custom error & success submission message handler displayed in any blog static page easily without 3rd party service or scripts required.
Blogr-AMP: Blogr-AMP for Contact Page & Form
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Blogr-AMP for Contact Page & Form.
mail