Need CSS for email form on home page.

WordPress theme dedicated to start-up websites with amazing CSS3 animated icons, price tables and parallax effect background.
GK User
Fri Jul 04, 2014 1:22 pm
Hi,

I added a simple constant contact widget/plugin to the home page (just above your demo one). I added: class="gk-form" in widget rules section but my field still does not display like yours. I would the "enter email" field to be as wide as yours and the font to be italic. Any help here?

reference: http://www.unexplainedinfertilityinfo.com

screen shot: http://screencast.com/t/nxRYtW8GBVOS


here is the format code in the plugin's php function file:

Code: Select all
function sf_constantcontact_form($id,$p) {
   return '<form id="'.$id.'_form" onsubmit="return '.$id.'_submit(this);" class="constantcontactwidget_form">'
      .(empty($p['txt'])?'':('<p>'.$p['txt'].'</p>'))
      .'<input type="hidden" name="grp" value="'.esc_attr($p['grp']).'" />'
      .(empty($p['nam'])
         ?('<input type="text" name="eml" class="input" placeholder="'.__('Email Address...').'"/>')
         :('<p><label for="fnm">'.__('First Name').'</label><input type="text" name="fnm" class="input"/></p>'
         .'<p><label for="lnm">'.__('Last Name').'</label><input type="text" name="lnm" class="input"/></p>'
         .'<p><label for="eml">'.__('Email').'</label><input type="text" name="eml" class="input"/></p>'))
      .'<input type="submit" value="'.esc_attr($p['btn']).'" />'
      .'</form>'
      .'<script>function '.$id.'_submit(n){'
         .'for(var a=n.querySelectorAll("input"),i=0,eml=false,val=["action=constantcontactadd"];i<a.length;i++)if(a[i].name){if(!(a[i].name!="eml"||!a[i].value)) eml=true;val.push(a[i].name+"="+encodeURIComponent(a[i].value));}'
         .'if(!eml){alert("'.__('Please enter an email address').'");return false;}'
         .'var xml=new XMLHttpRequest();'
         .'xml.open("POST","'.admin_url('admin-ajax.php').'",true);'
         .'xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");'
         .'xml.onreadystatechange=function(){if(this.readyState==4){if(this.status==200){if(this.responseText) alert(this.responseText); else '.(preg_match('/^\/\/|^http:\/\/|^https:\/\//i',$p['msg'])?('setTimeout(\'window.location="'.esc_attr($p['msg']).'";\',100);'):('n.innerHTML="'.addslashes($p['msg']).'";')).'} else alert(this.statusText);}};'
         .'xml.send(val.join(String.fromCharCode(38)));'
         .'return false;'
      .'}</script>';
}
User avatar
Gold Boarder

GK User
Fri Jul 04, 2014 1:36 pm
Add this code:
Code: Select all
.constantcontactwidget_form input[type="text"] {
   -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: none!important;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #999;
display: inline-block;
font-size: 20px;
font-style: italic;
font-weight: 300;
height: 68px;
margin: 0!important;
padding: 0 30px;
position: relative;
top: -3px;
width: 456px;
}
User avatar
Moderator

GK User
Fri Jul 04, 2014 1:43 pm
very nice. thanks!!!
User avatar
Gold Boarder


cron