Using custom form HTML in V4

I am in the process of upgrading my Joomla 1.5 site to a Joomla 2.5 site and have installed the new V4 version of Chronoforms. I have published the module and used the menu assignment to select the correct menu items that will use the Chronoforms form and published the plugin and used the {chronoforms}&{/chronoforms} tags with my form name in the article.

In the Joomla 1.5 site I was using a much older version of Chronoforms. I used custom HTML code (not the wizard) to create the form in order to create the look that the client desired. In the older version where I added the custom code there were a slew of tabs available for General, Email Setup, Email Templates, Form code, Validation, Anti Spam etc setup.

In the V4 version I took my custom code (without the form tags as it was used in the older version) from the older site and added it in the code area of the new V4 but I am at a loss as to how to assign the other functionality as I only see the JS Validation, Admin actions and Data View tabs. I see that the wizard has the other tags I was used to seeing in the older version but I'm not using the wizard. I also tried using my custom HTML with the Form Type set to "Wizard" instead of "Custom" and adding captcha etc through the wizard edit, but even there the "test form" option shows nothing and nothing shows up on the article page.

I'm at a loss making my way around the new V4 version to create a working form using my custom HTML code.

I need help!
thanks,
Adriana

Hi Adriana,

There are three ways to copy over your existing HTML.

[list=a]

The tough one is to re-create the Form HTML using the ChronoForms v4 Wizard. If the form is simple this is the method I recommend as it will create a form that is fully compatible with CFV4.

You can do as you have done and paste the Form HTML into the Form 'Code' tab. Once you've done this set the Form Type to 'Custom' to block the HTML Wizard; give the form a name then Save and Close the form to go back to the Forms Manager. Click the 'Wizard Edit' link then the 'Events' tab on the right to add Actions to your form Events. You will need at least a Show HTML action in the On Load event to display the form.

As a hybrid method which I prefer you can Click the Form Wizard link under the Forms Manager Header to create a new form with the Wizard. Click the 'Advnaced Elements' link at the left and drag a Custom Element into the Preview box. Click the spanner icon to open it and paste your Form HTML here - except for the Captcha and submit buttons. Save and close the element, click the Basic Elements list and drag a Captcha Input and a Submit Button into the Preview box. Click the Events tab and drag a Show HTML action into the On Load event. Click the Form Settings tab to give your form a name. Save and click the Test Form icon to see the form.

[/list:o]

The hybrid method means that you can work entirely in the Wizard and you can easily use he CFv4 Captcha - you can also add validation by adding classes to the HTML.

Bob

There are a series of videos here that will help you get started with CFv4.

Thanks Bob,
I'm going to give the hybrid option a try.

If I run into more questions, I'll be back🙂

Adriana

Hi again Bob,
I used the hybrid option you suggested and my form is showing now on my page.
I'm having an issue in getting the email to send the entered form results.
When I used the Template tab's Generate Auto Template it only displayed the Captcha code which is the only thing I have in the Preview tab other than Submit. So I tried the Add/Remove editor and added my own template table.

<table style="font-family: Arial,Helvetica,sans-serif; width: 485px;" border="0" cellspacing="1" cellpadding="2">
<tbody>
<tr>
<td class="bodytext" style="font-weight: bold;" colspan="2">
<blockquote>{SalesCall} Sales Call Request<br /> {eCOIN} Ecommerce Information<br /> {ISO} Send ISO certificate.</blockquote>
</td>
</tr>
<tr>
<td class="bodytext" align="right" width="240">Name:</td>
<td width="250">{name}</td>
</tr>
<tr>
<td class="bodytext" align="right" width="240">Title:</td>
<td width="250">{title}</td>
</tr>
<tr>
<td class="bodytext" align="right" width="240">Company:</td>
<td width="250">{company}</td>
</tr>
<tr>

I used {} brackets to be used by the dynamic email information.
Then I put my test email "To" and the email subject as static items and the rest of the email content using the dynamic tab.

I wasn't getting any email so I added the debugger and it gives the static info but doesn't create the dynamic information. Basically it shows the table I created with the code above with its curly brackets. I'm sure I'm missing something but need help in determining what it is.

Thanks,
Adriana

Hi Adriana,

Can you paste the Form HTML here please. From your description I'm guessing that your input tags don't have the type='text' attribute set - ChronoForms uses that to identify the inputs.

