<script src="https://cdn.furkot.com/scripts/furkot-trip-planner.min.js" defer></script> <span>Plan with Furkot button is a submit button <input type="submit"> of a <form>. Trip planner is displayed below plan with Furkot button.</span> <br> <br> <form method="POST" class="plan-trip" action="https://trips.furkot.com/trip"> <input type="hidden" name="stop[name]" value="Mount Katahdin"> <input type="hidden" name="stop[coordinates][lon]" value="-68.921274"> <input type="hidden" name="stop[coordinates][lat]" value="45.904354"> <input type="hidden" name="stop[url]" value="http://blog.furkot.com/katahdin"> <input class="plan-button" type="submit" value="Plan trip to Mount Katahdin"> <a class="furkot-widget-done">x</a> </form> <div class="furkot-widget"></div>
.plan-button { display: inline; color: white; background: black; cursor: pointer; padding: 8px; border: none; font-size: 16px; } .furkot-widget-done { display: inline; color: gray; cursor: pointer; padding: 0 2px; border: solid 1px gray; font-size: 12px; margin: 3px; } .plan-button:focus { outline: 0; } .furkot-widget-active iframe { width: 400px; height: 400px; border: none; padding: 0; margin: 0; } .furkot-widget-inactive iframe, .furkot-widget-done.furkot-widget-inactive { display: none !important; }