A Contact Form is an essential feature for any blog. It allows visitors to reach out directly to ask questions, report issues, or provide valuable feedback. However, Blogger presents a common challenge: if you disable Blogger's default widget scripts to improve website loading speed, the standard default Contact Form stops functioning. To solve this problem, the Probha Blogger Template includes a dedicated Contact Form Plugin that bypasses default widget scripts and sends messages using Blogger's native Contact API.
The best part about this plugin is that you don't need to copy and paste lengthy HTML markup. You simply create a designated page and add its path to the plugin configuration—Probha automatically renders the Contact Form on that page. Additionally, you can fully customize form labels, placeholders, button text, and status notifications. This allows you to tailor the Contact Form to match your website's language and design seamlessly.
What Is the Probha Contact Form Plugin?
The Probha Contact Form Plugin is a built-in feature designed to generate a dedicated Contact Us page on your Blogger site. Standard Blogger contact forms rely on Blogger's default widget scripts. However, many site owners disable these default scripts to maximize website performance and speed, causing traditional forms to break. Probha's plugin resolves this issue by routing message submissions through Blogger's native Contact API.
This allows your Contact Form to remain fully functional even when all other default Blogger widget scripts are turned off. Better yet, you don't have to build the form layout manually. Just specify the target page in the plugin's configuration settings, and the form will generate automatically on that page.
Why Should You Use the Contact Form Plugin?
A website's Contact Us page is more than just a formality—it is a direct line of communication between you and your visitors. If a reader has a question about a service, article, product, or general query, a functional form saves them from having to look up an email address manually. They can send a message directly through the site.
Using Probha's built-in Contact Form Plugin eliminates the need for third-party contact form services or embed scripts. Messages process through Blogger's native API, keeping your setup simple and avoiding dependencies on external servers or additional API keys.
Key Advantages of the Contact Form Plugin
A primary feature of this plugin is its independence from default Blogger widget scripts. Disabling Blogger's default scripts is a popular optimization strategy for speed and Core Web Vitals performance, but it typically disables standard contact widgets. Probha's plugin solves this cleanly by tapping into Blogger's native Contact API directly.
Another advantage is automatic generation. You don't have to write HTML form elements. Simply create a page and point the plugin's location parameter to its path. The plugin handles form rendering automatically—even if the page body is completely blank.
Furthermore, every UI element of the form is fully customizable. You can adjust field labels for Name, Email, and Message, customize input box placeholders, update Send and Reset button labels, and rewrite the sending, success, and error alert messages.
Where to Find the Contact Form Plugin
You don't need to download or install the Contact Form Plugin separately. It comes pre-integrated in the Layout interface of the Probha Template. Sign in to your Blogger Dashboard and navigate to the Layout tab. Scroll to the Plugins section and locate the Contact Form gadget. All settings are controlled directly from this gadget.
You never have to edit the theme's core XML code. Modifying the JSON configuration inside the Contact Form gadget lets you manage status, target page location, field labels, placeholders, buttons, and alert text effortlessly.
Create a Contact Us Page
Before configuring the plugin, you must create a dedicated Contact Us page on your Blogger site. Go to the Pages section in your Blogger Dashboard and click to create a new page. You can title it Contact Us. Leave the page content area empty, as the plugin will render the form elements automatically.
Publish the page and check its URL path. For example, if your full published URL is https://example.com/p/contact-us.html, extract only the relative path portion for the configuration:
/p/contact-us.htmlYou will assign this exact relative path to the location parameter inside the plugin configuration. The plugin relies on this path to determine where to render the form, so ensure the path matches your published page URL exactly.
Understanding the Configuration
Once your Contact Us page is published, return to the Layout tab in Blogger, scroll to Plugins, and edit the Contact Form gadget. The default configuration uses the following JSON structure:
{
"status": true,
"location": "/p/contact-us.html",
"lbs": {
"nm": "Name",
"em": "Email *",
"ms": "Message *"
},
"plhd": {
"nm": "Enter your name",
"em": "Enter your email",
"ms": "Type your message here"
},
"btn": {
"sn": "Send",
"rs": "Reset"
},
"msg": {
"sd": "Sending message...",
"sc": "Message sent successfully!",
"fe": "Failed to send message."
}
}This configuration is divided into distinct sections: general toggle settings (status and location), field labels (lbs), input placeholders (plhd), button controls (btn), and status notifications (msg).
Understanding the status Property
The status parameter acts as an on/off toggle for the plugin. To keep the Contact Form active on your blog, ensure this value is set to true:
"status": trueIf you ever need to temporarily disable the contact form without removing your settings, switch the value to false:
"status": falseTo use the form on your live site, status must remain set to true.
Understanding the location Property
The location setting tells the plugin which page should output the Contact Form. If your Contact Us page uses the relative path /p/contact-us.html, your property setting will be:
"location": "/p/contact-us.html"Ensure that the path defined in location matches the relative URL of your published Blogger page. The page must be published beforehand, though the body content can remain completely blank.
Customizing Field Labels (lbs)
The text labels displayed above each input field are managed within the lbs object. It contains three keys: nm for Name, em for Email, and ms for Message.
Default configuration:
"lbs": {
"nm": "Name",
"em": "Email *",
"ms": "Message *"
}You can update these keys with any custom labels or required markings you prefer, such as changing "Name" to "Full Name" or "Your Name".
Customizing Placeholders (plhd)
Placeholder text appears inside form input fields before the user starts typing. These guidance cues are controlled using the plhd object. Like the labels object, nm targets the Name field, em targets Email, and ms targets Message.
Default configuration:
"plhd": {
"nm": "Enter your name",
"em": "Enter your email",
"ms": "Type your message here"
}Adjust these strings to provide helpful instructions or match your site's tone of voice.
Customizing Action Buttons (btn)
The text rendered on form action buttons is configured using the btn object. The sn key defines the submit button text, while the rs key defines the reset button text.
Default configuration:
"btn": {
"sn": "Send",
"rs": "Reset"
}You can rebrand these to alternative phrasing, such as "Submit Message", "Send Inquiry", or "Clear Form".
Customizing Status Notifications (msg)
When visitors interact with the form, the plugin displays status alerts. These notifications are defined within the msg object using three keys: sd (in-progress state), sc (success response), and fe (failure response).
Default configuration:
"msg": {
"sd": "Sending message...",
"sc": "Message sent successfully!",
"fe": "Failed to send message."
}Customizing these messages lets you provide clear feedback tailored to your audience.
Troubleshooting Common Setup Issues
If the Contact Form fails to appear on your page, run through these quick checks:
- Verify that
statusis set totrue. - Ensure the
locationstring matches your published page's relative URL path exactly. - Check that the page is fully published in the Blogger Pages tab (and not saved as a draft).
- Inspect the JSON configuration for syntax errors, such as missing commas, unclosed quotes, or bracket mismatches.
Conclusion
The Contact Form Plugin in the Probha Blogger Template offers an efficient, reliable way to handle visitor inquiries. By utilizing Blogger's native Contact API directly, it remains fully operational even when default Blogger scripts are turned off for speed optimization.
Setting up the form requires no manual HTML construction. Simply publish a blank Contact page, configure the relative path in the Layout section, and enable the plugin status. With complete control over field labels, placeholders, button text, and alerts, you can build a clean, fast-loading, and professional Contact Us page in just a few minutes.
