Customize
From the eFlyerMaker sign-up Forms Builder plugin page
Home
To see the same informations featured on our Get Started page
Create 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.
- To either edit, duplicate or delete a sign-up form
![/!\](../../kb-sub/moin_static198/memodump/img/alert.png "/!\"){kind=small}
If you choose to delete a form, make sure the form in question is no longer featured on your website.
Form Options
- To further customize the display or pop up options 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.: Homepage 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 not be shown
Name
- Immutable field, It is the field name from eFlyerMaker
Label
- Designation of the field
Placeholder
- Text written inside the field
Description
- To add details to the label between ()
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
- What you'd like to box to say
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 Form Options page
This section provides you a powerful tool to use your form as a pop-up
Display Options
Please notice that your newsletter form will be displayed in your selected page(s) once you click in the save button.
Form to display:
- Select the form you want to edit
Store Page(s) this form appears on:
Click on the page to select it. If you want the form to appear on more than one page, hold down the Ctrl key for Windows or Command key for Mac, as you click
Shopify store form container class or id
- HTML coding to identify the exact position of the form on the selected page
Is a popup form
- Check this box to make your form a pop up form
Check out the Popup Options tab to customize your pop up further
Popup form by Trigger (s)
- Check this box to establish a trigger for your pop up form. Indicate the trigger(s) in the empty field box
Save Display Options
- To save and apply the display options on your page(s)
Remove code from the store
- To delete the form from your page(s)
Popup Options
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
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
Custom Style
- 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.
Popup Maximum Display
- If you don't want to annoy your shoppers with your pop up sign-up form every time that shopper visits your page, check this box to allow the use of cookies for a popup maximum display
Max. popup display number
- How many times should a shopper visit your page before he stops being asked to sign-up to your newsletter?
- Popup cookies lifetime (in days)
- How long should the cookies remains before being deleted?
