▼
Streaming live at 10am (PST)

Sending webflow form inputs to a plugin via javascript

Community resources General
#1

Hi,

My goal is to send webflow form data to ReferralHero plugin so that a new account can be created in referralhero for every form submission.

ReferralHero calls this process “Add subscriber manually” in their documentation which also has j script instructions: Add a subscriber manually - ReferralHero

I can’t get this to work. I suspect I’m not labeling form elements correctly and/or having labels confused between class elements and IDs.

Here’s a link to my super basic form which only has one field - email field.

and here’s the script I’m entering into my page (body section).

script start

var signup1 = document.getElementById(‘signup1’);
signup1.addEventListener(“submit1”, function(e){

var data = {
  email: signup1.querySelector('#email1'),
  terms: true // Terms and conditions. Mandatory if your campaign  requires the acceptance of T&C
};

if (RH) {
  RH.form.submit(data);
}

})

script end

Any help figuring this out would be so much appreciated.

Best,
David

#2

I am assuming signup1 is a form element. On second line, it should be “submit” not submit1.

Also to get the email, you should use $(“#email1”).val(); assuming email1 is the id of the email input.

#3

thank you for trying to help me. I tried to do some edits to the script and the version below is not working. I’m still not sure if I labeled selector/ID’s correctly.

script start

var signuptest = document.getElementById(‘signuptest’);
signuptest.addEventListener(“submit”, function(e){

var data = {
  email: signuptest.querySelector($("email").val();
  terms: true // Terms and conditions. Mandatory if your campaign  requires the acceptance of T&C
};

if (RH) {
  RH.form.submit(data);
}

})

script end

#4

I just kept trying and found script code that worked successfully. Such bad instructions provided by plugin creator…

Turns out had to have the name field in the script for it to work properly.

var signuptest = document.getElementById(‘signuptest’);
signuptest.addEventListener(“submit”, function(e){

var data = {
  name: signuptest.querySelector('#name').value,
  email: signuptest.querySelector('#email').value,
  terms: true // Terms and conditions. Mandatory if your campaign  requires the acceptance of T&C
};
  console.log(data)
  
if (RH) {
  RH.form.submit(data);
}

})

#5

@crewtify good afternoon i trust that you are safe and well.
I cant get it to work either… where did u install the script above? apologies I don’t have a lot of experience with code.

Essentially what I would like to do is this:

i use the referralhelro widget instead our own submission form on our landing page but unfortunately, we cannot track properly our conversion rate as google analytics requires to track a button. like you state above I can use a webflow form and when someone clicks the submit button, gets the referral hero pop to share his unique link with his friends. This way we can track from where they came from and also give them the chance to share their unique link.

is this what you manage to achieve?

thanking you in advance,
Stelios K

#6

Hi mate,

I understand you want to install basic form option which is their widget. I recorded a short video that may be able to get you started on this: Loom | Free Screen & Video Recording Software

Regarding google analytics, it may be possible to track everything while using widget. I can’t provide any help on that option. But if you did a custom form option like implemented on our website www.crewtify.com, then it’s very easy to track everything through google tag manager. I recommend watching youtube videos for figuring out google analytics.

Hope this helps. Good luck!

Best,
David

#7

hi @crewtify

wow thank you so much I cant believe you even recorded a video for me thank you so much.
apologies i think i didn’t explain my self properly i will try again. please see below a read only link to the site I’m working on:

https://preview.webflow.com/preview/damex?utm_medium=preview_link&utm_source=designer&utm_content=damex&preview=9d07eae2a4d5afad8afac9035179f550&mode=preview

we have installed the widget is very easy to do its just a line of code and its embedded into the website. with the widget you even get an inline pop up that once someone subscribes to the waiting list then he can see the his position in the queue and its being encouraged to refer more people to progress higher in the queue. nice!!

our issue is that with the widget we cannot track our goals on google analytics as that can only be done if you have an actual submit button on a webflow form.

What we are trying to do is have our own form made in webflow and once someone subscribes the data goes to referal hero and then the user is being prompt with the ReferralHero Sharing screen as a pop up: Add a subscriber manually - ReferralHero

this way we can still track everything and we give the user the option to share his unique link too.

I hope this clarifies better what we are trying to do.

Many thanks in advance,
Stelios K

#8

So you want a webflow form to send data using Javascript to referral hero. Then it’s a system like ours. What specific questions do you have for implementation?

#9

hi @crewtify,

again thank you so much for your help. we are going to launch the campaign tomorrow and this is the last thing left so I really really appreciate your help.

question 1. based on your code below I will assume that I need to replace: signuptest.querySelector with the name of my form is this correct?

question 2. how do I get the referral hero share screen pop to appear after people click on the webflow sign up form.

Many thanks in advance,
Stelios k

#10

See highlighted text in bold for what needs to be changed:

var signuptest = document.getElementById(‘signuptest’);
signuptest.addEventListener(“submit”, function(e){

var data = {
name: signuptest.querySelector(’#name’).value,
email: signuptest.querySelector(’#email’).value,
terms: true // Terms and conditions. Mandatory if your campaign requires the acceptance of T&C
};
console.log(data)

if (RH) {
RH.form.submit(data);
}

})

To answer your second question, you just need to go to referral hero - > edit campaign - > design -

extra settings - > and check the box “open sharing screen in pop up.”

#11

@crewtify thanks a lot for your prompt reply. Silly question again apologies I’m not entirely sure where this code needs to go? do I have to insert it on the of my landing page or under custom code on the project settings?

also, anywhere i paste it it doesnt look like it recognise it as a code, i.e. the code deosnt change into different colours. its just black.

#12

you should enter it into custom code field of that specific page like I showed in my video.

I have this code inside the head tag. It starts likes this:

!function(m,a,i,t,r,e){if(m.RH)return;r..... Then I have the script from my prior message in the Before tag custom code field.
#13

understood. i did exactly like you instructed. i get some code highlighted in red is this normal?

Screenshot 2021-02-28 at 20.59.35
Screenshot 2021-02-28 at 20.59.351242×728 70.7 KB

https://preview.webflow.com/preview/damex?utm_medium=preview_link&utm_source=designer&utm_content=damex&preview=9d07eae2a4d5afad8afac9035179f550&mode=preview

#14

I reviewed your code side by side with mine. Looks good. I’m not sure why it highlights. See if it works this way. Just need to make sure you have correct selector names given to elements (aka element name) and the in element settings you give correct ID names that match javascript ID names for #name, #email

#15

i just did. they all match. name is name email is email and the form is named form. but I don’t get the subscription on referral hero. note sure if I have copy pasted the code wrongly? it does look similar to yours minus the different names.

#16

try copy paste the template code RH provides (exactly from their documentation) and then replace values. Maybe that will help.

#17

ok so i needed to remove the # from name & email and they are not red any more as they don’t exist on referralhero code either. but I still don’t see the submitted name and email on referral hero :frowning: any other ideas ?

#18

I’m sorry, it’s been a minute since installing RH. I’m not sure how else I can help. You may look into hiring someone from fiverr to help with this for like $20-50. But you’d want to give them at least 48 hours.

#19

try this person if u want to go fiverr route. He was helping me, so he should have a fresh memory of RH.

#20

@crewtify thank you so much i will have a look.

have a lovely day and stay safe.

Many thanks again
SK