Bob

Hi Bob,

Here is my custom code that I copied from my older version of Chronoforms:

<table width="485" border="0" cellpadding="2" cellspacing="1" style="font-family:Arial, Helvetica, sans-serif">
<tr><td colspan="2" class="bodytext" style="font-weight:bold">
			<blockquote>
				<input type="checkbox" name="SalesCall" value="YES" /> 
				Sales Call Request<br />
				<input type="checkbox" name="eCOIN" value="YES" /> 
				Ecommerce Information<br />
				<input type="checkbox" name="ISO" value="YES" /> Send ISO certificate or <a href="images/stories/PDFs/isocert.pdf" target="_blank">download</a>
			</blockquote>
</td></tr>
  <tr>
    <td align="right" width="240" class="bodytext">Name:</td>
    <td width="250"><input name="name" type="text" id="name" tabindex="1" style="width:250px;" title="required field" /></td>
	</tr>
	<tr>
    <td align="right" width="240" class="bodytext">Title:</td>
    <td width="250"><input name="title" type="text" id="title" tabindex="2" style="width:250px;" /></td>
  </tr>
	<tr>
    <td align="right" width="240" class="bodytext">Company:</td>
    <td width="250"><input name="company" type="text" id="company" tabindex="3" style="width:250px;" title="required field" /></td>
  </tr>
  <tr>
    <td align="right" width="240" class="bodytext">Address:</td>
    <td width="250"><input name="address" type="text" id="address" tabindex="4" style="width:250px;" title="required field" /></td>
  </tr>
  <tr>
    <td align="right" width="240" class="bodytext">City:</td>
    <td width="250"><input name="city" type="text" id="city" tabindex="5" style="width:250px;" title="required field" /></td>
  </tr>
  <tr>
    <td align="right" width="240" class="bodytext">State/Province:</td>
    <td width="250"><input name="state" type="text" id="state" tabindex="6" style="width:250px;" title="required field" /></td>
	</tr>
	<tr>
    <td align="right" width="240" class="bodytext">Zip/Postal Code:</td>
    <td width="250"><input name="zip" type="text" id="zip" tabindex="7" style="width:250px;" title="required field" /></td>
  </tr>
	<tr>
    <td align="right" width="240" class="bodytext">Country:</td>
    <td width="250"><input name="country" type="text" id="country" tabindex="8" style="width:250px;" title="required field" /></td>
  </tr>
  <tr>
    <td align="right" width="240" class="bodytext">Phone:</td>
    <td width="250"><input name="phone" type="text" id="phone" tabindex="9" style="width:250px;" title="required field" /></td>
	</tr>
	<tr>
    <td align="right" width="240" class="bodytext">Fax:</td>
    <td width="250"><input name="fax" type="text" id="fax" tabindex="10" style="width:250px;" /></td>
  </tr>
  <tr>
    <td align="right" width="240" class="bodytext">Email:</td>
    <td width="250"><input name="email" type="text" id="email" tabindex="11" style="width:250px;" title="required field" /></td>
  </tr>
	<tr>
    <td align="right" width="240" class="bodytext">Web Site:</td>
    <td width="250"><input name="website" type="text" id="website" tabindex="12" style="width:250px;" /></td>
  </tr>
  <tr>
  	<td colspan="2"> </td>
  </tr>
  <tr>
  	<td colspan="2"><strong><em>Comments:</em></strong></td>
  </tr>
  <tr>
    <td align="right" width="240" class="bodytext" valign="top" style="font-size:12px; line-height:14px"> </td>
    <td valign="top" width="500"><textarea name="comments" id="comments" cols="100" rows="5" style="width:250px;"  tabindex="13"></textarea></td>
  </tr> 
   <!-- commented out <tr>
     <td colspan="2" align="center" valign="middle" class="bodytext" style="font-weight:bold">Please type what you see in the box below</td>
  </tr>
        <td colspan="2" align="center" valign="middle" class="bodytext">{Recaptcha}</td>
 </tr>
<tr>
        <td align="center" valign="middle" class="bodytext" colspan="2"><input type="submit" name="submit" value="Submit" />  <input type="submit" name="submit" value="Reset" /></td>
 </tr> -->

</table>

    
    </td>      
      
 </tr>
</table>

Adriana

Hi Adriana,

This works OK here: [list=a]I created a new form with the Form Wizard

