5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Struggling to create custom form fields. :(

by Robert M Gouge
4 replies
  • WEB DESIGN
    • |
I'm trying to incorporate a custom submit box for my footer optin form on my site. However, being the non-techy guy that I am, I'm struggling to get it to layout correctly.

Prosperity – A word of special meaning for Internet Entrepreneurs | Prosperity Clicks

This is a test post in which you can see the footer opt-in. It fades in at the bottom of the text area after about 3 seconds.

The part below the optin form test text is the form I'm trying to create (2 field form with graphical submit button). I've put a blank form field area in there to show the layout I'm trying to achieve (however, I can't get the cells to space for some reason). But, once I start adding in all the <form> stuff from my auto-responder code snippet, the layout gets even more messed up than it is.

So, can anyone help me create the vertical form field with the submit graphic using auto-responder code?

Code:
<style>
.link,
.link a,
.signupframe
{
    color: #226699;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    .link,
    .link a {
        text-decoration: none;
        }
    .signupframe {
        border: 1px solid #000000;
        background: #ffffff;
        }
.signupframe .required {
    font-size: 10px;
    }
</style>
<form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup12837" accept-charset="UTF-8" onsubmit="return verifyRequired12837();" >
<input type="hidden" name="redirect" value="http://www.prosperityclicks.com/subscribe-success/">
<input type="hidden" name="errorredirect" value="http://www.prosperityclicks.com/subscribe-error/">

<div id="SignUp">
<table width="260" class="signupframe" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td valign="top" align="right">
         First Name
      </td>
      <td align="left">
        <input type="text" name="fields_fname">
      </td>
    </tr>
    <tr>
      <td valign="top" align="right">
        <span class="required">*</span> Email
      </td>
      <td align="left">
        <input type="text" name="fields_email">
      </td>
    </tr>
    <input type="hidden" name="listid" value="0">
    <input type="hidden" name="specialid:0" value="XG6W">

    <input type="hidden" name="clientid" value="0">
    <input type="hidden" name="formid" value="12837">
    <input type="hidden" name="reallistid" value="1">
    <input type="hidden" name="doubleopt" value="1">
    <tr>
      <td> </td>
      <td><span class="required">*</span> = Required Field</td>
    </tr>
    <tr>
      <td> </td>
      <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
    </table>
</div>
</form>
<script type="text/javascript">

var icpForm12837 = document.getElementById('icpsignup12837');

if (document.location.protocol === "https:")

    icpForm12837.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired12837() {
  if (icpForm12837["fields_email"].value == "") {
    icpForm12837["fields_email"].focus();
    alert("The Email field is required.");
    return false;
  }


return true;
}
</script>
<span class="link"><a href="http://www.icontact.com">Email Marketing</a> You Can Trust</span>
Many, many thanks if anyone can help a coding newbie here.
#create #custom #fields #form #struggling
  • Profile picture of the author jlandells
    Hi Robert,

    I can't help you directly, but noticed something interesting that may help...

    The page currently displays perfectly in Firefox, is messed up in Chrome, and never appears in Internet Explorer! You'll need to check out your CSS and any Javascript that you're using to make sure it's 100% cross-browser friendly.

    Hope that helps!

    -John.
    Signature
    {{ DiscussionBoard.errors[6540986].message }}
    • Profile picture of the author JezWebb
      I hope this will put you on the right lines

      Code:
      <style>
.link,
.link a,
.signupframe
{
    color: #226699;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    .link,
    .link a {
        text-decoration: none;
        }
    .signupframe {
        border: 1px solid #000000;
        background: #ffffff;
        }
.signupframe .required {
    font-size: 10px;
    }
</style>
<form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup12837" accept-charset="UTF-8" onsubmit="return verifyRequired12837();" >
<input type="hidden" name="redirect" value="http://www.prosperityclicks.com/subscribe-success/">
<input type="hidden" name="errorredirect" value="http://www.prosperityclicks.com/subscribe-error/">

<div id="SignUp">
  <table width="470" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="167"><input type="text" name="fields_fname" /></td>
    <td width="303" rowspan="2"><input type="image" name="Submit" value="Submit" src="http://prosperityclicks.com/wp-content/uploads/2012/07/instantaccess.png"  alt="submit"></td>
  </tr>
  <tr>
    <td><input type="text" name="fields_email" /></td>
    </tr>
</table>
</div>
</form>
<script type="text/javascript">

var icpForm12837 = document.getElementById('icpsignup12837');

if (document.location.protocol === "https:")

    icpForm12837.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired12837() {
  if (icpForm12837["fields_email"].value == "") {
    icpForm12837["fields_email"].focus();
    alert("The Email field is required.");
    return false;
  }


return true;
}
</script>
      Signature

      Web strategist and adventurer. Director of Search Engine Friendly Hosting. ---Fast, affordable, feature packed hosting from £1.97. --- Search Engine Friendly Web Hosting

      [VIDEO] How to set up a WordPress blog in under 10 minutes.

      {{ DiscussionBoard.errors[6542014].message }}
      • Profile picture of the author Robert M Gouge
        Originally Posted by JezWebb View Post

        I hope this will put you on the right lines

        Code:
        <style>
.link,
.link a,
.signupframe
{
    color: #226699;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    .link,
    .link a {
        text-decoration: none;
        }
    .signupframe {
        border: 1px solid #000000;
        background: #ffffff;
        }
.signupframe .required {
    font-size: 10px;
    }
</style>
<form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup12837" accept-charset="UTF-8" onsubmit="return verifyRequired12837();" >
<input type="hidden" name="redirect" value="http://www.prosperityclicks.com/subscribe-success/">
<input type="hidden" name="errorredirect" value="http://www.prosperityclicks.com/subscribe-error/">

<div id="SignUp">
  <table width="470" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="167"><input type="text" name="fields_fname" /></td>
    <td width="303" rowspan="2"><input type="image" name="Submit" value="Submit" src="http://prosperityclicks.com/wp-content/uploads/2012/07/instantaccess.png"  alt="submit"></td>
  </tr>
  <tr>
    <td><input type="text" name="fields_email" /></td>
    </tr>
</table>
</div>
</form>
<script type="text/javascript">

var icpForm12837 = document.getElementById('icpsignup12837');

if (document.location.protocol === "https:")

    icpForm12837.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired12837() {
  if (icpForm12837["fields_email"].value == "") {
    icpForm12837["fields_email"].focus();
    alert("The Email field is required.");
    return false;
  }


return true;
}
</script>
        Thanks for this.

        I can get the form to look correct in my html composer, but once I add it to OptinSkin, layout goes right back to being messed up. Ugh. Any ideas?
        {{ DiscussionBoard.errors[6550010].message }}
  • Profile picture of the author lsargent
    If you are trying to create vertical space in between your input fields, increase the "cellspacing". Right now it's a 0 which is why there's no space.
    {{ DiscussionBoard.errors[6542818].message }}

Trending Topics