The import wizard allows advanced users who are familiar with HTML tags and elements to import web forms that are created outside Acoustic Campaign.

Note: This article shows how to add a reCAPTCHA widget in classic web forms. If you're using the forms composer, go to this article: Add a reCAPTCHA widget to a form.

Before you begin, for the import wizard to detect the form, the page must have:

• An HTML <form> tag, with a method=POST
• A Submit button (<input type=submit>)

or

• An Image Submit button (<input type=image src=someurl/somefile.gif>.
• Input types Text, Password, Check box, Radio, Hidden, Select, and Text area are mapped based on their name attributes. Empty name attributes cannot be imported.
• Input type Button (<input type='button'>) is mapped based on its value attribute. The empty value attribute cannot be imported.
• Do not use duplicate value attributes between a button and submit types.
• Do not use duplicate names for different form input types. Example: one tag is <input type='text' name="firstname">, and another tag is <input type='radio' name="firstname">

Importing a form

1. Set up a database and add the fields from the external form.
2. Go to the landing page site.
3. Click the Manage Site tab, and then click Import.
4. Select the method for handling the import of your HTML and image files (compressed file or HTML file).

   Note: If you choose to import files by using the HTML method, you need to manually assign images on the Content Hosting tab.

5. Click Browse to select the compressed file or HTML file.
6. On the Import form box, select the type of web form (standard, opt-out, etc.) and then click Next.
7. Click Browse to associate the image files and then click Done.

   Note: You need to fully test the imported form. Warnings and errors display but will not prevent importing. If you choose to import files by using the HTML method, you need to manually assign images on the Content Hosting tab.

8. (Optional) Perform field mapping. For details, see the Map web form fields to Acoustic Campaign database fields.

Once you import your form, you can save it and reuse for future emails or on your landing page. You can also map or link fields between your external web form and Acoustic Campaign for each web form in the web form tree.

Map web form fields to Acoustic Campaign database fields

After you import your form, you can map or link fields between your external web form and Acoustic Campaign for each web form in the web form tree.

Note: You are only required to map the Submit button. You do not have to map other fields.

To perform field mapping, take these steps

1. Go to the Standard Web Form Properties panel, which can be found on the Manage Site tab of a Landing Page.
2. Click the .html page in the web form tree and then select the web form.
3. Click the Field Mapping plus ( + ) icon to expand the section.
4. Select a page in the site or URL you want to map a field to.
5. Click Save.

Make changes to the form fields after they have been mapped.

You can make changes to the form fields after they've been mapped. The HTML is re-parsed in the Acoustic Campaign so you do not have to re-import the file with changes. Make your changes and then click the Update button.

For example, to remove a field, such as the Zip field in the image. You can go to Source view and delete the code. Then, click the Update button and you will see it is removed from the Field Mapping section.

Add new database fields after importing the form.

1. In your external WYSIWYG editor, for example, Dreamweaver, copy (or hand-code) your HTML field. In Acoustic Campaign, open your web form.
2. Paste the new field into your form's Source View.
3. In Field Mapping, click Update and then map the field to its corresponding field in your database.
4. Save the landing page.

Mapping HTML input types to Acoustic Campaign field types.

HTML input types that can be mapped to an Acoustic Campaign database columns/form field types:

Note: If the input type is set to 'hidden', you cannot map that field to email.

As a workaround, hide the email input text field.

<div style='display: none'><input type='text' name='Email' />Email,/div>

Key:

• Warn = Warning, you might not be able to successfully map an HTML input type field to an Acoustic Campaign database field.
• N = No, cannot map HTML input type field to an Acoustic Campaign database field.
• Y = Yes, can map HTML input type field to an Acoustic Campaign database field.

Add a hidden field to an imported form

Add a hidden field to your imported external form and then map it to its corresponding field.

You can add a hidden field to your imported external form and then map it to its corresponding field. Make sure your HTML field is marked as a hidden field: <input name="yesno" type="hidden" id="yesno" value="yes" />

Once imported, the input type is recognized as a hidden field, and you can map it to its corresponding field.

Adding Google reCAPTCHA V2 to imported web forms

Protect your site from spam and abusive activities by adding Google reCAPTCHA V2 to web forms that you import into Acoustic Campaign. Google reCAPTCHA V2 is a free service that protects sites by preventing malicious scripters from using automated data entry scripts and bots.

Note: Certain markets may run into limitations with reCAPTCHA, so check out a potential workaround from Google at Can I use reCAPTCHA globally?.

The user experience in reCAPTCHA V2 is improved from earlier versions. In V2, users validate that they are human by simply checking a box on the web form. In earlier versions, users were required to solve a CAPTCHA challenge. For more information about reCAPTCHA, see ReCaptcha information via Google developer documents. This is for informative purposes only and you do not need to follow the information from the Google site.

Acoustic Campaign support for reCAPTCHA V2 is available for web forms that are imported into Acoustic Campaign. It is not available for Standard, Progressive, or Opt-Out forms.

Developers implement reCAPTCHA by adding code to the web form HTML file. The code renders the reCAPTCHA v2 widget and verifies the user's response from Acoustic Campaign's back end.

When the user checks the box, the user is either passed immediately (with no CAPTCHA) or challenged to solve a CAPTCHA challenge that validates the user is human.

Developers can use the following implementations to add reCAPTCHA V2 to imported web forms:

• • • Form Post
    • JSONP
    • AJAX

Note: ReCAPTCHA V3 would be a similar implementation.

Form post implementation

To use the Form Post method, follow these steps:

1. Copy and paste the following code into the web form HTML file.

   <script src="https://www.google.com/recaptcha/api.js"></script>

2. Copy and paste the following code into the form code and ensure that the form tag contains: data-captcha-type="recaptcha_v2".

Form post method example:

<!DOCTYPE HTML><html><head> <title>ReCaptcha Form Post</title></head><script src="https://www.google.com/recaptcha/api.js"></script><body> <form action="/submit" data-captcha-type="recaptcha_v2"> <div class="g-recaptcha" id="recaptcha" data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div> <input name="email" value="email" type="text"/> <input name="first" value="first" type="text"/> <input type="submit" name="submit2" value="submit this form"/></form> <h2>server response </h2> <div id="response"></div> </body></html>

1. Verify your HTML page contains an HTML <form>tag with method = POST and a Submit button, where <input type= submit>.
2. Import the web form file into Acoustic Campaign.

JSONP implementation

To use the JSONP method, follow these steps:

Copy and paste the following code into the web form HTML file.

<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">

    function getResponse() {
        return grecaptcha.getResponse();
    }

    function getServiceEndPoint() {
        return "/service/captcha/recaptcha";
    }

    function validateCaptcha(formId) {
        var reCaptcha = document.createElement("script");
        reCaptcha.type = "text/javascript";
        reCaptcha.src = getServiceEndPoint()
            + "?g-recaptcha-response=" + getResponse()
            + "&formId=" + formId;
        document.getElementsByTagName('head')[0].appendChild(reCaptcha);
        return false;
    }

    function captchaSuccess(data) {
        if (data && data.isHuman === "true") {
            document.getElementById(data.formId).submit();
        } else {
            grecaptcha.reset();
            document.getElementById("response").innerHTML = "invalid captcha";
        }
    }

    function captchaFailure(data) {
        if (data) {
            document.getElementById(data.formId).submit();
        }
    }
</script>

Copy and paste the following code into the form code and ensure that the form tag contains: data-captcha-type="recaptcha_v2".

<form id="myForm" onsubmit="return validateCaptcha('myForm');" action="/submit" data-captcha-type="recaptcha_v2">
    <div class="g-recaptcha" id="recaptcha" data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div>

JSONP example:

</head>
<body>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">

    function getResponse() {
        return grecaptcha.getResponse();
    }

    function getServiceEndPoint() {
        return "/service/captcha/recaptcha";
    }

    function validateCaptcha(formId) {
        var reCaptcha = document.createElement("script");
        reCaptcha.type = "text/javascript";
        reCaptcha.src = getServiceEndPoint()
            + "?g-recaptcha-response=" + getResponse()
            + "&formId=" + formId;
        document.getElementsByTagName('head')[0].appendChild(reCaptcha);
        return false;
    }

    function captchaSuccess(data) {
        if (data && data.isHuman === "true") {
            document.getElementById(data.formId).submit();
        } else {
            grecaptcha.reset();
            document.getElementById("response").innerHTML = "invalid captcha";
        }
    }

    function captchaFailure(data) {
        if (data) {
            document.getElementById(data.formId).submit();
        }
    }
</script>

<form id="myForm" onsubmit="return validateCaptcha('myForm');" action="/submit" data-captcha-type="recaptcha_v2">
    <div class="g-recaptcha" id="recaptcha" data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div>
    <input name="email" value="email" type="text"/>
    <input name="first" value="first" type="text"/>
    <input type="submit" value="submit this form"/>
</form>


<h2>server response </h2>

<div id="response"></div>

</body>

Verify your HTML page contains an HTML <form> tag with method = POST and a Submit button, where <input type= submit>. Import the web form file into Acoustic Campaign.

AJAX implementation

To use the AJAX method, follow these steps:

Copy and paste the following code into the web form HTML file.

<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">
    function getResponse() {
        return grecaptcha.getResponse();
    }

    function validateCaptcha(form) {
        var response = encodeURIComponent(getResponse());

        var parameters = "g-recaptcha-response=" + getResponse();

        var xmlHttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var response = JSON.parse(xmlhttp.responseText);
                if (response && response.isHuman === "true") {
                    form.submit();
                } else {
                    Recaptcha.reload();
                    document.getElementById("response").innerHTML = "invalid captcha";
                }
            }
        };

        xmlhttp.open("POST", "/service/captcha/recaptcha", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(parameters);
        return false;

    }

