SuiteCRM Survey/Application Form Integration?

alice · 14 January 2020 23:12

Hey guys,
As part of my sales funnel I have an application form where clients answer some questions so we can see if they are the right fit for us. So far I’ve been using typeform for this goal but I want to go open source here as well so I am wondering how to do this, so here are some questions:

Does SuiteCRM have a built-in survey/application form feature that I can embed on my site?
If using NextCloud forms is there any way for SuiteCRM to pull this info from NextCloud and create the lead entries?
There’s something called LimeSurvey which is an open source survey tool. This is my last resort as it’s basically a separate self-hosted instance and I want to manage as few instances as possible.

Thanks

Mac-Rae · 15 January 2020 10:52

Hi @alice,

There is a built in “Web to Leads” form that can be created. This link appears to cover it;

Remember you can always pretty the provide HTML with CCS etc to ensure it looks correct with your site!

Let me know if you run into any issues and ill be happy to assist you furthe

alice · 15 January 2020 11:59

Thanks @Mac-Rae,
Just to clarify I am trying to do this: https://go.iag-media.com/agency-application
or this: https://samovensdemo.com/survey

Can I do this with the web to lead form?
Thanks.

Mac-Rae · 15 January 2020 12:09

The first one would need a lot of changes but i don’t see why not and the second definitely. Let me grab some demo code and ill show you what you get

Mac-Rae · 15 January 2020 12:24

Ok so following through what pgr said on the linked post,

Pressing the button on the sidebar of campaigns lets you make you’re form

It’s as simple as dragging a few fields over into the first or second colours and pressing ok.
You output by default will look something like this;

In this editor feel free to make changes or using the code below (Provided when you press save web form) you can make a really custom setup like shown in the first example you provided.

Example code (Open me at your own discretion

<html lang='en_us'><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><style type="text/css"><!--
form#WebToLeadForm, form#WebToLeadForm * {margin: 0; padding: 0; border: none; color: #333; font-size: 12px; line-height: 1.6em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}
form#WebToLeadForm {float: left; border: 1px solid #ccc; margin: 10px;}
form#WebToLeadForm h1 {font-size: 32px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h2 {font-size: 24px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h3 {font-size: 12px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h4 {font-size: 10px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h5 {font-size: 8px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h6 {font-size: 6px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm p {padding: 10px 20px;}
form#WebToLeadForm input,
form#WebToLeadForm select,
form#WebToLeadForm textarea {border: 1px solid #ccc; display: block; float: left; min-width: 170px; padding: 5px;}
form#WebToLeadForm select {background-color: white;}
form#WebToLeadForm input[type="button"],
form#WebToLeadForm input[type="submit"] {display: inline; float: none; padding: 5px 10px; width: auto; min-width: auto;}
form#WebToLeadForm input[type="checkbox"],
form#WebToLeadForm input[type="radio"] {width: 18px; min-width: auto;}
form#WebToLeadForm div.col {display: block; float: left; width: 330px; padding: 10px 20px;}
form#WebToLeadForm div.clear {display: block; float: none; clear: both; height: 0px; overflow: hidden;}
form#WebToLeadForm div.center {text-align: center;}
form#WebToLeadForm div.buttons {padding: 10px 0; border-top: 1px solid #ccc; background-color: #f7f7f7}
form#WebToLeadForm label {display: block; float: left; width: 160px; font-weight: bold;}
form#WebToLeadForm span.required {color: #FF0000;}
--></style>
<!-- TODO ???
<script type="text/javascript" src='http://localhost:9071/crm/myfork/cache/include/javascript/sugar_grp1.js?v=XAfem_zhHJfSVteXacDbUw'></script>
--><form id="WebToLeadForm" action="http://localhost:9071/crm/myfork/index.php?entryPoint=WebToPersonCapture" method="POST" name="WebToLeadForm">
<h2>SuiteCRM Web-to-Lead Form (Form Header)</h2>
<p>This is a description of the forum (Form Description)</p>
<div class="row">
<div class="col"><label>First Name: </label><input name="first_name" id="first_name" type="text" /></div>
<div class="col"><label>Office Phone: </label><input name="phone_work" id="phone_work" type="text" /></div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Last Name: <span class="required">*</span></label><input name="last_name" id="last_name" type="text" required="" /></div>
<div class="col"><label>Email Address: </label><input name="email1" id="email1" type="email" /></div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Job Title: </label><input name="title" id="title" type="text" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Referred By: </label><input name="refered_by" id="refered_by" type="text" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Account Name: </label><input name="account_name" id="account_name" type="text" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row center buttons"><input class="button" name="Submit" type="submit" value="Label for the Submit Button (Submit Button)" onclick="submit_form();" />
<div class="clear"> </div>
</div>
<input name="campaign_id" id="campaign_id" type="hidden" value="cf53ece4-8756-033f-182c-5e1f01949a5d" /> <input name="redirect_url" id="redirect_url" type="hidden" value="https://suitecrm.com" /> <input name="assigned_user_id" id="assigned_user_id" type="hidden" value="1" /> <input name="moduleDir" id="moduleDir" type="hidden" value="Leads" /></form>
<p>
<script type="text/javascript">// <![CDATA[
    function submit_form() {
        if (typeof(validateCaptchaAndSubmit) != 'undefined') {
            validateCaptchaAndSubmit();
        } else {
            check_webtolead_fields();
            //document.WebToLeadForm.submit();
        }
    }

    function check_webtolead_fields() {
        if (document.getElementById('bool_id') != null) {
            var reqs = document.getElementById('bool_id').value;
            bools = reqs.substring(0, reqs.lastIndexOf(';'));
            var bool_fields = new Array();
            var bool_fields = bools.split(';');
            nbr_fields = bool_fields.length;
            for (var i = 0; i < nbr_fields; i++) {
                if (document.getElementById(bool_fields[i]).value == 'on') {
                    document.getElementById(bool_fields[i]).value = 1;
                } else {
                    document.getElementById(bool_fields[i]).value = 0;
                }
            }
        }
    }
// ]]></script>
</p></body></html>

Let me know if you need any more help, first stage is to get the code into your hands, second is to customise to your liking, third is to add this to whatever website you will be using to gather data from.

alice · 16 January 2020 19:59

And since that will serve as an application form for a discovery call, would it be possible to set up a workflow where I can Approve/Reject the application in SuiteCRM and if approved send email A, if rejected send email B?

crmspace · 17 January 2020 07:23

Hi Alice,
yes, that’s possible (using two workflows).