In our last post, we looked at two of the easier ways to have an EmailDirect sign up form on your website. Directly linking was the easiest but iframes are more popular because they allow site visitors to stay on the site while signing up for your newsletter. With the use of CSS, sign up forms can be styled to match your website with either method.
But what if you want more flexibility or functionality – such as Javascript for validation, putting content near a particular field, placing fields next to each other, using radio buttons or expand the styling of the fields with attributes like :focus?
Connecting A Custom/Existing Form to EmailDirect
The best way to achieve this is to create a completely customized web page – form fields included and styled – then match the fields from the EmailDirect form to the custom form on the web page. This custom web page would be hosted on your server, not EmailDirect.
On this mock site page, we’ve got a new example form, except this time instead of an iframe bringing in the form from EmailDirect, I’ve made the form myself. As you can see, some of the form fields aren’t stacked – they’re next to each other. There’s also some Javascript for validation – I won’t go into details about including the Javascript, I’ll leave that up to the wild ones to check out the Source code and see what’s going on…but I’ll link to the scripts I use frequently at the end of this post!
When inspecting the source code of this mock site you’ll see that none of the div ID and class names like #form-container & #button-wrapper from EmailDirect’s form are used. We’ll only need a URL, one div from the form and then some specific information from the form fields to get the custom form to add Subscribers to our database.
Remember, we still have to create the form in EmailDirect even though we’ve made our own for the website! This is how we get the URL and the specific form field information to use in our custom form.
Let’s start by taking a look at the <form> tag itself:
Just like the regular link and the iframe, the form is pointing to EmailDirect’s URL for the form.
A quick note, be sure to use the absolute URL (include the http://) as the action and set the method to POST – that just means the info entered into the form is going to POST to the URL listed in the action.
While the form is independent of EmailDirect’s div ID and class names, you’ll see that one div from EmailDirect’s generated form is included:
Click For Larger View
The #publication-wrapper houses the Publications you choose to add when creating the form in your EmailDirect account.
The checkboxes inside this div associate the subscriber to the Publication(s) of their choosing. It must be included in the form because if a subscriber isn’t associated to a Publication and they’re added to the database, they will be considered inactive and will not receive any Campaigns you send to them moving forward. You would have to change their status to active by adding them to a Publication in the EmailDirect system either one by one or through an import – and who wants to go through all that trouble?
If you only have one Publication, subscribers don’t really need to have a checkbox to tick – but since they’re required to be associated to a Publication, you could simply add the CSS snippet “display: none;” to the #publication-wrapper div.
As an alternative – you could copy over the checkbox that represents the one Publication from the EmailDirect form’s Source code (inside the #publication-wrapper div), add CSS to the checkbox by adding style=”display: none;” and add checked=”checked” to the checkbox as well. This makes the checkbox hidden but already checked so your subscribers won’t have to worry about ticking the only Publication!
Click for Larger View
Notice the form fields in the custom example form have the same id and name properties as the EmailDirect generated form (shown in the image above). This is matching the fields from the EmailDirect form to the custom form. Having these same ID and name properties ensures the information from the custom form is collected and stored in the correct field when creating the subscriber’s record in your EmailDirect database.
Once your custom form is complete, be sure to test the form and check your EmailDirect account to see how (and if) the records are being added and/or updated.
That’s all there is to creating your own form and having it update your EmailDirect database! When using this method, you can do more things than just sign up subscribers like surveys, get customer feedback and voting for contests! You can of course use the previous two methods to achieve these also, but custom allows you to have control over every aspect of the page and enhance the visitor’s experience with tool tips, break the form up over multiple pages and more!
If you’d like to incorporate some Javascript/jQuery into your form, check out the scripts I use when helping our clients develop custom sign up pages:
- Form validation: http://www.geektantra.com/2009/09/jquery-live-form-validation/
- Date picker: http://jqueryui.com/datepicker/
- Add label inside text field: http://crosstown.coolestguyplanettech.com/ua-ui/39-add-a-label-into-a-text-input-field-in-a-html-form
- Breaking the form up over multiple “pages”: https://github.com/xoxco/jQuery-multipage-form
If you’re already taking advantage of EmailDirect sign up forms – we’d love to see how you’re using them; just leave the URL to your form in the comments! If you have any questions about creating a custom sign up form or would like one created for you, contact your EMC and let’s see how we can help!
Until next time – happy designing!