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
The ID number of your petition. This attribute has always been there—no changes. To display a basic petition, use this format:
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"]
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.
[emailpetition id="1" height="500px"]
[emailpetition id="1" height="100%"]
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"]
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.
[emailpetition id="1" class="alignright"]
[emailpetition id="1" class="style1 style2"]
Below are examples of the same petition being displayed with different shortcode attributes.
[emailpetition id="4" width="400px" progresswidth="360" class="alignright"]
[emailpetition id="4" width="100%" progresswidth="400"]
[emailpetition id="4" height="100%"]
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: