Guest post service: add to blogger blogspot via direct form

If you want to integrate guest post service on your blogger, blogspot blog then I am here to help you. By default you can only add authors in blogger blog through the dashboard setting. But there is an disadvantage of using this method. If you add any author than they can directly publish their post on your blog and no moderation option is given.

So you should always add contributor to your blog, so that their post first reaches you and you publish them with some editing (if required). So I figured out a best way to add guest post to blogger blogs. I added a form to a static page on my blogger blog, so a guest has to fill that form and write their post. The post is then send through email to you.

Guest post on blogger/blogspot

The form has wusiwyg editor (What you see is what you get) to write the post. It is somewhat similar to blogger post editor. It also has option to upload photos directly or through URL. This form is customized by me to give all possible options supporting guest post. So without much talking let's Start adding the form. You can customize this form according to your need.

Also Read: Blogger blog post editor computer keyboard shortcuts

So let's integrate this guest form to your blog. Firstly you need to add css code for a good looking form. We are adding it directly to template. So open the template editor by clicking on the Template on the blogger dashboard then click on Edit HTML. Now click anywhere in the template area and press CTRL + F and find ]]></b:skin> and just above this code add the below code as it is.

.form-style-6{
font: initial;
margin: 10px auto;
padding: 16px;
background: #F7F7F7;
}
.form-style-6 input[type="text"],
.form-style-6 input[type="date"],
.form-style-6 input[type="datetime"],
.form-style-6 input[type="email"],
.form-style-6 input[type="number"],
.form-style-6 input[type="search"],
.form-style-6 input[type="time"],
.form-style-6 input[type="url"],
.form-style-6 textarea,
.form-style-6 select
{
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background: #fff;
margin-bottom: 4%;
border: 1px solid #ccc;
padding: 3%;
color: #555;
font: initial;
}
.form-style-6 input[type="text"]:focus,
.form-style-6 input[type="date"]:focus,
.form-style-6 input[type="datetime"]:focus,
.form-style-6 input[type="email"]:focus,
.form-style-6 input[type="number"]:focus,
.form-style-6 input[type="search"]:focus,
.form-style-6 input[type="time"]:focus,
.form-style-6 input[type="url"]:focus,
.form-style-6 textarea:focus,
.form-style-6 select:focus
{
box-shadow: 0 0 5px #43D1AF;
padding: 3%;
border: 1px solid #43D1AF;
}
.form-style-6 input[type="submit"],
.form-style-6 input[type="button"]{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3%;
background: #43D1AF;
border-bottom: 2px solid #30C29E;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
}
.form-style-6 input[type="submit"]:hover,
.form-style-6 input[type="button"]:hover{
background: #2EBC99;
}

You can edit this css file if you like to give different colors and look to the form. If you don't know to edit css codes don't edit it, just add it as it is. Now comes the main Guest form code.

Also Read: 10 Resource Management & Resource Scheduling Software Tools

Add Guest Post form to Blogger

To add this form to blogger/blogspot blog go to blogger dashboard. ---> Then go to pages and add new page. In the Title of your page write anything you want like "Write Guest Post" or "Guest post form" or anything else you want to add. Now choose the HTML view in the editor and copy paste the code below to the editor. Remember: Use HTML editor mode only do not use compose mode, otherwise code will not work. See picture below.

Guest form code

To implement guest post service to blog add the code below to the page editor HTML section. Copy code from below:

<script src="https://dl.dropboxusercontent.com/s/htbxax1y39i5oak/guests.js" type="text/javascript"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
var myNicEditor = new nicEditor();
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('wysiwyg');
});
</script>
<div class="form-style-6">
<form id="contactform" method="POST">
<input name="name" placeholder="Your name" type="text" />
<input name="_replyto" placeholder="Your email required" required="" type="email" />
<textarea name="Details" placeholder="This is an optional section. You can tell about yourself and post Your social links and site links here." required="" rows="6" style="width: 50%;"></textarea>
<input name="Post_title" placeholder="Post Title (Required)" style="width: 85%;" type="text" />
<h3>
Write Post below</h3>
<div id="myNicPanel" style="width: 83%;">
</div>
<textarea id="wysiwyg" name="message" rows="20" style="background: white; overflow: scroll; width: 85%;"></textarea>
<input name="tags" placeholder="Enter your tags/label/category (optional)" style="width: 85%;" type="text" />
<input name="_gotcha" style="display: none;" type="text" />
<input name="_next" type="hidden" value="http://www.mindxmaster.com/p/thank-you.html" />
<input type="submit" value="Post it for review" />
</form>
<b>

</b> <b>Please, Don't post Spam!, Spams are excluded Automatically.</b></div>
<h2>
Guidelines for guest posting</h2>
<ol>
<li>Guideline no. 1</li>
<li>Guideline no. 2</li>
<li>Guideline no. 3</li>
</ol>
<script>
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/yourid@gmail.com');
</script>

<a href="http://www.mindxmaster.com/2016/07/guest-post-service-add-to-blogger.html" style=" float: right; "> Add this form </a>

Guest form customizations

Now you can customize you form according to your need.I marked the customizing text with Red color. Most Important part is to add your email to this form. Without adding any email your form will not be sent to your email. To add the Email follow the step below.

Also Read: Write SEO optimized post on blogger using Yoast Plugin

I the above code I marked yourid@gmail.com with red. Here you have to change the email. For example: himanshu@mindxmaster.com. If you have gmail account then just change the username with the gmail username, no need to change gmail and com.
Note: Don't change the the other url just change the red color texts.

Thank you page for blogger

Now put some guest post guidelines in place of Guideline no. marked with red above. Now after your guest fills the form and submit it. You can redirect the guest to the Thankyou page of your blog, just replace "www.mindxmaster.com/p/thank-you.html" url with your thankyou page URL. Create a simple thank you page on your blog. Just add the thank you page url or any other url you want, to redirect the guest after successful submission of guest post.

Also Read: Easy way to make Your Blogger Blog Titles/template SEO Friendly

Note: Once you add this form in your blogger blog please use it once. You will get a confirmation email on your email address on the first use. Confirm the email and enjoy this form for free, forever.

Here is the video url https://youtu.be/D2BwNJDW2s4 that shows the step by step process of adding guest post service on blogger.

So that is the guest form. You can customize the look even more by changing the code in css. If you want to add another custom field or edit the field, add it or edit it inside the <form> </form> tag Don't change anything else other than user viewable texts. If you need any assistant comment below or contact me. Thank you for reading this post.

TUTORIAL

Saturday, April 6, 2019