Dragged a new Custom Element from the Advanced Group, opened it and pasted in the HTML from your post.

Dragged in a Submit Button element from the Basic Group (I skipped the Captcha).

On the Events tab I dragged in a Show HTML action to the On Load event.

[*]I dragged an Email and a Debugger action into the On Submit event.
[*}Gave the form a name and saved it.[/*]

Opened up the Email action and clicked the Auto Generate template button, added the required static entries.

Saved and submitted the form.

[/list:o]
Here's the debug output with values shown.

Bob

Hi Bob,
I am now getting the info showing in the debugging output, but I still must have something wrong in my set up because I'm not receiving the emailed results. I'm attaching some screen images of my setup. Maybe you can see where i have things wrong.

PREVIEW:


EVENT:


EMAIL SETTINGS:
http://centralsteel.libertycreativesolutions.info/J253site/chronoimages/email1.jpg

http://centralsteel.libertycreativesolutions.info/J253site/chronoimages/email2.jpg

http://centralsteel.libertycreativesolutions.info/J253site/chronoimages/email3.jpg

http://centralsteel.libertycreativesolutions.info/J253site/chronoimages/email4.jpg

Thanks,
Adriana

Hi Adriana,

Please check the following:

a) The From Email address should match the Domain name.

b) The To email address should not be the same as the From Email address. Gmail in particular can't see the point of emailing yourself.

c) Also remove the settings on the Dynamic Tab until you have the Emails working. You don't need both From & Reply to if the values are the same.

Bob

Hi Bob,

I made your changes. I still am not receiving the email for some reason. I even changed my to email to my yahoo email account. I must still have some setting messed up or some step missed or I'm not grasping the process correctly. This new version is different than the old chronoforms version used on the live site. Definitely more robust in features which I like but I feel like I'm stumbling around at the momment. I want to figure it out with this site. I have a number of sites in the near future that will be using Chronoforms and many of our clients with older Joomla sites with the older version in use will be migrating their sites to Joomla 2.5.

Another question besides the email issue -
What do I need to put in the "Fail" area of the Captcha?

Thank you for the help so far. Its is much appreciated.
Adriana

Hi Adriana,

There are a series of videos here that will help you get started with CFv4. Check the Captcha one for the On Fail setting.

By all means email or PM me the site URL and a SuperAdmin login and I'll take a quick look at the emails.

Bob

Hi Bob,

As a hybrid method which I prefer you can Click the Form Wizard link under the Forms Manager Header to create a new form with the Wizard. Click the 'Advnaced Elements' link at the left and drag a Custom Element into the Preview box. Click the spanner icon to open it and paste your Form HTML here - except for the Captcha and submit buttons. Save and close the element, click the Basic Elements list and drag a Captcha Input and a Submit Button into the Preview box. Click the Events tab and drag a Show HTML action into the On Load event. Click the Form Settings tab to give your form a name. Save and click the Test Form icon to see the form.

The hybrid method means that you can work entirely in the Wizard and you can easily use he CFv4 Captcha - you can also add validation by adding classes to the HTML.

If i follow the above hybrid method then how could i validate my input field.
you told that u can add validation by adding classes to the HTML.but i don't know how could add the validation for my input field,please advice me.I need your help to short out the problem.

and is possible to add onblur,onclick and onsubmit event if i follow to create the form using the wizard. Thanks in advance.

Hi Bob,
Also when i submit the form it show success message but the form display three time.I have attached the screenshot here,please advice.

Hi anithavijayan ,

I have no idea why your form shows three times and it isn't possible to tell from the image.

You can see the validation classes by creating a test from with the wizard, checking the validation boxes and looking at the Form HTML. They are like validate['required'] or validate['email'] or validate['required','email']

Bob

Hi Bob,
Did you get my PM?

Adriana

Hi Adriana,

As you'll see I made some changes to your form but so far as I can see it still isn't sending :-(

At this point I suspect that the site isn't sending mails, or that the mailserver is marking them as spam and dropping them.

Bob

Hi Bob,
Still trying to get my form to email. (On another site for another client I got a ChronoformV4 form to email. Initially that email was going into the Junk E-mail and needed to be white listed. But this one is not going into any spam or junk email folder)

This is the debugging I get:

Data Array:

Array
(
[option] => com_content
[view] => article
[id] => 50
[Itemid] => 112
[chronoform] => CSW_Contact
[event] => submit
[eCOIN] => YES
[name] => Joe Test
[title] => Form Tester
[company] => ABC Testing
[address] => 123 Main Street
[city] => Testville
[state] => IL
[zip] => 60477
[country] => USA
[phone] => 123-456-7890
[fax] =>
[email] =>
[email]joetest@someemail.com[/email]
[website] => website
[comments] => test
[chrono_verification] => rKG83
[input_submit_1] => Submit
[854b9f1b2e37f8bb7e0a18c0941c4313] => 1
)

Validation Errors:

Array
(
)

Thank you for contacting Central Steel & Wire. We will be in touch.
Debug Data

Core Captcha
Passed the core captcha check!
email
22
Result An email has been SENT successfully from (CSW Website) [email]ContactForm@centralsteel.com[/email] to [email]adriana@libertycreativesolutions.com[/email]
Body

{SalesCall} Sales Call Request
YES Ecommerce Information
{ISO} Send ISO certificate or download

Name: Joe Test
Title: Form Tester
Company: ABC Testing
Address: 123 Main Street
City: Testville
State/Province: IL
Zip/Postal Code: 60477
Country: USA
Phone: 123-456-7890
Fax:
Email: [email]joetest@someemail.com[/email]
Web Site: website

Comments:
test
Enter the code rKG83

Submitted by 63.250.226.16
Attachments array ( )

Do you know what this part means?:

Validation Errors:

Array
(
)

It says Validation Error but I'm not sure what the empty array means or refers to.

thanks Adriana

I have checked my error logs in command line and also maillogs. It's not indicating the email even reaches the mail server.

The structure of this site is that it resides within a directory of a Joomla 1.5 backup site I created:
Backup Joomla 1.5 site url: centralsteel.libertycreativesolutions.info
Joomla 2.5 site url: centralsteel.libertycreativesolutions.info/J253.
(libertycreativesolutions.info is a subdomain of the live site - centralsteel.com.)

The Joomla 1.5 backup site has the old Chronoforms version and I tested the form this morning and it sent the email just fine.

Our IT guy said the domain name to use for the emails would be centralsteel.com not libertycreativesolutions.info, so I changed that in the email setup but I am still not getting the email. What puzzles me is that the backup site's old version works in this subdomain, but the new version in the J253 directory does not. I'm guessing something in the email setup is still not correct though I need help to figure it out.

Adriana

Bob,

Maybe a solution is to have a form "action" that goes to a PHP script I create for processing and emailing the form data?

If I wanted give the the form an action of say "process.php" how would I go about doing that in this new version so that on submit, my process.php file would be used rather than any processing/email function of Chronoforms? My current custom html for the form does not have the "form" tags included. (I assumed this was the correct way since the earlier Chronoform version always had me remove them). I would need to know where to enter my path to the process.php file.

Thanks,
Adriana

Hi Adriana,

Basic question. Does the Joomla! site send email at all. For example for a user registration or from an Email a Friend link in an article.

The Joomla! mailer is usually very reliable so I still suspect a setup problem.

Bob

The validation errors array is an empty array where any validations errors would show in the debug.

I'll try the email to friend link test. Thanks for the suggestion.

For a test I "showed" the email icon on one of the articles. I clicked it and filled in the "Email To" "Sender" "Your Email" and "Subject" fields and clicked on the "Send" button. I did get the email (however the email didn't have a link to the article in it for some odd reason).

Adriana

Hi Adriana,

You could try a test using my Email [GH] action - simply because there is an error-reporting bug in the standard action and mine might give you a more useful error.

Bob

Hi Bob,

After fighting to figure this out and having tried Joomla forum suggestions that all failed (and a number of people were having issues with the core Joomla emailing) I updated my site from the Joomla 2.5.3 to the most current Joomla 2.5.4 and viola! the emails are now working just as they should. So I think the problem was never with Chronoforms but with the version of Joomla. Thank you for all your help. I do appreciate how quickly you stay on top of this forum. If you encounter this issue with any other users, suggest they upgrade to Joomla 2.5.4. Off to write you a good review on the extensions list.

Adriana

Darn. I can only review the extension once and I already did back when I was using the older version.
Oh well. I still think it's great and will continue to recommend it for future sites.

Adriana

Hi Adriana,

Thanks for letting us know that it's fixed, and thanks for trying write the review.

Bob