How to integrate Zoho CRM, Zoho Forms and a WIX Web Site

hi there today we’re going to look at integrating Soho forms with a website and this website is in fact a Wix website so this is the website and I’m going to replace the contact us form here with a Zoho form which is part of the zero-one and then we’re going to integrate that and make it available into our CRM leads so the first thing we should do is create the form so I’m going to open forms create new form and actually I’m going to use a
template and we’ve got on the left here some predefined templates already and as I want to use a contact us i will opt for using the contact us template which is fairly close to what I want so I’m going to use this template now before we get started I just want to point out you’ll see this particular form we don’t have a lot of space here and the fields are quite close together so when you first design your form you’ve got your form properties on
the right and you’ve got the ability here to change the location of your labels and that will provide let’s say a tighter fitting form okay or place them on the top so I’m going to take this option here and I’m going to just rename the form actually I’ll call it heat pump heat pump cover there we go alright and what else do I want to do let’s have a look here it’s got subject I think I don’t need the subject but what I would like is the if
Inquirer’s phone number so I’ve drag and drop from the lift here the phone icon the phone field place that on there and I would say insert or inter mobile number okay so that will show under the field that I want the mobile number the next thing we should note that these red asterisks indicate compulsory or required fields I don’t need people to make a comment so you can turn that off here under validation but I actually do want their phone
number so we can click on this as mandatory and then the last step I’m going to do is define the lead source now some of these leads come from various locations so what I’m going to do is add lead source field and I’m going to enter a value here okay actually we’ll call a heat pump website okay and we are going to hide it okay so what will actually happen now if we have a quick look at this form if we’ve got first name last name we’ve got email
we got phone into the phone and you’ll see we have not got any details about the lead source because it’s actually hidden so I’ll save that okay so that’s done what we now need to do is look at the top here some additional settings so the next step we should have a look at as maybe the integration so it’s already suggesting we could integrate to CRM so I’ll say yeah let’s do that the module we’re going to integrate with is the leads module the
layout is their standard layout last name of the CRM which is on the side is going to integrate with the Zoho form of also last name so the next field will be first name and we’ll integrate with first name we can integrate worth let’s have a look here lead source and we will pick up lead source we’ve got the mobile number for the CRM and we’ll met that phone we’ve got email address and we’ll map that to email and lastly we’ve got the description
and we’ll map that down to leave us a few words that’s really all we need to capture so that’s integrated down here we’ve got some settings about you want to send this for approval do you want to touch a signature anything to the forum will it trigger a workflow I can use this one and what this one says is if this record already exists using the email feel if they use the same email field simply update that record and don’t add it again so I’m
gonna integrate that and that’s now done so we could do a quick test we could do excess form and we’ll put Steve Jones and we’ll put Stevie head hotmail.com with this phone number and his comments like this we’ll put submit and it’s come up with a message saying thank you for submission etc we can close that out and I’ll go across to the leads and we’ll refresh our leads and sure enough here’s Steve record and including the lead site where it
came from so it came from our heat pump website we’ve got the phone number if we scroll down a little bit down here we should see the description we’ve got no comment so all that seems to be working okay so the next step we want to do is look at some of the settings of the form because there was a couple of things I wasn’t quite happy with firstly if we have a look at the form on the website we’ve already got a label or a heading called contact
so actually I don’t actually want to show the header when we insert this form I want to change the submit button and I’ll just put let’s say send let’s let’s change it to send the date format looks far I can change this to the area that I want the time codes that I want to use it in and I’ll use it let’s say here okay and that looks fine for date-time format settings etc the next setting we want to have a look at is called acknowledgment and
receipts now you’ll remember that it popped up a box saying thank you for submitting your data I didn’t particularly like that so what I’m going to do is redirect to the website itself so we’ll just go and grab the web address and I’m going to enter that here so after we click Submit it’s going to basically do this in the same window go back to the page itself and then we’re going to just have a splash message saying thank you for your inquiry
and we can click Save okay email notifications let’s have a look at this one what we can do is we can send the person that made the enquiry an email and say thank you so we can merge in their email address from the forum and we can say thank you for your enquiry for heat pumps covers okay we know that and then on the right hand side here we can have the first name here we can say hi whatever their name is going to be thanks for your query team or
contact you shortly okay otherwise okay and it’s also possible these are all of the data that we’ve collected their IP address their time their lead source all the informations available and some people may wish to you know say something like this is the data you sent us and you can merge all of that data and if you want to in their email as well okay what else we got here once again you could also emerge any of the data you’ve collected into the
subject as well and we can hit save so we’ve created a template that’s going to kick off the minute we submit the form and I think that’s probably most things we need to worry about at this point so let’s have a another test of the form you’ll see this time we’ve got no hitting so we’ll just put Tommy this time and we’ll put how we like this and we’ll put Tom easy Gmail calm Tommy 2:30 to Tommy’s phone number and we’ll leave that blank now when
we hit the scene button you’ll see that’s been updated what we should do is go to that little splash screen saying thank you and then we’ve been returned to the website so once again that’s looking really cool and if we go back to our leads and we do a refresh we should see Tommy here if we open up this particular record you’ll see the lead the email address all that information has come through let’s have a look at any email yep so that looks
fine okay so what we’ll do now is we’ll go back to the form and I’ll just have a look at the form here and you’ll see one of the issues that we’ve got with this form is the colors so you know if we’re going to have this form fit in here we need to you know try and make it the same look and feel so what we suggest is you go across to your website and Wix you go to your Wix editor and we try and see if we can work out some of the colors that have
been used so we’re in the editor now if we move down to the section here first thing what we could do is say have a look at this area so firstly you can see that we’re using the font as Arial as using 12 12 pitch there points there and also you’ll see we’ve got color here and you’ll see that this is the color of the text this code here so what I could suggest you could do is maybe using these particular color Pickers you can pick a color to a
point where the text appears to be invisible or very close to invisible and that would give you an indication that that’s the color that’s being used for the background and that would be the color that we want to apply for the actual form colors so let’s go back to the form now and we go to an area called themes and we now want to customize the form so I’ve actually picked up the color that I need is actually this code here and I’m going to
change the background of the form to that particular color and we’re just going to paste it in here so we’ve now done that but you’ll see there’s some lines here so I need to make it clear so you take off any of the patterns and this is the form itself so let’s go down a little bit and we’ve got the forum let’s have a look forum for the forum container I want that to also be the same color okay so that’s now transparent now we’ve got this looking
a little bit funny that’s called the submit let’s have a look the submit container background yep okay so that’s the form footer the green color doesn’t really go with the current website so once again we could come back here and maybe go for this darker color here so this is the color number and we could come back to our form and we could look at the this button here and we’ll have a look at the submit button and we’ll look at the background and
we’ll see if we can update that so that looks fine now you’ll see there’s still a bit of a green line around it that’s the border so let’s see if we can find borders okay and we’ve got submit border we could do one or two things we could remove it all together or we can have a thin border but then change the color so we then get this now let’s have a look at the font because the font you’ll remember was Arial 12 so we’ll go to the font or go to
the field labels we’ll use Arial normal and we’ll use twelve and I’m also going to use that dark color okay and that’s kind of looking not too bad now so the only other thing I would do is maybe the size of the forum itself so let’s have a look at the width it’s got 800 here so let’s have a look how wide we need this forum to actually be what I would do is come back to the forum here and have a look at verse to see if we’ve got any clues to the
width and I can’t see anything just there but how we’re going to integrate this form is actually by adding some code and we use that by coming down to more and using this iframe embedded widget here and we would drag and drop that to where we want it so if we go something like this and then we kind of stretch it out here a little way that will give us an idea maybe how wide we can have the forum so let’s say to me it looks close to say 500 510 so
we can come back to here we can put 510 as the width that will do us and we’ll hit apply okay we can close that down we can have a quick look at the form so that’s what we’re going to end up inserting so what I need to do now is if we go back to the web editor I can move that and now we can actually remove the form that’s underneath and what we’ll do is we’ll just place this roughly where we want it and we enter code to you you hit the enter code
button and then when you come back to the form you have to go to something called shearing and there’s lots of ways that you can share you can see somebody a link you can track referrals that open you can put some text and that can record where this link came from and things like that but on the left here is different ways you can embed that form and I’m going to use the iframe because that’s the kind of widget that we’ve got here and I’ll just
paste that in and let’s have a look here height is 500 words okay and we’ll apply and there we go we’ve got that done now I’m going to also just change the design here to ensure that we have no color and that way we’re gonna get the same look and feel now it looks a wee bit funny just here but I’m going to do a couple of adjustments okay the first adjustment we’ll do is we want to move and position the form a little bit better so I’m going to
maybe position here maybe up a little bit because we’ve got the first name quite a long way from the header or the section title but now you’ll see it’s disappeared so what we need to do is just maybe push this to the back move backwards like that and now you’ll see contact has come onto the label what I’ll also do is just move that along overall maybe stretch it out a little bit more and that’s probably looking okay just now maybe down or weave
it now you’ll see on the right we’ve still got this bar for scrolling we could extend the stretch the footer so it’s not having to scroll we could certainly do that and then we can stretch that out a little bit more and then we can ensure that the form is there or you can just leave it so the user has to scroll a little bit okay we’re just going to try and get rid of this scrollbar what I suggest is you firstly just maybe click on the form and
try on sighs a little bit so you can see at the top there we we starting to get the width and the height of the form so I can see that’s about 450 high so what I’m gonna do is we’ll edit the text here we edit the code and you’ll see the height here is set as 400 pixel so let’s make it about 4 450 and we’ll update okay so that’s made a little bit smaller and then what I’m going to do is just maybe stretch it until that disappears and then I’m
going to just see if I can scroll back my bottom bottom of the footer and now that looks pretty good so I’m going to save that publish and refresh the website and we’ll scroll to the bottom and now we’ve got that contact form looking pretty good so I’m going to put in our demo client so we’ll put TD this time and we’ll put my email address so we can see the reply email coming back into my email inbox and there’s no comments here all right and
then we’ll press send and let’s come up well thank you for that inquiry and it’s actually I’ve got a pop-up clock but it should return this now to the front page of the heat pump cover which is correct so I’m going to go back to my email here and here’s the email hi TD thanks for the inquiry blah blah blah so that’s all done okay let’s summarize what we’ve just been looking at firstly with those o1 we used the zero form application we created
ourselves a new form by templates we added a couple of fields including the lead source field we then integrated the various fields on the four to our leads module in CRM we then spent some time playing with themes and getting the look and feel of the form right in the settings we went through and set up how we wanted the form looking how to redirect the form after it had been submitted and also a thank you email template that would be sent to
the customer after that we went through to our Wix website we opened up the editor and then we scroll down to the part of the website that had our contact form we removed the original form that was there and then we substituted the is Ojo crm form onto the web page itself by using an add-on option here through the more function and using the HTML iframe and we went back to the form you’ll recall and used their share option found their iframe
source and then cut and paste that into the form and then we spent a couple of moments just resizing and editing the code on the form to reduce the size of the form so we got rid of the scroll bars and things and then you’ll recall we did get some emails coming in saying thank you for the various inquiries you’ve made etc so I trust that that was useful and you can see it didn’t take me too long to integrate a reasonably good-looking form into
our Wix website thank you my name is andre from cloud solutions thank you you okay we’re just gonna try and get rid of this scrollbar what I suggest is you firstly just maybe click on the form and try and resize it a little bit so you can see at the top there we we starting to get the width and the height of the form so I can see that’s about 450 high so what I’m gonna do is we’ll edit the text here we edit the code and you’ll see the height here
is set as 400 pixel so let’s make it about 4 450 and we’ll update okay so that’s made a little bit smaller and then what I’m going to do is just maybe stretch it until that power disappears and then I’m going to just see if I can scroll back my bottom bottom of the footer and now that looks pretty good so I’m going to save that publish and refresh the website and we’ll scroll to the bottom and now we’ve got that contact form looking pretty good
so I’m going to put in our demo client so we’ll put TD this time and we’ll put my email address so we can see the reply email coming back into my email inbox and there’s no comments here alright and then we’ll press send and let’s come up well thank you for that inquiry and it’s actually I’ve got a pop-up clock but it should return this now to the front page the heat pump cover which is correct so I’m going to go back to my email here and here’s
the email hi teddy thanks for the inquiry blah blah blah so that’s all done so that’s all looking pretty good now so just in summary what we’ve done is we’ve used the Soho forum we’ve designed the forum from a template we’ve set up the integrations we then had to work and spend a little bit of time on the theme getting the colors right and the font size right we went across to our editor here we dropped the object on here using the add more and
using the iframe HTML widget here and we’ve dropped that on there then we wouldn’t got the share code from the forum under shear and we found the iframe code here we cut and pasted that into our form we did a little bit of mucking around just to get the sizing right and then before you know it the forum was looking pretty good on the actual website and then we started getting emails coming in and they were thanking us for our enquiry etcetera so
that’s all working so yeah if you’ve got any questions about this my name is Andre and I’m from cloud solutions and you can see it’s a it’s a good easy way to integrate Wix inquiries into Zoho CRM Thanks