Blogr-AMP for Contact Page & Form

Theme Version: 1-0-0 & below...

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

---

• Blogr-AMP theme documentation: https://blogr-amp.blogspot.com/docs
• Blogr-AMP working contact page: https://blogr-amp.blogspot.com/contact