</script>

Copy and paste the following code into the form code and ensure that the form tag contains: data-captcha-type="recaptcha_v2".

<form onsubmit="return validateCaptcha(this);" action="/submit" data-captcha-type="recaptcha_v2">
    <div class="g-recaptcha" id="recaptcha" data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div>

AJAX method example:

<!DOCTYPE HTML>

<html>
<head>
    <title>ReCaptcha AJAX</title>
</head>
<body>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">
    function getResponse() {
        return grecaptcha.getResponse();
    }

    function validateCaptcha(form) {
        var response = encodeURIComponent(getResponse());

        var parameters = "g-recaptcha-response=" + getResponse();

        var xmlHttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var response = JSON.parse(xmlhttp.responseText);
                if (response && response.isHuman === "true") {
                    form.submit();
                } else {
                    Recaptcha.reload();
                    document.getElementById("response").innerHTML = "invalid captcha";
                }
            }
        };

        xmlhttp.open("POST", "/service/captcha/recaptcha", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(parameters);
        return false;

    }

</script>

<form onsubmit="return validateCaptcha(this);" action="/submit" data-captcha-type="recaptcha_v2">
    <div class="g-recaptcha" id="recaptcha" data-sitekey="6LfDpyIUAAAAAE3u7uqor-G3NnYDQJVsoMAc6t7z"></div>
    <input name="email" value="email" type="text"/>
    <input name="first" value="first" type="text"/>
    <input type="submit" name="submit2" value="submit this form"/>
</form>

<h2>server response </h2>

<div id="response"></div>


</body>
</html>

Verify your HTML page contains an HTML <form> tag with method = POST and a Submit button, where <input type= submit>. Import the web form file into Acoustic Campaign.