Web form code bugged?

As you can see in the screenshot the code is published but fails… I did the above form as a test example just to try it out.

Below is the rendered code that I used in WordPress and generated by SuiteCRM automatically.

<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 ???

-->
<form action='https://crm.domain-example.com/index.php?entryPoint=investorleadcapture' name='WebToLeadForm' method='POST' id='WebToLeadForm'>
    <h2>Investor Relations </h2>
    <p>Interested to hear about our opportunity?
Fill out the information below and one in the staff will contact you. </p><div class="row"><div class="col"><label>Salutation: </label><select id="salutation" name="salutation" tabindex="1">
<OPTION selected value=''>--None--</OPTION>
<OPTION value='Mr.'>Mr.</OPTION>
<OPTION value='Ms.'>Ms.</OPTION>
<OPTION value='Mrs.'>Mrs.</OPTION>
<OPTION value='Miss'>Miss</OPTION>
<OPTION value='Dr.'>Dr.</OPTION>
<OPTION value='Prof.'>Prof.</OPTION></select></div><div class="col"><label>Mobile: </label><input id="phone_mobile" name="phone_mobile" type="text"></div>    <div class="clear"> </div>
                </div><div class="row"><div class="col"><label>First Name: </label><input id="first_name" name="first_name" type="text"></div><div class="col"><label>Office Phone: </label><input id="phone_work" name="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 id="last_name" name="last_name" type="text" required></div><div class="col"><label>Email Address: </label><input id="email1" name="email1" type="email"></div>    <div class="clear"> </div>
                </div><div class="row"><div class="col"><label>Job Title: </label><input id="title" name="title" type="text"></div><div class="col"><label>Website: </label><input id="website" name="website" type="text"></div>    <div class="clear"> </div>
                </div>please fill out the form and a  Investor Relations Officer (IRO)   will contact you for further discussions.  
<div class="row center buttons">
    <input type="submit"  class="button" name="Submit" value="Please Contact Me" />
    <div class="clear"> </div>
</div>
<input type='hidden' id='campaign_id' name='campaign_id' value='865bf73d-89fa-29c6-70d3-60b525c18848'>
<input type='hidden' id='redirect_url' name='redirect_url' value='https://domain-example.com/thank-you-ir/'>
<input type='hidden' id='assigned_user_id' name='assigned_user_id' value='9ca72d00-117b-6144-6970-60b4dd667b72'>

<input type='hidden' id='moduleDir' name='moduleDir' value='Leads'></form>

    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;
                }
            }
        }
    }
</body></html>

I removed the html tags of course when I posted/published it in WordPress…

I would appreciate a lot if someone could be kind help me with this and tell me how to fix this. Is this by the way a bug in SuiteCRM or something?

Thanks in advance. :smirk: :ok_hand:

Kind regards
PowerQuest

Hi @pgr
Do you know anything about this and what you can do about it?

Thanks a bunch!
Kind regards
PowerQuest

That’s a problem with the Wordpress editor, not SuiteCRM. If you paste the code from SuiteCRM in notepad, you will see how it looks.

I don’t know much about Wordpress, but I believe there is some “code” mode or something, where it doesn’t mess up the formatting so much.

Thanks for your reply @pgr

Actually the same thing happens if you just load the html file that you download from SuiteCRM. E.g. you upload the .html file to the server and access it through the browser https://mydomain.com/example-form-suitecrm.html

If you take the code I provided above and save it as .html file and try to load it you will see that it becomes messed up too. And that is without loading it in WordPress.

Kind regards
PowerQuest

I said “notepad”, not web browser. A web browser is supposed to disregard white space, you would need to add <br> or <p> tags to get newlines.

The correct way to see what is actually there is a text editor. On Windows, I recommend Notepad++, you can check line breaks (see if they Windows- or Linux-style), see which encoding it has, and change encoding if you want.

I am already using Notepad++. However I am uncertain what you mean that I should do.

Isn’t the whole idea that the automatically generated code by SuiteCRM to be turn-key ready and you just paste into your website’s code/pages so you do not need to code anything yourself @pgr?

Kind regards
PowerQuest

From your screenshot, it looks like it renders correctly. What exactly isn’t working?

Did you see the screenshot on the left side where I marked it?

Anyway - I figured it out. SuiteCRM when it automatically generated the code didn’t add the tags on the code.

Example / code corrected:

Thanks again.

Kind regards
PowerQuest

Sorry which tags didn’t SuiteCRM add?

oh sorry @pgr the forum software removed them…
the script tags < s c r i p t > < / s c r i p t >

They are missing in the original code generated by SuiteCRM. (See the first code posted above).

Kind regards
PowerQuest

What is your version of SuiteCRM, please?

Currently running:
image

Kind regards
PowerQuest

I have the latest 7.10 and the script tags are there.

Are you sure your SuiteCRM is not including them when you hit “Save form” at the end of the form creation wizard? I am just trying to figure out if it isn’t Wordpress that is removing them in the copy-paste operation.

Yep 100 % certain.

I did both a copy/paste of the code generated and then also downloaded the .HTML file the SuiteCRM offers you to download.

So I have 2 original copies of the code generated and both are missing the script tags.

And I have absolutely not tampered with the code myself. Just saying…

Kind regards
PowerQuest

Can you try it in the Live demo? For me, it worked well there (and it’s 7.11.9).

I wonder if there could be anything with your browser, some anti-virus or security thing removing tags…

I use Chrome, Brave, Firefox and I do not have anything that could block it.

Kind regards
PowerQuest

So I know now where it goes wrong in the web form generation process @pgr .
I just generated a bunch of web capture forms for our website.

In the step just about before you click “save web form” e.g. the last step the code is presented to you and at that stage the script tags < s c r i p t > < / s c r i p t > is indeed included.

But when you hit the button “save webform” the code is again presented. But this time the script tags are indeed missing.

Bug maybe? :thinking:

Kind regards
PowerQuest.

Yes, :bug:

Please open an issue with this on GitHub, if you can’t find it already there.

There are known issues with over-zealous string-cleanups messing up SuiteCRM, this is surely another instance of it.

Ok, thanks pgr I’ll see what I can do.

Is there a link to bug reports in Github that you might have laying around on your pc that you could share please?

Kind regards
PowerQuest

No, I don’t keep any separate list. There’s too many of them (>1000 open…) and it’s too dynamic. Normally it’s easy to get around by searching.

1 Like