HTML Forms

Want to create a PDF document from information you collect through an HTML form? With WebMerge that’s super easy! You can create an HTML form and a template document with merge fields in it so that when people fill out the form the input information is automatically inserted into the template document and you have a customized document ready for delivery. WebMerge can even deliver your document(s) for you via email if part of what you’re collecting is an email address.
 
In this example, we will go through the process of creating an HTML form to collect information so as to auto-fill an contract between you and the person providing responses to the HTML form.
 
First, let’s make sure we have our contract with the proper merge fields in the right places. We can upload or create our template document in the documents section of our WebMerge account. Here we use the Document Builder to create our template.

WebMerge Document Builder for Contract

After we’ve built our template document, let’s specify a delivery option. Because we’re having the person who is filling out the form specify his or her own email address and we’re not including that email address in our document. We’ll select Merge Filed and Field: <<other>> in the To section of the E-Mail delivery options.

WebMerge Email Options

Now, once we have our template made and ready for delivery, we’ll create our HTML form. We have two options here, we can do this with a form we’ve created and hosted on our website or we can use a form created and hosted through WebMerge. Let’s start with a form we want to create and host on a website of our own.
 
Build the form with the input names as the names of the merge URLs. In this example we have: Date, MemberName1 and EmailAddress. We should also include a redirect URIL so that once the form is submitted to WebMerge we redirect the member to a thank you page. Here’s an example of the HTML:

WebMerge Custom HTML Form Hosted on Your Website

Notice the action of the form should be set to the Merge URL that can be found under the merge tab in the document section of your WebMerge account and the method should be set to POST.
 
When someone goes to your website and submits the form the data will be merged and delivered!
 
As mentioned earlier we can also create HTML forms easily with the WebMerge Data Collection tool and host them through webmerge. 

WebMerge Data Capture Form Creation

Click the create data capture button and then name the HTML form.  Once you have a name for your HTML form, you can choose which merge fields you would like to make into HTML form inputs. 

WebMerge Form Builder

You can specify what type of input you’d like each of the inputs to be and whether you would like them to be required fields. Here we have selected a date-picker input type for our date, our Member merge field, and the email merge field we specified in our delivery options settings.

WebMerge Form Inputs Editor

After we save our form, in the publish section, WebMerge creates a URL by which we can access the HTML form we’ve just created.

WebMerge Form Publisher

Follow the URL and you have your form ready to be filled in and automatically merged with your template document.

WebMerge Published Form for Merging into PDF

When you get responses to your new form those responses will automatically be merged with your template document and emailed to the email address provided by the responder!

WebMerge PDF Document from HTML Form

There you have it! You can now collect responses from people through an HTML form, merge those responses with a template document, and send the document off via email.  

Have more questions? Submit a request

12 Comments

  • Avatar
    Martin Lodahl

    Hey people

    Should this HTML code work in a way, which wouldn't need to redirect users of the form, to go through WebMerge URL?

    /Martin

    Edited by Martin Lodahl
  • Avatar
    Jeremy Clarke

    Hi Martin,

    You could submit the form to your own server, then send the data from your server (via HTTP POST request) behind-the-scenes. That's probably the best way.

  • Avatar
    Ian Harris

    HI Martin,
    I may not have understood your advice but whenever I post data to merge via post with the hidden input redirect I get a copy of the merged doc jsut fine but the redirect returna a page not found message. Has WebMergeFormIntegrationThanks.html been deleted or renamed or something?

  • Avatar
    Jeremy Clarke

    Hi Ian,

    Were you asking me a question? Or giving advice to Martin?

  • Avatar
    Ian Harris

    Sorry Jeremy, I was asking a question and I guess it should have been to you as you wrote the article
    I want to redirect my users to a thank you page advising them that their data has been successfully submitted as my form didn't have any redirect it just returned the success message which was not terribly reassuring for them. Your redirect would solve the problem in principle but in practice i fear my coding skills are inadequate to the task

    Edited by Ian Harris
  • Avatar
    Jeremy Clarke

    Hi Ian,

    In your HTML code, you'll need to update the _redirect_url parameter to a page on your website. Like this: https://www.example.com/thankyou.html

    If you have more questions, please create a support ticket and we'll help you from there.

    Thanks!

     

    Edited by Jeremy Clarke
  • Avatar
    Ian Harris
    Edited by Ian Harris
  • Avatar
    Jeremy Clarke

    See my edit above :)

  • Avatar
    Ian Harris

    Thanks Jeremy, I think I understand now

  • Avatar
    Allen Taylor

    Jeremy-

    Is there a way to have more formatting control of the data capture? As I see it, when I build a form in data capture, each row is formatted as just an additional row below the last one... is there no way to have to columns or get a little more creative with the appearance of the data capture form?

  • Avatar
    Jeremy Clarke

    Hi Allen,

    You can use CSS to customize the form, but if you're looking for a more advanced form, then we have a number of form partners that allow you much more control over the look of forms.

    To add CSS to your form, you an add a Rich Text field, click the Source button, then enter:

    .field {
    float:left;
    width:45%;
    margin-left: 1em;
    }

  • Avatar
    Jeremy Clarke

    Zendesk seems to have remove the style tags from the above post. The CSS code needs to be inside "style" html tags

    Edited by Jeremy Clarke
Please sign in to leave a comment.
Powered by Zendesk