• eFlyerMaker Forms Builder plugin for Wordpress

  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.

From WordPress Appearance Editor section

Sometimes, in particular situations, you may have the need to customize the main css of your wordpress theme.

If so, we recommend to target the element by referring to the proper id.

ex.:

div#efmfb_poup_header_text{
color:white;
}

eFlyerMaker CSS Class Description

• IDs

  • #efmfb_popup_header_text

    • Refers to the div before the form inside the popup

  • #efmfb_popup_form

    • Refers to the <form>

  • #efmfb_popup_footer_text

    • Refers to the div after the form inside the popup

• Attributes

  • efmfb-email

    • Refers to the email field Id from the triggering form

Customization exemples