1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Other Completion of a custom lead capture form

Discussion in 'Custom Service/Development Requests' started by william1872, Feb 4, 2014.

  1. william1872

    william1872 Member

    I've had a custom lead capture for designed for appending to the bottom of new and existing threads, to capture email addresses of visitors to the site.

    The PSD has been sliced and coded however when the developer went to install the code into the ad_message_body template we discovered a problem on submission of the form.

    It produced a security error and after putting the following post out in the community yesterday we discovered that posts are effectively forms and you can't nest a form, within a form.

    The solution one of the staff gave was to use iframe or custom javascript.

    Here's the thread I put out for reference, there's a screenshot of the lead capture form on the thread below.


    The custom code developed for the form that's in the above template.

    <xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 0 AND !{$message.conversation_id} AND {$forum.node_id} != 4 AND {$forum.node_id} != 6 AND {$forum.node_id} != 12">
    <!doctype html>
        <script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=675716&mg_param1=1&u=Bt1t"></script>
    <meta charset="utf-8">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    @charset "utf-8";
    /* CSS Document */
    @font-face {
        font-family: 'MyriadProRegular';
        src: url('styles/uix/uix/fonts/myriadpro-regular.eot');
        src: url('styles/uix/uix/fonts/myriadpro-regular.eot') format('embedded-opentype'),
             url('styles/uix/uix/fonts/myriadpro-regular.woff') format('woff'),
             url('styles/uix/uix/fonts/myriadpro-regular.ttf') format('truetype'),
             url('styles/uix/uix/fonts/myriadpro-regular.svg#MyriadProRegular') format('svg');
    @font-face {
        font-family: 'MyriadProBold';
        src: url('styles/uix/uix/fonts/myriadpro-bold_1.eot');
        src: url('styles/uix/uix/fonts/myriadpro-bold_1.eot') format('embedded-opentype'),
             url('styles/uix/uix/fonts/myriadpro-bold_1.woff') format('woff'),
             url('styles/uix/uix/fonts/myriadpro-bold_1.ttf') format('truetype'),
             url('styles/uix/uix/fonts/myriadpro-bold_1.svg#MyriadProBold') format('svg');
    body {
        margin: 0;
        padding: 0;
    * h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, form, input, p, ul, li {
        margin: 0;
        padding: 0;
    a {
        text-decoration: none;
    a img {
        border: 0;
    img {
        border: none;
    #main {
    #wrapper {
         -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-attachment: scroll;
        background-clip: border-box;
        background-color: #D7EDFC;
        background-image: url("http://www.jvfocus.com/styles/uix/uix/images/top_bg.jpg");
        background-origin: padding-box;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: auto auto;
        border-bottom-color: #CEE1EE;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-image-outset: 0 0 0 0;
        border-image-repeat: stretch stretch;
        border-image-slice: 100% 100% 100% 100%;
        border-image-source: none;
        border-image-width: 1 1 1 1;
        border-left-color-ltr-source: physical;
        border-left-color-rtl-source: physical;
        border-left-color-value: #CEE1EE;
        border-left-style-ltr-source: physical;
        border-left-style-rtl-source: physical;
        border-left-style-value: solid;
        border-left-width-ltr-source: physical;
        border-left-width-rtl-source: physical;
        border-left-width-value: 1px;
        border-right-color-ltr-source: physical;
        border-right-color-rtl-source: physical;
        border-right-color-value: #CEE1EE;
        border-right-style-ltr-source: physical;
        border-right-style-rtl-source: physical;
        border-right-style-value: solid;
        border-right-width-ltr-source: physical;
        border-right-width-rtl-source: physical;
        border-right-width-value: 1px;
        border-top-color: #CEE1EE;
        border-top-style: solid;
        border-top-width: 1px;
        float: left;
        height: 437px;
        margin-bottom: 80px;
        margin-top: 25px;
        width: 459px;
    .header h1{
    .header h2{
        font-family: 'MyriadProRegular';
    .header h2 font{
        font-family: 'MyriadProBold';
    .header h2 span{
        font-family: 'MyriadProBold';
    .header h2 span img{
        margin:-35px 0 0 10px;
    .header input{
        margin:4px 0 0 11px;
        padding:0px 10px 0px 10px;
        background:url(http://www.jvfocus.com/styles/uix/uix/images/input.png) no-repeat;
        background: url(http://www.jvfocus.com/styles/uix/uix/images/yes_img.png) no-repeat !important;
        color: transparent !important;
        margin-left: 11px !important;
        width: 435px !important;
        height: 64px !important;
    .Tinhte_XenTag_WidgetRenderer_Cloud h3 { display: block !important }
    <div id="main">
    <div id="wrapper">
    <div class="header">
        <h1><img src="http://www.jvfocus.com/styles/uix/uix/images/build_txt.png" alt=""/></h1>
        <h2> You'll get powerful, business building Case Studies, <br> How-Tos... and <font> even Insider Secrets </font> <br> to help you succeed online -
    <span> absolutely FREE! <img src="http://www.jvfocus.com/styles/uix/uix/images/arrow_img.png" alt=""/> </span> </h2>
      <form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html?u=Bt1t"
        <input class="wf-input wf-req wf-valid__email" type="text" placeholder="Email Address">
    <input class="submit" type="submit" />
         <input type="hidden" name="webform_id" value="675716" />
    I've attached a screenshot of the lead capture form and I'm looking for a developer who can iframe or create a javascript?

    It's critical the custom form design and copy is used, if this is something you can do please drop me a private message with a quote?

    lead capture nathan 2.jpg


  2. Aayush

    Aayush Well-Known Member

    For fixing the security error, ask the developer to include a csrf token as input in the form.
    Xenforo considers it as security threat in case the submitted forum does not contain this token. it is used to prevent cross site scripting attacks.
  3. Aayush

    Aayush Well-Known Member

    <form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html?u=Bt1t"
    <input class="wf-input wf-req wf-valid__email" type="text" placeholder="Email Address">
    <input class="submit" type="submit" />
    <input type="hidden" name="webform_id" value="675716" />
    <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
    Update the form with the above code, that token prevents xenforo from giving that security message.
    JordanH likes this.
  4. william1872

    william1872 Member

    Hi Aayush,

    Thanks for adding the token code to the form :)

    That does fix the security error however there seems to be another issue now.

    The form should redirect

    However it's redirecting to

    The original developer is no longer on this project, any advice appreciated?
  5. Aayush

    Aayush Well-Known Member

    You should check the file which the form is submitting to :
    I am not sure what the app.getresponse.com page does but the redirection should be edited from that HTML page.
  6. william1872

    william1872 Member

    GetResponse is a third party email autoresponder, where they host your email marketing lists...The file on their server isn't available for me to edit.

    If anyone would like to pick this up as a development task please message me with a cost? I'm not a developer at all.
  7. russoroni

    russoroni Active Member

    I'm pretty much having this exact same problem
  8. russoroni

    russoroni Active Member

    Hello @Aayush could you possibly take a look at my code and tell me how I can add the token?

    <xen:hook name="ad_message_below" />
    <xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 0 AND !{$message.conversation_id} AND {$forum.node_id} != 12 AND {$forum.node_id} != 6 AND {$forum.node_id} != 4 AND {$forum.node_id} != 5 AND {$forum.node_id} != 39 AND {$forum.node_id} != 13 AND {$forum.node_id} != 36 AND {$forum.node_id} != 37 AND {$forum.node_id} != 14">
    <center><form method="post" action="http://www.mytopo.com/search.cfm?pid=trailpeople?u=Bt1t">
    <table border="0" cellpadding="1" cellspacing="0" bgcolor="#ffffff"><TR><TD>
    <table border="0" cellpadding="2" cellspacing="0" align="center" bgcolor="#FFFFFF">
    <tr border="0">
    <td valign="top" align="center" bgcolor="#ffffff">
    <a href="http://www.mytopo.com/search.cfm?pid=trailpeople"><img src="styles/uix/xenforo/mytopobanner.gif" width="100%"></a>
    <td bgcolor="#FFFFFF" align="center" valign="middle"><font face="verdana,arial,helvetica" size="-2"><b>Search for&nbsp;</b></font>
    <input type="text" name="feature" width=15 size=15 value="Place">
    <font face="verdana,arial,helvetica" size="-1">
    in <select name="state">
    <option value="AL" selected>Alabama<option value="AZ">Arizona
    <option value="AR">Arkansas<option value="CA">California
    <option value="CO">Colorado<option value="CT">Connecticut
    <option value="DE">Delaware<option value="DC">District of Columbia
    <option value="FL">Florida<option value="GA">Georgia
    <option value="ID">Idaho<option value="IL">Illinois
    <option value="II">Indiana<option value="IA">Iowa
    <option value="KS">Kansas<option value="KY">Kentucky
    <option value="LA">Louisiana<option value="ME">Maine
    <option value="MD">Maryland<option value="MA">Massachusetts
    <option value="MI">Michigan<option value="MN">Minnesota
    <option value="MS">Mississippi<option value="MO">Missouri
    <option value="MT">Montana<option value="NE">Nebraska
    <option value="NV">Nevada<option value="NH">New Hampshire
    <option value="NJ">New Jersey<option value="NM">New Mexico
    <option value="NY">New York<option value="NC">North Carolina
    <option value="ND">North Dakota<option value="OH">Ohio
    <option value="OK">Oklahoma<option value="OE">Oregon
    <option value="PA">Pennsylvania<option value="RI">Rhode Island
    <option value="SC">South Carolina<option value="SD">South Dakota
    <option value="TN">Tennessee<option value="TX">Texas
    <option value="UT">Utah<option value="VT">Vermont
    <option value="VA">Virginia<option value="WA">Washington
    <option value="WV">West Virginia<option value="WI">Wisconsin
    <option value="WY">Wyoming</option>
    <input type="submit" border=0 value="Go!" name="Search">
    <xen:if is="{$forum.node_id} % {$xenOptions.messagesPerPage} == 6 AND !{$message.conversation_id}">
  9. Aayush

    Aayush Well-Known Member

    Add the following piece of code
    <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
    just before
  10. russoroni

    russoroni Active Member

    Ok done but still no good. It's no longer saying that theres a security error but I'm getting a 'page not found' and the url is /inline-mod/post/switch
  11. Aayush

    Aayush Well-Known Member

    That's because you can't have a form inside a form.
    You actually have an inline mod form already there, because of which it isn't working.

    You can try loading the second form from an iframe
  12. russoroni

    russoroni Active Member

Share This Page