How do I embed a Javascript form directly into a page?

Question

I have a new WP install with the Jupiter Theme installed. I have a contact form created in Sharpspring, a CRM that purports to work perfectly with WP, and automatically generates embed codes for plugging into any page. I'm no JS whiz and can't figure out how to get the form to actually embed.

I've got a tracking code provided to me form Sharpspring, which I have included in the header file:

<script type="text/javascript">
    var _ss = _ss || [];
    _ss.push(['_setDomain', 'domain.com']);
    _ss.push(['_setAccount', 'TrackingIDHere']);
    _ss.push(['_trackPageView']);
    (function() {
        var ss = document.createElement('script');
        ss.type = 'text/javascript'; ss.async = true;
        ss.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'marketingservices.com/client/ss.js?ver=1.1.1';
        var scr = document.getElementsByTagName('script')[0];
        scr.parentNode.insertBefore(ss, scr);
    })();
</script>

Then, I have a couple embed codes for a couple different forms, which look like this:

<!-- SharpSpring Form for General Contact Form  -->
<script type="text/javascript">
    var ss_form = {'account': 'AccountID', 'formID': 'FormID'};
    ss_form.width = '100%';
    ss_form.height = '1000';
    ss_form.domain = 'domain.services';
    // ss_form.hidden = {'Company': 'Anon'}; // Modify this for sending hidden variables, or overriding values
</script>
<script type="text/javascript" src="https://marketing.services/client/form.js?ver=1.1.1"></script>

How can I embed codes like this directly onto pages so the associated forms display and the submitted information enters directly into Sharpspring, like their pitch promises?

Howdy_McGee · Accepted Answer · 2015-12-15 20:33:11Z

2

Here's a Step by Step Guide to adding Javascript into Pages:

Step 1: Log into WordPress

Step 2: Navigate to whichever page you want to add the scripts onto.

Step 3a: If you have some kind of Page Builder you'll need to click the "Basic Editor" button or something similar so you get the Default WordPress Editor which looks like this:

Step 3b: Once you see the basic default editor, click the "HTML" ( on older versions ) or the "Text" tab located near the top right of your editor. "Visual" will be right next to it.

Step 4: Paste your code wherever you want it. You won't be able to see the form when you switch back to Visual but it will be there, silently waiting to execute.

Step 5: Click "Update" button and verify that you see the form as expected.

answered Dec 15, 2015 at 20:33

Howdy_McGee♦

20.9k24 gold badges93 silver badges178 bronze badges

1

This is exactly what I did. The company that generated the form, it turns out, gave out the wrong domain information. I had to get on the phone with them and they gave me the proper domain so the JS would actually render. Thank you!

abernst
– abernst

2015-12-15 21:29:15 +00:00
Commented Dec 15, 2015 at 21:29

Add a comment |

s_ha_dum · Accepted Answer · 2015-12-15 20:59:25Z

2

The quick and dirty way (but less dirty than page by page edits) would be a shortcode:

function my_sharpspring() {
$str = <<<EOD
<!-- SharpSpring Form for General Contact Form  -->
<script type="text/javascript">
var ss_form = {'account': 'MzQ3NTM0MwQA', 'formID': 'S0syMjA2SjLTTUsyMNE1STU10rVMNUvRNUk0NjCwMDS0SDM2AAA'};
ss_form.width = '100%';
ss_form.height = '1000';
ss_form.domain = 'app-RLHZMLM6.marketingautomation.services';
// ss_form.hidden = {'Company': 'Anon'}; // Modify this for sending hidden variables, or overriding values
</script>
<script type="text/javascript" src="https://koi-RLHZMLM6.marketingautomation.services/client/form.js?ver=1.1.1"></script>
EOD;
  return $str;
}
add_shortcode('sharpspr','my_sharpspring');

edited Dec 15, 2015 at 20:59

answered Dec 15, 2015 at 20:41

s_ha_dum

65.7k13 gold badges85 silver badges177 bronze badges

1

Your edit will break heredoc syntax @Howdy_McGee, that and the fact that it preserves everything-- line breaks, unnecessary tabs and space, etc-- is why I rarely use it.

s_ha_dum
– s_ha_dum

2015-12-15 20:58:59 +00:00
Commented Dec 15, 2015 at 20:58

Add a comment |

Stack Exchange Network

How do I embed a Javascript form directly into a page?

2 Answers 2

Your Answer

Hot Network Questions

How do I embed a Javascript form directly into a page?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions