View Full Version : floating contact form, left side
mlegg
04-04-2016, 12:36 AM
I'm trying to make a floating left side, out of the main container, for call me and contact me.
similar to this
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Floating-Social-Share-Contact-Sidebar/
the contact button opens your email clientt but I'd like it to pop open a form to fill out instead.
here is an example of what I've used before (http://nobetterview.com/index.html) from contactme (http://my.contactme.com/users/sign_in) but they are shutting down. I know the code to make the call me button work
<a href="tel:1-847-555-5555">1-847-555-5555</a>
mlegg
04-05-2016, 12:53 PM
does anyone have any ideas?
this is the code that I use from contactme
<script type="text/javascript">var _cmo = {form: '55cd1ee8adfbd40003002d54', text: 'Contact', align: 'left', valign: 'middle', lang: 'en', background_color: '#003E02'}; (function() {var cms = document.createElement('script'); cms.type = 'text/javascript'; cms.async = true; cms.src = ('https:' == document.location.protocol ? 'https://d1uwd25yvxu96k.cloudfront.net' : 'http://static.contactme.com') + '/widgets/tab/v1/tab.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cms, s);})();</script>
Beverleyh
04-05-2016, 03:29 PM
I'm not entirely sure what you're asking. The script looks like it pops up and inserts the contact from that they provide, but if you are saying that they're discontinuing service, I image you would need to approach this in 2 stages to build a suitable alternative;
1 - Create your own contact form, either one hosted on your own server or via a different 3rd party.
2 - Open your alternative contact form page via a modal window (source a modal popup script).
Either way, it looks like you will need to research/build a contact form, and a modal window/popup. There is probably a modal window script in the DD library so have a look there. As for the contact form, try Googling something like "how to create a contact form with php".
mlegg
04-05-2016, 04:26 PM
Yes, contactme is discounting soon. I'd like the modal to appear in the far left of the website, outside of the container. I'm just not sure how to make the code for that.
<div id="wufoo-zuzz9gb1o0z8xd">
Fill out my <a href="https://nationalkitchencabinets.wufoo.com/forms/zuzz9gb1o0z8xd">online form</a>.
</div>
<div id="wuf-adv" style="font-family:inherit;font-size: small;color:#a7a7a7;text-align:center;display:block;">There are tons of <a href="http://www.wufoo.com/features/">Wufoo features</a> to help make your forms awesome.</div>
<script type="text/javascript">var zuzz9gb1o0z8xd;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'nationalkitchencabinets',
'formHash':'zuzz9gb1o0z8xd',
'autoResize':true,
'height':'603',
'async':true,
'host':'wufoo.com',
'header':'show',
'ssl':true};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { zuzz9gb1o0z8xd = new WufooForm();zuzz9gb1o0z8xd.initialize(options);zuzz9gb1o0z8xd.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');</script>
Beverleyh
04-05-2016, 04:51 PM
A place to start: https://www.google.co.uk/#q=modal+popup+script
mlegg
04-05-2016, 05:15 PM
I just can't find a way to code the modal popup to the far left to float like this image.
5874
Beverleyh
04-05-2016, 05:24 PM
You mean the "Contact" tab? That's not a modal popup - although I still believe that's what you want to display your popup contact form inside.
You can "stick" the tab to the left side of the screen using position:fixed;
mlegg
04-05-2016, 08:20 PM
click on the link (http://nobetterview.com/index.html) and scroll down the page, see how the contact button stays on the left in the middle?
Beverleyh
04-05-2016, 08:42 PM
Yes. Please refer to my previous post regarding the use of position:fixed; to "stick" an element (the tab you will build) to a place on the screen.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.