Pages - Menu

Tuesday, 24 January 2012

Forms That Brings Good Conversions To Your Blogger Page

So you are working hard on your blog, spreading ideas you are passionate about and you need to get in touch with your visitors. Forms are great means of converting casual visitors into engaged audience for your blog. How to put them up on your page?

Forms use server side scripts for submitting data, but as we all know, Blogger does not allow using server-side scripts, which means the mail() function is unaccessible. With no plugin or widgets either, the only way of creating and running a form for Blogger is to use an external service that provides the needed scripts. Which is good news, because most often form builders come with a bunch of great extra features to boost the usability of your forms. 123ContactForm is one effective web form builder that helps you create and administrate all types of forms and surveys for Blogger.

All submitted info is stored securely for you on the 123ContactForm servers, where you can access it with any query.


For better conversions as well as for making your life easier, here are some features to look for in your forms for Blogger:

- Nice skin. Forms can be styled in any possible way, as 123ContactForm allows full CSS
customization. Make them blend with the image of your blog.

- 3rd party apps to extend the capabilities of forms. A wide range of integrations is available:
SalesForce (adds leads to the account for sales purposes), MailChimp (imports the contacts in forms for using them in e-mail campaigns), WebHooks (for manipulating the behaviour of forms and
submitted data), Yahoo and Google Groups, VerticalResponse, iContact.

- E-mail notifications. With 123ContactForm you can have the information collected through the webforms sent to you via email. All the data, including uploaded files, is there. In case the total size of the uploaded files is larger than 5MB, they will be sent as attachments instead of download links)

- Data export. This form generator exports submissions to neat CSV sheets that may be called later for database purposes.

- Reports over data. This can be a very useful tool for dedicated marketeers. Instead of having a long list of submissions that they have to analyse later with dedicated software such as SPSS, reports are ready in a minute without them getting hands dirty with raw data.

Creating forms for Blogger

It takes no more than 5 minutes, just follow these steps:

1. Sign up/Log in to www.123contactform.com.

2. In your dashboard, go to Create New Form and choose the type of form needed: contact form,
event registration form, order form, survey.


3. Edit form fields.

4. Choose Settings - the e-mail address for notifications, payment integration for order forms, 3rd party apps you wish to integrate with your form.

5. Last step - Get code & Publish. Choose the Blogger tab, copy the code given and paste it into your Blogger post (in HTML view).


And voila! Here is your fresh form ready to use. Forms are very handy tools to help you out in a variety of situations. If you are a new blogger needing a hatful of contacts for sending newsletters, just put up a simple contact form with opt-in fields for the users to choose the sections that interest them. You can perform surveys for gathering feedback from customers (online product surveys, business demographics, customer satisfaction surveys). Or you can sell and receive payments through order forms. All you need is the idea, tools are at hand!

View This Article / Download>>

Tuesday, 3 January 2012

Social Bookmarking Buttons With Spinning Effect for Blogger

Till now many social bookmarking widgets has been released for Blogger. Simply, social bookmarking buttons and icons helps you to make your blog socialize and get more traffic. Adding social bookmarking buttons is cool way to get more readers and targeted audience.


Before using social bookmarking option, you must be aware of icons design how much clickable is it. Your readers are likely to click social bookmarking button containing in your blog if they find the buttons really cool. If you haven't such buttons, so here is something special for you.

Social bookmarking buttons with spinning hover effect. Buttons are cool itself and when your reader hover the mouse over it, it spins a round.

Check the demo yourself!

Here is how to add these cool buttons to your Blogger blog:

Login to Blogger > Design > Edit HTML > Expand widget templates. Find the following code in your template:


Just below that add the following group of codes:





Replace hacktutors with your feedburner username. Again, find the following code:

]]>

Just above that code, past the following:


.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrS5i_DuUoHLvkidVsVXNLUqEez1AGAFxMKv95t5yw-JwAEfuTKSF_wvxJD_H_hdIK4vi-G8yrREUxtR0o1I_jHDfjKFcpLNlouGO-WgdUrNExc3LTNWt-ipAcZ-wl4IdVXjmnOWSSct8/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGIuyqo_Vl04O3Usx5UDOjsI9LHfaSDUIsbhftxDYN4q4Qztj-CSFs5GmTgVZwUGbaRWSTHTjVUGe28mdGgfy_nC82IbifTK8JnWIDWEbkc3OIRxZGFMc9PiJlsnRXd7r4JVucirXS1Uc/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZfDF3rZ2tfU8BE4zzhtrpKHoZKqEuqD-u-3SNpDRi2M5RLImT66pRiV8yT30VWuTvE9ItH-rokFkdOjGAzQqxVix6FpsLHO8KiJEbNJwOL1vsq88p9PONARbk1HQjAMueo5EjIbA-eg/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHpsan87iIDtBg4kqI3qz76Ptax_l2nvu027KCBYWGCFLe1Hqiuwf8oXrFJIILkNKnI2Fo7mRvaB5IrVVAoiLvE4yqa2D47_61VpJL3n1jPGqfSW7O-fjPzifyoEXvkACFDKyv-Ej5EN4/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3660MX4gbGRyCCx2nR-nW6MGTHj41JLT08m1qqkDdIogZg6QaJ43KAGZWqdPtHpiZLI7Zs31nh9WER0fwxUlhnk4Ol7bBD55MKc52iRX2V_lzAhNtN-zfiu_NXiG6ZIviHdzjOLlGNz4/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7RKfKrsOcbO5lS89rFeUMLO7nbaO6xKq9dM9Nx9ozZ4Quc8j-XDMAWOu0_xaYIpDYm0wsbuMiQUiJ76BWUroeY3NEB_imliy7bAIumaz9XycHXrBvjfCUauy1p4w06kKOakT8snGWLk/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

Now save the template and your are done! Have a look at your cool new bookmarking button that appears at the bottom of your post.

Thanks to Paulund for this cool CSS3 bookmarking button spinning effect.

View This Article / Download>>