How to add custom built HTML Email Signup Forms to any website

In this guide, we’ll walk through how to add custom-built HTML signup forms to any website using Audienceful's form endpoints (free for collecting unlimited submissions).

Note: when hand coding forms from scratch, this method offers only mild bot protections, so we highly recommend implementing a CAPTCHA or something like Cloudflare on your site first. Alternatively, you can use our Embed forms or Popup Form Builder, both of which output forms with enterprise-grade bot protection out of the box.

If you’re using Wordpress or another website builder, it may be helpful to Google how to embed custom code in your site before following this guide.

1. Create a Form Action URL

If you don't have one already, create a free Audienceful account here.

To send signups to Audienceful, you need your POST action url. Create one on the Forms page.

Once clicking on Form Action URL option, a form will appear to finish the creation process. After clicking save, select the newly created form to get your URL.

2. Add a form to your site

Copy the form code below into your website. Be sure to insert your URL from the first step where it says INSERT-YOUR-URL. 

<!-- add your url to the form action attribute-->
<form action="INSERT-URL-HERE" method="post" class="audienceful-form">
    <div class="f-row">
        <label for="email">Email Address</label>
        <input name="email" type="email" id="email" placeholder="Enter your email..." required>
    </div>
    <!--add custom fields here-->
    
    <button type="submit">Submit</button>

    <!--blocks spam signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b28-ft" tabindex="-1" value=""></div>
    <div class="a-badge">Powered by <a href="https://audienceful.com/?utm_source=form" target="_blank" title="Audienceful - email marketing from the future">Audienceful</a></div>
</form>


<!-- customize or remove styling to fit your site -->
<style type="text/css">
    .audienceful-form { max-width:400px; padding:2rem; margin:0 auto; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
    .audienceful-form label { font-size:1rem; line-height:1.5rem; display:inline-block; margin-bottom:0.5rem; }
    .audienceful-form input, select { font-size:1rem; line-height:1.5rem; width:100%; color:black; border:1px solid #ced4da; border-radius:6px; padding:0.375rem 0.75rem; box-sizing: border-box; }
    .audienceful-form input[type=checkbox], input[type=radio]  { width:auto; }
    .audienceful-form button { font-size:1rem; line-height:1.5rem; background-color:black; color:white; display:block; cursor:pointer; border-radius:0.25rem; vertical-align:middle; border:1px solid transparent; padding:0.375rem 0.75rem;  }
    .audienceful-form .f-row { margin-bottom:1.2rem; }
    .audienceful-form .a-badge { margin-top:1.8rem; font-size: 12px; color:#888; }
    .audienceful-form .a-badge a { margin-top:1.8rem; font-size: 12px; color:#888; }
</style>

Test your form to make sure it works. You're good to go!

The next couple of steps are optional, but highly recommended.

3. Add custom fields [Optional] 

If you have custom fields you’d like to add to your form, use the snippet below.

Add your field ID in the three spots where it says INSERT-FIELD-ID. You can find your field IDs by going to People > Fields and clicking each gear icon.

<!--add this to the base form for each custom field-->
<div class="f-row">
  <label for="INSERT-FIELD-ID">Name</label>
  <input name="INSERT-FIELD-ID" id="INSERT-FIELD-ID" type="text">
</div>

Note: field type doesn't have to be 'text.' You can use anything supported by HTML (dropdown, checkbox, etc).

See a full list of field types here.

4. Add a success page [Recommended]

We recommend directing signups to a custom 'success' or 'thank you' page on your website after they submit.

The reason is simple; a page redirect is easily tracked by your analytics tool.

By looking at the analytics for yoursite.com/thankyou, you'll be able to see data specifically about your email subscribers (their demographics, what page they signed up from, etc), segmented from other visitors. This can be quite powerful.

5. Protect against bot signups [Recommended]

Our form action URLs have very basic protection against bots. If you don't plan on adding your own bot protection solution, we recommend moving to our Form Builder with both professionally designed Popovers and basic Embeds to get maximum protection against bots.

Additionally, we have more guides on implementing forms here.

Need help?

If you’re having trouble adding forms to your site, email support@audienceful.com and we’ll get you set up!