A plugin for WordPress

New Shortcode Attributes in 2.2

Version 2.2 of SpeakUp! Email Petitions adds new styling features to your petitions. First, the included "default" and "basic" themes have been revamped. The Facebook and Twitter sharing buttons are no longer hidden before the petition form is submitted. When submitted, the form fields no longer disappear. Instead, the form fields fade to semi-transparent and the response message appears above.

In addition, several new styling attributes have been made available for use in your [emailpetition] shortcodes. These attributes make it easy to customize the look of your petition form and even style the same petition form differently on different pages of your site. The new attributes are width, height, progresswidth and class. Instructions on how to use these attributes are below...


[emailpetition] shortcode attributes

id

The ID number of your petition. This attribute has always been there—no changes. To display a basic petition, use this format:
[emailpetition id="1"]

width

This sets the width of the wrapper <div> that surrounds the petition form. Format as you would a width rule for any standard CSS selector. Values can be denominated in px, pt, em, or % ... The units marker (px, % ...) must be included.

To set the petition from to display at 100% of it's container, use:
[emailpetition id="1" width="100%"]

A petition set to display at 500 pixels wide can be achieved using:
[emailpetition id="1" width="500px"]

height

This sets the height of the petition message box (rather than the height of the entire form). Format as you would a height rule for any standard CSS selector. Values can be denominated in px, pt, em, or % ... The units marker (px, % ...) must be included.

A few notes on using percentages:
Using a % value only works when the "Allow custom messages" feature is turned off—because the petition message will be displayed in a <div>. When "Allow custom messages" is turned on, the petition message is displayed in a textarea, which cannot be styled with % heights. Use px if you wish to set the height on petitions that allow message customization.

To set the message box to scale to 100% of the height of the message it contains, use any % value (strangely enough, setting this to 100%, 0%, 200% or any other percentage value has the same result). Use px if you want the box to scale to a specific height.

Examples:
[emailpetition id="1" height="500px"]
[emailpetition id="1" height="100%"]

progresswidth

Sets the width of the outer progress bar. The filled area of the progress bar will automatically scale proportionally with the width of the outer prgress bar. Provide a numeric value in pixels only. Do not include the px unit marker.

To display the progress bar at 300 pixels wide, you would use:
[emailpetition id="1" progresswidth="300"]

class

Adds an arbitrary class name to the wrapper <div> that surrounds the petition form. Typically, this would be used to assign the alignright, alignleft or aligncenter classes to the petition in order to float the petition form to one side of its container. alignright, alignleft or aligncenter should be included styles in any WordPress theme as they are used by the media library to place images in your posts. Any other class name defined in your theme's style.css can be used as well. To assign multiple classes, separate the class names with spaces.

Examples:
[emailpetition id="1" class="alignright"]
[emailpetition id="1" class="style1 style2"]


Working Examples

Below are examples of the same petition being displayed with different shortcode attributes.

Example 1

[emailpetition id="4" width="400px" progresswidth="360" class="alignright"]

Another Petition

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.

[signature]

1 signature

Share this with your friends:

   

Example 2

[emailpetition id="4" width="100%" progresswidth="400"]

Another Petition

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.

[signature]

1 signature

Share this with your friends:

   

Example 3

[emailpetition id="4" height="100%"]

Another Petition

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.

[signature]

1 signature

Share this with your friends:

   

Basic Theme

Below is a preview of the new "basic" theme styling. In this case, we're using a screenshot rather than a live petition because only one petition theme can be active at a time. The look below would be achieved using the shortcode without any styling attributes:
[emailpetition id="4"]

Comments

iHuman
March 17, 2013

Great plugin! Quick question: What does the ‘Allow custom messages’ option provide for? I haven’t seen it make a difference, or offer a textbox to add a custom message.

April 12, 2013

If there is a option for language for each petition,
for example,
[emailpetition id="4" lang="fr]
it would be great. Without using WPML, we can make petitions with multiple languages.

Thomas
July 18, 2013

Hi, great plugin :) Thanks! Is there any option to disable facebook/twitter-button? Thanks. Bye…Thomas

xannu
March 18, 2014

Hi good day,

You have such a nice plugin.

Is there a way, a shortcode perhaps, to dispaly the list of petitions (archives)?

thanks

Add your comment