Customize Existing Form Designs or Build Your Own

Overview

Inside Easy Social Share Buttons for WordPress, you have several ready to use forms but you also have a custom form builder. All those options you can access from the Subscribe Forms -> Customize Form Designs menu.

Customize Existing Form

The first in this screen you will see is the panel for ready to use designs. On each design, you have a customize button and preview button. The preview button will open a new window showing the current form design look. You can use it at any time to see the result of your changes.

When you press the customize button you will see a new window where all form options will appear.

All integrated forms have a similar setup (one or two additional fields for images may appear based on the design).

• List-ID – optional you can setup custom list ID working for this form design. The option works only for external services like Mailchimp. It is not working for connections with plugins like Mailster or Mailpoet
• Display name field – enable the option if you wish to show also name field (not only email)
• Custom Form Title Text – this is the first text/title of the form. Short attention-grabbing text is recommended – example: Join our awesome list.
• Form Text – this is the text appearing below title (or on the side of design in a few designs). This text is descriptive and it can be a bit longer. But try to keep it in one or two sentences.
• Name Field Placeholder Text – only if the name field is enabled. This is the text appearing in the form of the name that is not filled.
• Email Field Placeholder Text – this is the text appearing in the form when the email field is blank. You can set up your own like – Enter your email.
• Subscribe Button Text – this is the text that subscribes button shows.
• Footer Text – a small text appearing below the subscribe button. It can be used for the privacy statement or additional text for the form.
• Success subscribes message/Error message – optional setup own status messages appearing after subscribing action runs.

Each of the ready to use forms also contain a brief color change option over the design.

• Activate Color Changing – you need to set Yes or color changes won’t work.
• Background color – this is the overall form of background color.
• Text color – this the color of the title and descriptive text (also the footer text).
• Accent color – this is the color used for subscribe button but also for actionable specific elements in the form (example: the icon color too in the design 9)
• Accent Text Color – this is the color used for links inside the form (if such are provided). It will be also used as a color of the Email/Name fields.
• Email/Name field background color – this will change the default background color of the email/name fields.

Creating/Modifying Own Designs

Along with the included designs plugin allows building an unlimited number of custom designs. Each of the custom designs you made can be edited and used like the included (anywhere in the plugin).

The creating/editing screen is similar to those you have for the ready designs but has a few more options that you can use.

General Settings

• Form Name – this is the name of the form. You will see it in the list and also in the places where you choose the design.
• List-ID – optional you can setup custom list ID working for this form design. The option works only for external services like Mailchimp. It is not working for connections with plugins like Mailster or Mailpoet
• Heading – this is the first text/title of the form. Short attention-grabbing text is recommended – example: Join our awesome list.
• Form custom content – this is the text appearing below title (or on the side of design in a few designs). This text is descriptive and it can be a bit longer. But try to keep it in one or two sentences. HTML and shortcodes supported.
• Name Field Text – only if the name field is enabled. This is the text appearing in the form of the name that is not filled.
• Email Field Text – this is the text appearing in the form when the email field is blank. You can set up your own like – Enter your email.
• Subscribe Button Text – this is the text that subscribes button shows.
• Footer Text – a small text appearing below the subscribe button. It can be used for the privacy statement or additional text for the form.
• Display name field – enable the option if you wish to show also name field (not only email)
• Success subscribes message/Error message – optional setup own status messages appearing after subscribing action runs.

Form Image Settings

• Select image for the form – select from the media library the image you will use. As this is a text field you can also paste URL to any image.
• Image Appearance – select where the image will appear inside the form design. The default option is Do not show the image. This means that no matter the setup you do here, the image won’t appear in the form.
• Image Width/Height – optionally setup the custom image size. Required if you plan to use SVG images. Supported various formats: 100px, 50%, 20em
• Image Area Padding – setup padding for the area where image is included. Full supprot for the padding in CSS (example: 10px or 10px 20px, etc.).
• Image Area Width – only for image placement left/right where you split the form. You can choose from the list of available.

Font Style & Size

• Component font size – you can set up for each of the text component font sizes. Accepted are various formats: 14px, 1em, etc. If you use HTML code in the form text, based on the theme styles you may be required to set up a few more custom CSS if the font size option does not work.
• Component font-weight – configure the font-weight value for each of the text components (Normal means 400, Bold means 700).
• Content alignment – applied over the form and set the alignment of text elements.

Colors

• Background color – setup the form background color. If you leave blank form will have a transparent background. Recommended is always to choose a color (for example white).
• Secondary background color – make a selection if you need to apply a linear gradient over form. Otherwise, leave empty.
• Image Area Background color – provide a background color in the area where the image is placed. Only used if your design comes with image support. You can use it if you need to provide a different than the form background color.
• Text/Heading/Footer Color – those fields contain color selections for the text in the components. If blank default theme styles will be used.
• Email/Name fields background color – this is the background of the input fields for name and email. If blank default theme styles will be used.
• Email/Name fields text color – this is the text color of the input fields for name and email. If blank default theme styles will be used.
• Subscribe button background/text color – customize the subscribe button colors.
• Border Color – used only if you provide border width.
• Border Width – setup border width for the form. Example: 3px
• Border Radius – add a border-radius to the form. Not connected with border size and can work individually. Example: 5px
• Form Padding – the padding values should be filled with the measuring unit (ex.: 10px or 10px 20px or 5%). When nothing is filled plugin will apply a default 30px padding from all sides. If you wish to remove the padding you can fill 0.
• Glow Size / Color – add a glow (drop shadow) to the form. The glow size should be set as a numeric value – for example 10.