Javascript custom form

Hi,

For email marketing we use icontact - who give us the signup code which includes javascript and I have been unable to get this to work in chronoforms. They offer you two choices of code, the standard copy & paste and custom so you can change the layout (which I used).

What I'm wanting to do is place this signup form (which is email field only) in the top module here: <!-- w --><a class="postlink" href="http://www.travelcafe.co.nz">www.travelcafe.co.nz</a><!-- w --> where the member sign in currently is. I'd also like to be able to use a custom button if possible?

To give you an idea... this is the code I end up with (after changing layout)

<style>
.signupframe {
  border: 1px solid #FFFEFE;
  background: #ffffff;
  color: #226699;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
<form method=post action="http://app.icontact.com/icp/signup.php" name="icpsignup" accept-charset="UTF-8" onsubmit="return verifyRequired();" >
<input type=hidden name=redirect value="http://www.travelcafe.co.nz/index.php/Thanks.html" />
<input type=hidden name=errorredirect value="http://www.icontact.com/www/signup/error.html" />
<script language=javascript>
function verifyRequired() {
  if (document.icpsignup["fields_email"].value == ""«») {
    document.icpsignup["fields_email"].focus();
    alert("The Email field is required."«»);
    return false;
  }


return true;
}
</script>
<div id="SignUp">
<table width="480" class="signupframe" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td width="226" align=right valign=top>
        Breaking travel deals to your inbox </td>
      <td width="234" align=left>
        <input type=text name="fields_email">
        <input type="submit" name="Submit" value="Sign me up!" />      </td>
    </tr>
    <input type=hidden name="listid" value="2677">
    <input type=hidden name="specialid:2677" value="SWJE">

    <input type=hidden name=clientid value="113347">
    <input type=hidden name=formid value="613">
    <input type=hidden name=reallistid value="1">
    <input type=hidden name=doubleopt value="0">
    </table>
</div>
</form>

Thanks,
Laurel<br><br>Post edited by: admin, at: 2007/11/29 00:06

Hi Laurel,

So the problem is what exactly ? is that you can't get this code to work in a chronoforms page OR to place it in the top module position ? or something else ?

Cheers

Max

Hi Max,

I'm happy to try this - I think the problem is getting the iContact code into a module.

I need to do exactly this for my own site. Will try in the morning using the 'content module' extension.

Bob

Hi Max,

I can't get it to work in chronoforms. It goes into that module but there is some code on the first line that makes it drop to the next line where it can't be seen in that module. I moved it to a different module to test the form itself but nothing.

Laurel

Hi Laurel,

I've got the basics working OK. Not quite a pretty in the basic Joomla and I haven't tested the redirects.

I had to change the form name in the JavaScript from 'icpsignup' to the ChronoForms name, in my case 'ChronoContact_test_form_13'.

The JavaScript part of your code, without the script tags goes into the Form Code JavaScript box in ChronoForms. The remaining HTML - without the form tags goes into the HTML code box.

Put - onsubmit="return verifyRequired();" accept-charset="UTF-8" - into the Form Tag attachment box in the ChronoForms General tab.

Save the form, create a Content item containing just {chronocontact}text_form_13{/chronocontact}

Add the content item into the Content Item module and the form should work OK.

Here's my test showing the JavaScript error dialogue.



Bob<br><br>Post edited by: GreyHead, at: 2007/11/30 00:49

That seems to be working for me except I'm getting some extra text above it that I don't see in the html. I have put it here for now if you want to look http://www.travelcafe.co.nz/index.php/Travel-books-&-guides.html

Thanks

Laurel

I've since gone to look in icontact for the email address I entered but nothing :unsure:

Post edited by: artistjewel, at: 2007/11/30 03:45

Post edited by: artistjewel, at: 2007/11/30 04:22<br><br>Post edited by: artistjewel, at: 2007/11/30 10:55

Hi Laurel,

The odd characters look as though they are because you've left the <script> tags in your JavaScript. Here's the snippet from the page source:

<script type='text/javascript'>
150//<![CDATA[
151<script language=javascript>
152function verifyRequired() {
153 if (document.ChronoContact_scoop-top["fields_email"].value == ""«») {
154 document.ChronoContact_scoop-top["fields_email"].focus();
155 alert("The Email field is required."«»);
156 return false;
157 }
158
159
160return true;
161}
162</script>//]]>
163</script>

and I think that you probably need to put the iContact url in the Form URLs 'Submit URL' in the Forms.Manager (I haven't tested this bit yet on my site.)

Bob

Oh :blush:

That has fixed it and it's all tested and working great!

Thanks Bob