html Eargo Custom Form

Posted 2021-05-10

<style>
form.vertical-form input[type=text], form.vertical-form input[type=email]{
	border: 1px solid #8095a8;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 1rem;
    margin: 0.5rem 0;
    padding: 0.7rem 0.5rem;
    width: 100%;
}

form.vertical-form input[type=submit]{
	background-color: #ff5e2b;
    color: #ffffff;
    width: 100%;
    padding: 0.8rem 0;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: bolder;
    font-family: "neue-haas-grotesk-text-1","neue-haas-grotesk-text-2",sans-serif;
    border-radius: 3px;
    border: none;
    cursor: pointer;
}
</style>

<form class="vertical-form" action="https://cl.s6.exct.net/DEManager.aspx" name="subscribeForm" method="post">
        <input type="hidden" name="_clientID" value="6274903" />
        <input type="hidden" name="_deExternalKey" value="B316042A-3712-4C18-91E9-0AA252F9175E" />
        <input type="hidden" name="_action" value="add" />
        <input type="hidden" name="_returnXML" value="0" />
        <input type="hidden" name="_successURL" value="https://get.eargo.com/guide-download" />
        <input type="hidden" name="_errorURL" value="https://eargo.com" />	
        <input type="text" name="First_Name" placeholder="First Name"><br>       
        <input type="text" name="EmailAddress" placeholder="Email"><br>
        <br /><input type="submit" value="SEND ME MY GUIDE">
</form>

<style>
form.horizontal-form{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}
form.horizontal-form input[type=text], form.horizontal-form input[type=email]{
    border: 1px solid #8095a8;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 1rem;
    padding: 0 0.5rem;
    width: 50%;
    margin: 0px 1rem 0 0;    
}
form.horizontal-form input[type=submit]{
      background-color: #ff5e2b;
      color: #ffffff;
      box-sizing: border-box;  
      font-size: 1rem;
      font-weight: bolder;
      font-family: "neue-haas-grotesk-text-1","neue-haas-grotesk-text-2",sans-serif;
      border-radius: 3px;  
      padding: 0 0.5rem;
      border: none;
      cursor: pointer;
      width: 50%;
}
@media screen and (max-width: 768px){
	form.horizontal-form{
		flex-direction: column;	
	}
	form.horizontal-form input[type=text], form.horizontal-form input[type=email]{
	    padding: 0.7rem 0.5rem;
	    width: 100%;
	}
	form.horizontal-form input[type=submit]{
	    width: 100%;
	    padding: 0.8rem 0;
        margin-top: -1rem;
	    border: none;
	    cursor: pointer;
	}
}
</style>

<form class="horizontal-form" action="https://cl.s6.exct.net/DEManager.aspx" name="subscribeForm" method="post">
        <input type="hidden" name="_clientID" value="6274903" />
        <input type="hidden" name="_deExternalKey" value="B316042A-3712-4C18-91E9-0AA252F9175E" />
        <input type="hidden" name="_action" value="add" />
        <input type="hidden" name="_returnXML" value="0" />
        <input type="hidden" name="_successURL" value="https://get.eargo.com/guide-download" />
        <input type="hidden" name="_errorURL" value="https://eargo.com" />	
        <input type="text" name="First_Name" placeholder="First Name"><br>       
        <input type="text" name="EmailAddress" placeholder="Email"><br>
        <br /><input type="submit" value="SEND ME MY GUIDE">
</form>