Wonky Submit & Print-O-Matic Button

This is a Dr. Frankenstein experiment with Contact Form 7’s Submit button and the Print-O-Matic Print button. In theory, when submitting this form, the form should also also force-launch the print dialogue. Years of working in UI tells us NOT do this, but hey, people still have music playing on page load, so what do we know.

[[contact-form-7 id="1018" title="SubPrint"/]]

To cross-breed the Submit button with the print-o-matic print trigger, use the roll-your-own method as follows:

  1. create a cf7 submit/print button by assigning it a unique ID (in this case subprint) and a class of printomatic.
    [submit id:subprint class:printomatic]

  2. manually insert a hidden input that has the ID of “target-” and a value of the target you wish to print.
    <input type="hidden" id="target-subprint" value=".wpcf7-form" />

  3. be sure the ‘Shortcode Loads Scripts’ checkbox is NOT checked in the plugins options page.

Update: This is no longer supported in the current version of print-o-matic. Here is how to implement this solution with print-pro-matic.

Print-O-Matic Test

Map Test

Collapse-O-Matic Map Test

Hamburg Harbor
[google-map-v3 width=”350″ height=”200″ zoom=”12″ maptype=”roadmap” mapalign=”center” directionhint=”false” language=”default” poweredby=”false” maptypecontrol=”true” pancontrol=”true” zoomcontrol=”true” scalecontrol=”true” streetviewcontrol=”true” scrollwheelcontrol=”false” draggable=”true” tiltfourtyfive=”false” addmarkermashupbubble=”false” addmarkermashupbubble=”false” addmarkerlist=”53.542443,9.963925{}aircraftcarrier.png{}Beautiful Hamburg Harbor” bubbleautopan=”true” showbike=”false” showtraffic=”false” showpanoramio=”false”]

Print-O-Matic GPX Map Track Text

[sgpx gpx=”/wp-content/uploads/gpx/Baarn Hilversun Vuursche – 11 km TR.gpx”]

It seems the map is also injecting the following CSS:

.wpgpxmaps { clear:both; }
#content .wpgpxmaps img,
.entry-content .wpgpxmaps img,
.wpgpxmaps img { max-width: none; width: none; padding:0; background:none; margin:0; border:none; }
.wpgpxmaps .ngimages { display:none; }
.wpgpxmaps .myngimages { border:1px solid #fff;position:absolute;cursor:pointer;margin:0;z-index:1; }
.wpgpxmaps_summary .summarylabel { }
.wpgpxmaps_summary .summaryvalue { font-weight: bold; }
.wpgpxmaps .report { line-height:120%; }
.wpgpxmaps .gmnoprint div:first-child { }
.wpgpxmaps .wpgpxmaps_osm_footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 13px;
margin: 0;
z-index: 999;
background: WHITE;
font-size: 12px;
}

.wpgpxmaps .wpgpxmaps_osm_footer span {
background: WHITE;
padding: 0 6px 6px 6px;
vertical-align: baseline;
position: absolute;
bottom: 0;
}

So we need to add that to the print page using the custom print page css filed in print-o-matic settings.