Embedding 123 Form Builder Output as Contact Page on Blogger/Blogspot

Last edit 10/21/2017

123 Form Builder Contact Page Result

Unlike Google and Powr.io, 123 Form Builder mainly serves as a form builder as its name says. It tends to be the most sophisticated app of its kind. It integrates its publishing options in many renowned sites such as Twitter, WordPress, Wix, etc.

In Blogger page, you can embed the built form. It blends better than Google Form, provides many advanced features, and free.

Available Plans

But, the advanced free set is still limited to some extent. If you want more of its feature, you can upgrade to the higher plan.

---

Related

Blogger/Blogspot Contact Page Doesn't Work From Widget | 2017.

Embedding POWr.io Plugin as Contact Page on Blogger/Blogspot.

---

Setting Up:

1. Login - you can also login using Facebook, Google, Yahoo, or Microsoft -.

2. Select New Form > Contact & Lead Form

You'll have a top and lower bar. The top bar consists of five tools such as edit, settings, publish, submission, and report; and three options such as hide layout, view, and publish form. The lower bar is where you modify your form.

.3. Edit your fields - at least give email and message field -

4. Customize settings - nine available options -.

Settings 9 Options

• Notifications

Form Owner (You)

Form User (Sender)

• Thank you page

• Themes

• Applications

• Payments

Payments Calculations

Payments Processors

Payments Notifications

• Security

• Rules

Field Rules

Autoresponder Rules

Form Rules

• Translations

• Advanced

Advanced Submissions

Advanced Form

Advanced Quiz

5. Publish > select Blogger

6. Copy code

7. Go to Blogger dashboard > Page > Create new page

8. Give title, "Contact" is alright

9. In page settings > select options > Reader comments > select "Don't allow, hide existing"

10. On the HTML sheet > Embed the code

11. Preview and check

12. Publish

You'll receive the submissions on your 123 Form Builder account, and you can also set a notification to your email. On your dashboard, you'll be able to analyze them in the form of a graph.

123 Form Builder Dashboard

The features are comprehensive, but because of that, the form modification becomes a little bit tiring. To get the perfect aligning of fields, I need to take some time experimenting with the field options and size.

My field settings:

• Label Placement: Top aligned
• Instruction label: Below label
• Columns: One
• Form encoding: UTF-8
• Form aligned: Center
• Direction: Left-To-Right
• Form Width: 554px
• Name field size: 45%
• Email field size: 90%
• Message field size: 100%

When I'm customizing the theme aka appearance in settings, there is a responsive view panel provided on the right side. The view panel will show any change I made whether it's just one pixel away. But the panel size is disappointing as it's too small to look the essential half of the form. The free themes served are professional looking but not so aesthetic, though it still can be set to transparent and blend with any blog page.

My theme settings:

• Khaki
• Transparent background 
• Embedded from frame: off

---

Related

Embedding Google Form as Contact Page on Blogger/Blogspot.

Overall POWr, 123, and Google Form Builder Comparison Details.

---

It's visually better than Google Form, and its features are neatly elaborate. Though too detailed at some point. If you just at the early phase of building your site/blog and not expecting many submissions, all those advantages might not be necessary, and the editing process would be the longest than any other form builder.

But definitely, this is a form builder app with the most benefits available.