Home / Magento 2 - Magezon Blog / How to embed forms on Magento 2 website with Blue Form Builder?

How to embed forms on Magento 2 website with Blue Form Builder?

Embed forms in Magento 2 website with Blue Form Builder

Building forms is extremely crucial for your website. However, if no customers fill in, then this brings no benefits. To encourage customers to fill out your forms, one of the most effective ways is to embed them somewhere on your website such as pages, blocks, sidebar, etc. By this way, your users can easily access a form where they already are without wasting time finding the form page.

In this article, we will look into 3 ways to embed forms on your Magento 2 website with Blue Form Builder.

  1. Use embed code
  2. Use widget icon in the WYSIWYG editor
  3. Add form widget 

Use embed code

Remember that each form created by Blue Form Builder has unique embed code. Using this way, you can insert a form in a specific page/block. The form then will appear as part of that page/block.

In the backend, navigate to Content > Manage Forms and open the form you want to add. Next click Settings > Embed. Here you will see 3 types of code:

Embed forms with embed code

The first one is used to embed into the WYSIWYG editor of a page or block. The other two are used to embed into template files and layout files. They are written for those who have coding experience such as developers. So in this article, we will focus on the first type of code.

Copy the code. Then open the page/block you want to add the form to. Within the WYSIWYG editor of that page/block, paste the code anywhere you find reasonable. After saving, the form will appear on that page/block like this:

Embedded forms using embed code

Use widget icon in the WYSIWYG editor

This way allows you not only to add a form in a specific page/block but also choose its display type.

Open the page/block you want to embed the form. In the WYSIWYG editor, click the “Insert Widget” icon (the icon in the red circle in the below image):

Embed forms using widget icon in editor

After that, a settings popup will show up like this:

Configure widget options

In the field Widget Type, choose BlueFormBuiler Form from the drop-down list. The Widget Options will then appear so that you can choose the form, display type, etc.

After making changes, click Insert Widget button at the bottom. You will see the widget icon of the embedded form in the editor. Move it anywhere you want within the editor to change the form position. Remember to click Save button after finishing.

Add form widget 

By using form widget, you can embed a form in different pages/blocks at the same time.

Go to Content > Widgets, and there is an “Add Widget” button above the grid.

Embed forms using form widget

When you click the button, you will see this:

Form widget configuration

– Type: Choose BlueFormBuilder Form from the drop-down list.

– Design Theme: Choose the theme to apply the embedded form.

After that, click Continue and you will move to this below page:

Form widget configuration

– Storefront Properties: where you enter the form widget title, choose the store view to apply the embedded form, decide where to embed forms, etc.

– Widget Options: choose the form you want to embed, form display type, etc.

Click Save and you’ve succeeded in embedding a form using form widget.

Conclusion

In this article, we’ve discussed 3 methods to embed forms on your Magento 2 website using Blue Form Builder. You can insert embed code, use widget icon in the WYSIWYG editor or use form widget. If you have any questions or need any support, don’t hesitate to leave us a comment. We will try our best to reply to you as soon as possible.

 

About Trang Vu

Check Also

MailChimp plugin

Introduction to MailChimp plugin | Blue Form Builder

You’ve already installed Blue Form Builder to create Magento 2 forms for your website? You …

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.