Editing Form label / Input Positions

Hi all!

I am just wondering how best to make a form - generated via Campaign Monitor - Display certain label and input fields side-by-side rather than directly underneath each other!

A novice / self thought developer here so be gentle with me! :D

Thanks in advance!

Niall

roshodgekiss roshodgekiss, 5 years ago

Hi Nialln, in order to do this, you will need to get the generated form code and use either HTML tables, or CSS to format it nicely in this way. Usually I prefer to take the CSS route (outside of email design, I'm a bit of a table snob) , so I've borrowed a bit of code from the Woork blog to put together a pretty form example for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pretty form example</title>
<style type="text/css">
body {
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
}
p, h1, form, button {
    border:0;
    margin:0;
    padding:0;
}
.spacer {
    clear:both;
    height:1px;
}
/* ----------- My Form ----------- */
.myform {
    margin:0 auto;
    width:400px;
    padding:14px;
}
/* ----------- stylized ----------- */
#stylized {
    border:solid 2px #b7ddf2;
    background:#ebf4fb;
}
#stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
}
#stylized p {
    font-size:11px;
    color:#666666;
    margin-bottom:20px;
    border-bottom:solid 1px #b7ddf2;
    padding-bottom:10px;
}
#stylized label {
    display:block;
    font-weight:bold;
    text-align:right;
    width:140px;
    float:left;
}
#stylized .small {
    color:#666666;
    display:block;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:140px;
}
#stylized input {
    float:left;
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:200px;
    margin:2px 0 20px 10px;
}
#stylized button {
    clear:both;
    margin-left:150px;
    width:125px;
    height:31px;
    background:#666666 url(img/button.png) no-repeat;
    text-align:center;
    line-height:31px;
    color:#FFFFFF;
    font-size:11px;
    font-weight:bold;
}
</style>
</head>
<body>

<div id="stylized" class="myform">
  <form action="http://yoururl.createsend.com" method="post" id="subForm">
    <h1>Sign-up form</h1>
    <p>This is a basic form without tables</p>
    <label>Name <span class="small">Add your name</span> </label>
    <input type="text" name="cm-name" id="name" />
    <label>Email <span class="small">Add a valid address</span> </label>
    <input type="text" name="cm-xxxxx" id="yyyyy-zzzzz" />
    <button type="submit">Sign-up</button>
    <div class="spacer"></div>
  </form>
</div>
</body>
</html>

Simply replace the yoururl.createsend.com, cm-xxxxx and yyyyy-zzzzz with the values in your own generated subscribe form code and you should be cool to go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098