• eFlyerMaker Forms Builder plugin for Magento

  1. Installation

  2. Get Started

  3. Setup a signup form

  4. Customize

  5. FAQ

Customize

From the eFlyerMaker sign-up Forms Builder plugin page

• Get started

  • To see the same informations featured on our Get Started page

• Create a new form

  • To create a whole new sign-up form

• Manage forms

  • To either edit, duplicate or delete a sign-up form

    • Edit: To edit and modify an existing form

    • Duplicate: If you want to modify a form but keep the original version at hand

    • Delete: To delete an existing sign-up form.

If you choose to delete a form, make sure the form in question is no longer featured on your website.

• Options

  • To further customize the look of your sign-up form

From the Form Editing page

Form Information panel

• Name

  • This is the name displayed in the page "Manage Forms" and in the selection menu

  • ex.: Side Bar Form

• Description

  • This field can be used as an introduction message

  • ex.: Stay Informed!

• Classes

  • Classes added in the <form> tag

  • ex.: text-center

• Custom styles

  • Value for style= attribute added in the <form> tag

  • ex.: border:1px solid #ccc;

Input Text Options panel

• Required Field

  • If checked, the field becomes mandatory

  • The validation is front-end only by javascript. To obtain a real mandatory field, the mandatory option must be specified during the field setup in eFlyerMaker.

• Hide Label

  • If checked, the label will no be shown

• Name

  • Immutable field, It is the field name from eFlyerMaker

• Label

  • Designation of the field

• Placeholder

  • Text written inside the field

• Classes

  • Classes added in the <input> tag

  • ex.: text-center

• Custom styles

  • Value for style= attribute added in the <input> tag

  • ex.: border:2px solid #ccc;

Checkbox Options panel

• Name

  • Immutable field, It is the field name from eFlyerMaker

• Label

  • Designation of the field

• Classes

  • Classes added in the <input> tag

  • ex.: text-center

• Custom styles

  • Value for style= attribute added in the <input> tag

  • ex.: border:2px solid #ccc;

Button Options panel

• Text

  • Button's call to action

  • ex.: Submit

• Align Button

  • Let you align the button in the specified <DIV> of this form

  •  Left  |  Center  |  Right 

• Classes

  • Classes added in the <input> tag

  • ex.: text-center

• Custom Styles

  • Value for style= attribute added in the <input> tag

  • ex.: border:2px solid #ccc;

From the Options page

This section provides you a powerful tool to use your form as a pop-up

Box

This section let's you control the visual of the pop-up

• Width

  • Pop-up width in pixel

  • ex.: 500

• height

  • Pop-up height in pixel

  • ex.: 600

• Background color

  • Pop-up Background color

  • ex.: #ccc

• Background image url

  • Replace the background color by the specified image

  • ex.: http://intema.ca/Background-COLOR-Lowres.jpg

• Overlay color

  • Background color of the zone around the Pop-up

  • ex.: #ccc

• Overlay opacity

  • Adjust the transparency of the overlay

  • ex.: 0.5 means 50%

• Border Color

  • Pop-up border color

  • ex.: #ccc

• Border Radius

  • Adjust the radius corner of the pop-up

• Box Shadow

  • Creates a Shadow behind the pop-up
  • value : side down blur color

  • ex.: -15px 15px 15px rgba(0,0,0,0.5)

• Custom Classes

  • Classes added in the <div id="efmfb_popup_form"> tag

• Header text

  • let's you customize the visual before the form
  • Can be text or HTML

  • ex.: <center><b>Save 20% off by signing today!<b></center>

• Footer text

  • let's you customize the visual after the form
  • Can be text or HTML

  • ex.: <center><b>Save 20% off by signing today!<b></center>

Box Title

This section let's you include more visuals in the pop-up before the form

• Text

  • Customize the form Heading
  • Leave blank to show nothing
  • ex.: Sign-up Today!

• Text Color

  • Specify the color of the heading

• Image url

  • Customize the form Heading by adding a logo
  • Leave blank to show nothing

  • ex.: http://www.eflyermaker.com/assets/2016/images/eflyermaker_logo.png

• Image positions

  • Let you align the image in the heading

  •  Left  |  Center  |  Right 

• Custom css

  • Add style around the Text

  • ex.: font-size: 3em;

Box Body

This section let's you control the visual aspect of the form inside the pop-up box

• Background color

  • Form's Background color

  • ex.: #ccc

• Background color opacity

  • Adjust the transparency of the form's background color.

  • ex.: 0.5 means 50%

• Apply box body background color to title

  • Background color will wrap the Box title

• Custom css

  • Add style around the Text

  • ex.: font-size: 3em;

Box Animations

This section let's you control the way the pop-up is to appear in the page

• Show animation

  • Opening pop-up effect

• Hide animation

  • Closing pop-up effect

• Delay

  • Controls the delay the box will wait before it pops up.

• Rotates box to show success response

  • Includes animation after submit success.

eFlyerMaker CSS Class Description

• IDs

  • #efmfb_poup_header_text

    • Refers to the div before the form inside the popup

  • #efmfb_popup_form

    • Refers to the <form>

  • #efmfb_poup_footer_text

    • Refers to the div after the form inside the popup

Customization exemples