How-To: Give BatchBook Web Forms your own look and feel
- Posted October 11th, 2009
- Filed under: Using BatchBook
Web Forms have been a very popular feature among BatchBook users. Turns out, people love being able to let their web site visitors do their own contact data entry! 
Through the BatchBook forums and email support, we’ve received a lot of great recommendations for feature enhancements. Among those requests was the ability to style the web form in a way that will fit your web site’s look and feel a bit better. As Sean pointed out on the thread, that’s actually doable right now with a bit of html wizardry. So, let’s do it!
Step 1: Create your form & grab the raw HTML
For this example, I’m going to replace the embedded contact form on my own website with the raw web form code. The first thing we need is a web form to grab the raw code from. Here’s what a simple BatchBook contact form looks like:
Now, choose “View Source” from your browser’s menu bar (likely under the “VIew” menu). What you want to grab is the code inside the <form> tags.
Here’s what the source looks like:
Step 2: Tweak it so it’ll actually work
This part is Sean’s tip. See that first line where it says:
<form action="/lists/import_hashes" method="post" id="publicForm">
Just take that “action” bit and use the entire URL for your account. In my case, it’d be:
<form action="https://adarowski.batchbook.com/lists/import_hashes" method="post" id="publicForm">
Step 3: Paste it onto your page
Now just paste the HTML with the altered action on your page. In my case, it renders like this:
Don’t be confused by the <h1> elements. I actually use those in the design. I’m crazy like that.
You’ll also notice that the headers of the form are gone. That was another request—the ability to remove the headers and just embed the form. Of course, if you want headers you can just put them in your HTML really easy. You’ll also see that the font of the form uses the base font I’ve set for my site in the CSS. Ah, CSS. That brings us to…
Step 4: Style it with CSS
Oh boy. It’s hard to give an entire CSS tutorial in one step of a blog post. Let’s start with a few things you’ll want to know about the form structure.
- The form is built with definition lists.
- There are (up to) three defintion lists in your form. One contains the basic info like name, title, and company. The second contains contact information. And the third contains the SuperTag (custom) info included in your list.
- For each field, the label is the <dt> (definition term) and the field, text area, bullets or checkboxes are contained in the <dd> (definition… definition—yeah, I never really got the “dd”).
- The submit button is contained in a paragraph with the class “submit”.
So, with some quick styling, here’s what I did:
Here’s what I used for CSS:
form#publicForm dl { margin: 0; }
form#publicForm dt { display: inline-block; width: 20%; vertical-align: top; margin-bottom: 20px; }
form#publicForm dd { display: inline-block; width: 75%; margin: 0; }
form#publicForm input[type=text],
form#publicForm textarea { width: 80%; }
form#publicForm textarea { height: 100px; }
form#publicForm p.submit { margin-left: 20%; }
What’s it for? Okay, here we go line-by-line:
- We’re killing the default margins on the definition lists.
- On the dt, we’re giving it inline-block display with a width of 20%. Inline-block allows you to apply styles that are reserved for block level elements (like width) on inline elements. Saves you a lot of complex floating sometimes. The vertical alignment is so the “Your message” will align with the top of the text field instead of the bottom. Finally, there’s a margin at the bottom of the field names just for some space.
- Same thing on the dd, but we’re also killing the default margin-left that dds get.
- We’re giving text fields and text areas a width of 80% so it fills the space nicely. What that “[type=text]” part does is makes sure you don’t do something silly like put a width of 80% on a radio button (which is also an input, but with the type=radio). That can look silly.
- I gave the textarea a bit more height so there’s more room to type before scrolling.
- Finally, I’m giving the submit button a margin so it lines up with the fields.
Not bad, huh? That was pretty easy. There are many online sources to help you learn about CSS. I talk about how I got started with CSS and share some of my favorite tricks in a blog post called My Favorite CSS Techniques.
Enjoy! So, style up your web forms and let us know how they look!
Great article, thanks!
I’m not a customer (yet) but I will be soon and I have a question. I already watched all the tutorials and I know it’s pretty easy to import contacts.
But what I curious about is this; we are building a new site (wordpress based) and we are using this form http://www.gravityforms.com/. Would it be possible to import and synchronize de form data in BatchBlue automaticly instead of via the import function. I’m a marketer and not a Tech guy so please excuse my possible stupidity;).
I look forward hearing from you.
Kind regards
Vincent
Hi Vincent-
Thanks for the message. There’s a couple of options for you to get the form data into BatchBook: one would be to use our form builder, which would feed the contact info directly into your BatchBook account (no importing needed!).
If you wanted to stick to the form you’re currently using, you could use our API to build something that would do essentially the same thing. More info about using our API can be found here: http://batchblue.com/developer/
Hope this helps! Thanks for giving us a look.
Best,
~Michelle
Hi Michelle,
Well, after consideration its most likely that we’ll use your form builder.
At the moment we are moving all our lists to MailChimp so it’s probably better to make use of the services that you already provide.
Thank you for your quick assistance.
Cheers
Vincent
Just got through replacing our existing contact form with a new BatchBook web form. I’m excited about the integration with your CRM and automatically pulling in new contact details. This should take a lot of the manual labor out of following up with form submissions.
Thanks for making this so easy (and doing a good job explaining how to put it in place)!
Whatever I do I can not find anything in the view code that looks remotely like what you show in Step 1. I have tried a number of approaches.
1. I viewed the source of this page to try and find what you are referring to. No luck.
2. I published the iframe version of the form on my website and when viewed in a browser looked at the source, just found the iframe code again.
3. I tried within batchbook to preview the form and then view the source on the pop-up window. Still no luck.
What am I missing here? Would love to try the rest of this but can’t get over Step 1
Hi -
Great article — just what we needed to style the form here: http://www.webfadds.com/services/cms-solutions/
We develop CMS, and provide optimization solutions on the WordPress platform, and have found that styling forms, and particularly the submit buttons, will increase “conversions”.
Because of this flexibility, we plan on recommending your service to our clients.
- Scott
[...] all started with this post on BatchBook’s corporate blog entitled “How-To: Give BatchBook Web Forms your own look and feel.” The gist: You can put your BatchBook form’s HTML directly on your site and control [...]
Hi Adam,
Thanks for the tutorial. I took it and went on a roll. My form posts via AJAX, gathers Google Analytics data, user location data, browser string, timestamp and probably some other stuff I’ve already forgotten.
Blog Post: http://xioup.com/b/202/customize-batchbook-com-web-forms/
Demo Form (beta): http://xioup.com/demos/BatchBookForm.html
May be helpful for anyone trying to supercharge their BatchBook Web Forms.
HI, i want to use your form and i have a demo account but only thing is that i want to use the form into my clients site but only problem is this there is no captcha form and also how to put validation for other fields.
Hey Naseem,
This is a late reply so don’t know if you need to know. However the best most used capta free and is here: http://www.google.com/recaptcha. Just enter your domain name and then it will give you an api and instruction on how to insert into your web form.
Question for Michelle: I just upgraded my demo account of batchbook. I also got mailchimp. I know you don’t import mailchimp contacts (you only push them out). So I want to have my subscribers to be entered into batchbook and I also want them to be put into mailchimp at the same time so the can get an immediate response from the mailchimp campaign. Is there any way to automate that? Like all contacts of a certain category get pushed to a certain mailchimp list?
Hello
As I have tried to implement this I have discovered a serious flaw with using Batchbook forms as a contact form for one’s website.
To do this one must set up a Supertag, and there can only be one supertag per contact.
Since a minority of customers/prospects frequently go to the contact form to message me rather than open up their email, this causes a problem.
When I contacted support they told me that since people only use a contact form once that’s not a problem (not true!) and in the odd case they did that it would create a separate contact, and if I use the merge function I’ll have to pic which supertag will be deleted.
Wow, this seems so different from what Batchbook promoted and advertised as the capabiltiies before I signed up.
Can’t you do something where the contents of a web form go in as a communication so there can be multiple under the same contact (as identified by email address)
Thanks
Hello Mark-
Thanks for the feedback. The initial version of this form is indeed intended as more of a lead gen form/way to get information into your contact database rather than a way to continue an ongoing conversation with customers. However, I do see how that would be useful. We’ll add it as a feature request and look at rolling out another version of the form (or something similar to what you describe with communications) as time allows.
Thanks again for sharing your thoughts!
~Michelle
Mark, all these forms go into a holding box anyways so it shouldn’t be an issue. If you want to be messaged from your website you could try using the api.
To anyone who wished there was an integration with aweber here it is:
I thought it might be relevant for batchblue users who want to subscribe folks both to batch blue and their aweber (or profollow in my case) email follow up services with the same form. aweber has email parser.
1) setup web form to input info into batchblue
2) setup your email account (i use gmail) to forward any webform submissions emailed to that account to your aweber list email address.
3) setup the email parser on aweber to parse out the information on the user and subscribe the user to your list.
still not a two way integration but so far that hasn’t become an option yet in batchbook yet with any autoresponder service.
I am stunned that there is no way to make fields required. Is this in development?
Dr. Brocooli, I’m in the same boat with you. I keep forms breif to increase conversion rates… but the fields present HAVE to be filled in for the form to have any worth to me.
I’m trying this platform out because of ease of use integrating with forms. It is worthless to me if I can’t require the few fields I need.
[...] think through what people want to use forms for? Then I started to look around, came across a nice post by Adam Darowsky on styling forms and suddenly had one of those lightbulb moments. Here I’d [...]
Is this method still valid? I’m trying to get my html form to submit, and it’s not sending through the information even when I use the form html that I’ve grabbed “as is” with the form action variation above.
Any help would be much appreciated. I have a fairly long membership form to add to our site, and I need to rearrange some of the fields and hide others.
Thank you!
“It’s hard to give an entire CSS tutorial in one step of a blog post. ” oh boy is right…this shouldn’t be necessary – it is nearly 2012 and batchbook requires users to hand code what plug -ins have been doing via config screens for nearly 15 years now. Unfortunately the form builder creates a raw iframes form which looks like hell on most web pages. Not ranting, just stating the facts.