The Marketers Delight Style Guide

1.) Email Form Shortcode

You can use the [md_email] shortcode anywhere WordPress accepts shortcodes to output an email form as mirrored from WP Admin > MD > Email Forms. Using shortcode attributes you can completely customize your forms:

[md_email title="My Custom Title" desc="Some description text" bg_color="#ae2525" bg_image="https://domain.com/img.png" attached="1" text_color="white" classes="text-center"]

Shortcode Attributes:

• title="" — Set the title attribute to adjust the headline that shows at the beginning of your form.
• desc="" — Use this to describe more about your newsletter here.
• bg_color="" — Set a background color using a color code.
• bg_image="" Set a background image to any URL.
• attached="" — If set to 1, the email fields and submit button will attach to each other. If set to 0, each field will show on its own line.
• submit_text="" Change the submit button text.
• text_color="" — Set to white for white text, set to dark for dark text. You can write your own CSS class for this as well if you want a custom text color. Any value you enter here will be prefixed as a CSS class like text-{text_color}.
• classes="" — Add any custom classes to the email form for more customization.

2.) Custom Email Form Code

It turns out 95% of the code email service providers give you is simply not needed to make your signup form work in part thanks to MD's default styles. If you're even a little code-savvy you can strip out that excess and add a few helper classes to style your own email forms.

Generally, a form is structured like:

• A surrounding <form> tag
• Name + email fields, and submit button
• Some hidden input fields required for validation

Below is a barebones example of what an email form with MD helper classes looks like and what you should model your own custom codes after (also adds those neat little icons to the name and email fields).

<form method="post" action="#formaction" class="email-form clear">
	<input type="name" name="name" class="form-input form-input-name" placeholder="Enter your name...">
	<input type="email" name="name" class="form-input form-input-email" placeholder="Enter your email…">
	<button class="email-form-submit form-submit">Join Now!</button>
	<!-- Hidden fields here -->
</form>

Different email service providers require different hidden fields, so be very carful not to remove any <input> tags that look important.

Note: Always be sure to perform a test email signup with your own email after formatting your code!