Place the Blogger Contact Form on the Static and Basic Customization
Page - Hallo Dear, djf-xp.blogspot.com, This article that you read this time with the title Place the Blogger Contact Form on the Static and Basic Customization
Page, We have prepared this article well for you to read and retrieve the information in it. hopefully the contents of we write can be understood by you. Alright, happy reading.
Title : Place the Blogger Contact Form on the Static and Basic Customization
Page
link : Place the Blogger Contact Form on the Static and Basic Customization
Page
Place the Blogger Contact Form on the Static and Basic Customization Page
Because I mean this as a non-instant tutorial, then I will reveal some important points from the elements of the Blogger contact form to how to do basic customization and put it on a static blog page.
The Basic of Blogger Contact Form
Through the "view source" or "page source" feature in the browser, we can see how the HTML arrangement in the Blogger contact form widget. The composition of HTML is quite simple, in the form of several elements the input in the form and shaded by div, in contrast to the general contact form, which is shaded by table elements.
That's the basic element. The process of generating input in the Blogger contact form up to the email can not be known with certainty because all directly happens on the Blogger server. As in general, because it's not open source, we can't know exactly how the Blogger engine works. What is clear, the message will be forwarded to the appropriate email blog account. One thing is for sure, you must register (activate / use) the contact form widget first even though it will hack and display it on a static page, not on the widget. Without a register, the contact form will not be active.
The process that will be carried out is:
A. Install the Contact Form Widget
B. Delete the Contact Form Element in the Sidebar Widget
C. Simple Customization of the Contact Form
D. Install the Contact Form on the Static Page
How to Install the Contact Form Widget
1. Go to dashboard> layout> add a gadget
2. Select the Contact Form Widget / Gadget and save.
3. Done.
Remove the Contact Form Element in the Sidebar Widget
After you install Contact Form, the widget will be displayed on the sidebar or on the footer bar according to your choices and templates. We must delete it so that later the Contact Form can only be accessed via the Contact page only. Why deleted? Why not just hide it? Some tutorials related to blogger hack that I often encounter using the hide widget method (with conditional tag). I think this method is less effective, because the contact form widget will not be displayed on any page, so the best way is to delete the elements, not just hide / exclude. Remember that only the elements removed, not the entire widget, because we still want to keep the active contact form register.
1. Open the dashboard> Template> Edit HTML.
2. Then look for the contact form widget code section that has been pre-installed using the "Jump to Widget" feature. Consider the following picture:
3. Click "ContactForm1" to go to the widget section, then click the arrow to the left of the widget code (expand) to open the contents of the widget, as shown in the following image:
4. The widget will unfold, and again click the arrow to the left of the intermediate section
5. Pay attention to the code that was deleted correctly, after making sure, save the template.
Simple Customization of the Contact Form
The default html contact form arrangement for bloggers by default is very simple, see here. Without customization, the code is ready to use. To do some additional customizations, I give a few simple and still very basic ideas, to hack CSS in some interesting and personal designs, I will review them at the next opportunity.
First customization what I do is change command information such as "Name", "Email" which by default is above the input box into the box and will be automatically deleted when clicked. To enable this, I fill in the values according to the text you want to display and use simple onblur and onfocus javascript. Ex:
Second customization is to add an input button element as a reset / clear command that functions to delete the entire contents of the input on the contact form. That is:
Third, I add CSS styling in a separate tag, especially to change the width of the form so that it can be adjusted to the width of the post page, because by default the blogger contact form is very narrow.
Fourth, change the element that shelves information that the message was successfully sent from the paragraph tag (p) to division (div) Because if it is displayed in the paragraph tag, an orange background will appear in that section even though the information is not displayed.
And here are the total results:
*required
1. Copy the entire code above and move it into a simple text editor, such as notepad.
2. Customize at the beginning (or at the back, you can, hehe) to adjust some elements to fit your static page later.
Here are a few points:
- That text coloured Red is the input information that will appear on the input form and button, change it as desired.
- Change the value inside rows = '10 ' to increase / decrease message column height.
- Change the value inside max-width: 250px (two parts) to adjust the width of the "message sending information" and the width of the "name" and "email" form.
- Change the value inside max-width: 450px to adjust the width of the message form.
3. Make sure the customization is correct and store well.
Install Contact Form on Static Pages
1. Create a static page, dashboard> pages> new page> blank page.
2. After entering the post editor page, fill in the page title as desired, for example "Contact Me", "Contact Us", "Contact Us", etc. Then select the "HTML" mode and enter the customized code in the editor.
Vital Records:
After entering the code until the process of publishing / publishing the page, do not even return the editor to "Compose" mode, because compose mode will automatically parse certain types of code and damage the order. If you want to preview, use the "Preview / Preview" feature.
3. After editing and customizing the contact form, click "Publish" the page.
4. Done!
--------------
Indeed, as many say, the Blogger Contact Form has several weaknesses, including the lack of captcha features, few fields, cannot upload files, and cannot be customized from the server side (no access, coy). But in my opinion this is still good, well, not bad, rather than having to use third party contact form services that have limits. And in my opinion, Blogger (and of course Google) already has its own way to deal with spam.
For more customization advanced, I am currently designing several types of contact form displays with a CSS hack that I will publish later on future opportunities.
Thus the article Place the Blogger Contact Form on the Static and Basic Customization Page
You are now reading the article Place the Blogger Contact Form on the Static and Basic Customization Page with the link address https://djf-xp.blogspot.com/2019/10/place-blogger-contact-form-on-static.html