Other Completion of a custom lead capture form

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.

http://xenforo.com/community/threads/appending-an-image-to-the-end-of-new-threads.66038/#post-712788

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

Code:
<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>
<html>
<head>
    <script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=675716&mg_param1=1&u=Bt1t"></script>

<meta charset="utf-8">
<title>index</title>
<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;
    outline:none;
}

a img {
    border: 0;
}

img {
    border: none;
}

#main {
    width:100%;
}

#wrapper {
    width:461px;
    margin:auto;
    margin-top:95px;
}

.header{
     -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{
    width:100%;
    float:left;
    margin-top:21px;
    text-align:center;
}

.header h2{
    width:95%;
    float:left;
    font-family: 'MyriadProRegular';
    font-size:18px;
    color:#000;
    text-align:center;
    font-weight:normal;
    margin-top:-25px;
}

.header h2 font{
    font-family: 'MyriadProBold';
    font-size:18px;
}

.header h2 span{
    font-family: 'MyriadProBold';
    font-size:18px;
    color:#b70000;
}

.header h2 span img{
    position:absolute;
    margin:-35px 0 0 10px;
}

.header input{
    width:416px;
    height:53px;
    float:left;
    border:none;
    font-family:arial;
    font-size:20px;
    color:#b9b9b9;
    text-align:center;
    margin:4px 0 0 11px;
    padding:0px 10px 0px 10px;
    background:url(http://www.jvfocus.com/styles/uix/uix/images/input.png) no-repeat;
}

.now{
    width:100%;
    float:left;
    margin-top:12px;
    text-align:center;
}


.submit
{
    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 }
</style>



</head>
<body>

<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"
    method="post">

    <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" />
    </form>
 


</div>
</div>
</div>

</body>
</html>

</xen:if>

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.webp

Thanks

William
 
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.
 
Code:
<form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html?u=Bt1t"
method="post">
<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}" />
</form>
Update the form with the above code, that token prevents xenforo from giving that security message.
 
Code:
<form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html?u=Bt1t"
method="post">
<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}" />
</form>
Update the form with the above code, that token prevents xenforo from giving that security message.

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

Code:
http://www.jvfocus.com/pages/confirm-subscription/

However it's redirecting to

Code:
http://www.jvfocus.com/inline-mod/post/switch

The original developer is no longer on this project, any advice appreciated?
 
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.
 
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.

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.
 
Hello @Aayush could you possibly take a look at my code and tell me how I can add the token?


Code:
<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">
<tr>
<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>
</tr>
<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>
</select>
</font>
<input type="submit" border=0 value="Go!" name="Search">
</td>

</table></td></tr></table>
</form></center>
</xen:if>




<xen:if is="{$forum.node_id} % {$xenOptions.messagesPerPage} == 6 AND !{$message.conversation_id}">
<center></center>
</xen:if>
<br>

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


Code:
<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">
<tr>
<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>
</tr>
<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>
</select>
</font>
<input type="submit" border=0 value="Go!" name="Search">
</td>

</table></td></tr></table>
</form></center>
</xen:if>




<xen:if is="{$forum.node_id} % {$xenOptions.messagesPerPage} == 6 AND !{$message.conversation_id}">
<center></center>
</xen:if>
<br>

Thanks

Add the following piece of code
Code:
<input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />

just before
Code:
</form>
 
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
 
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
 
Top Bottom