Aug 112022
 

Add New Form Using MailPoet tutorial helps you to create a custom form and add some style. You can also choose from one of the many templates available.

Last Updated: August 11, 2022

Latest News: I have updated the documentation to reflect MailPoet version 3.

In this tutorial you will learn how to add a new custom form to your site. There are many tools available to help you  customize the new form. Many of you will probable choose one of the templates available which makes your life much easier. You can also customize the templates using the tools available.

List of Available Template Types:

  • Pop-up
  • Slide-in
  • Fixed bar
  • Below pages
  • Others (widget)

What you need:

Add New Form Using MailPoet

Step 1 ) Go to MailPoet -> Forms on the admin sidebar as illustrated in the image below to start adding new forms to your site.

mailpoet-forms-admin-menu

Step 2 ) The following image illustrates New Form buttons in two locations. Click this button to start adding your new form.

mailpoet-add-new-form-button

Step 3 ) Once you click on the New Form button from the image above you will see the following information as illustrated in the image below. Here you can choose what you want to do. Select a form from one of the available templates or start a new form altogether. For this tutorial Skip, start with a blank form button is selected.

Type of Templates to Choose From

  • Pop-up = Here you see a sample template illustrated from the pop-up tab.
  • Slide-in
  • Fixed bar
  • Below pages
  • Others (widget)

mailpoet-select-template-start-new-form

Step 4 ) The following image allows you to select from the following options.

Black Form Default Fields

  • Email address
  • Subscribe! button
  • Add new fields by clicking on the + sign
  • Form Editing Options
    • Settings
    • Styles
    • Form Placement
    • Custom CSS

 

mailpoet-new-form-default-layout-settings

Step 5 ) The following image Settings illustrates the tools you can use to customize your personalized form. The following is a list of the tools you can use.

Form Settings Tools

  • Settings
  • Styles
  • Form Placement
  • Custom CSS

mailpoet-new-form-settings-options

Form Settings

Step 6 ) The following image Settings allows you to setup the following options.

Form Settings Options

  • Add form name
  • Display the form
  • Please select a list
  • After submit…
    • Show message
    • Go to page

mailpoet-new-form-settings-fields

Form Styles

Step 7 ) The following image allows you to adjust the following options.

Form Styles Options Part 1

  • Background Color
    • Solid
    • Gradient

mailpoet-new-form-styles-background-color-settings

Step 7-a ) The following image allows you to adjust the following options.

Form Styles Options Part 2

  • Background Image
    • Select Image…
    • Scale
  • Font Color

mailpoet-new-form-styles-background-image-settings

Step 7-b ) The following image allows you to adjust the following options.

Form Styles Options Part 3

  • Size Default
  • Font Family

mailpoet-new-form-styles-size-default-settings

Step 7-c ) The following image allows you to adjust the following options.

Form Styles Options Part 4

  • Input Padding
  • Border Size
  • Border Radius
  • Border Color

mailpoet-new-form-styles-input-padding-settings

Step 7-d ) The following image allows you to adjust the following options.

Form Styles Options Part 5

  • Alignment
  • Form Padding
  • Success Message Color

mailpoet-new-form-styles-alignment-settings

Step 7-e ) The following image allows you to adjust the following options.

Form Styles Options Part 6

  • Error Message Color
  • Close Button Style

/mailpoet-new-form-styles-error-message-color-settings

Form Placement

Step 8 ) The following image Form Placement allows you to adjust the following options.

Form Placement Options

  • Below pages
  • Fixed bar
  • Pop-up
  • Slide-in
  • Shortcode & other

mailpoet-new-form-placement-settings

Step 9 ) The following Custom CSS allows you add you own custom style using CSS. It is important that you follow the proper CSS rules when adding your custom CSS styles to your site. If you don’t have any CSS knowledge then I recommend using one of the templates available. This can help you and guide you with your customization. If you are more daring and need some help, the following link can help you.

Recommended CSS Link:

======================

I will be updating this tutorial from time to time so keep coming back for the latest. If you have any questions please let me know.

Enjoy.

Go Back To MailPoet Tutorial List.

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

7 + 19 =