How to add a form that submits to an external website

This article is deprecated and has been replaced with this one:

http://support.americommerce.com/entries/21976278


In this article, we'll demonstrate how you can add HTML forms to a Content Page or Custom HTML Widget. These forms will post to a Non-AmeriCommerce website and return results.

Important Note: If you're using a form created by a third party (and thus already have your HTML page), you may be able to skip Step 1. This article does not include all the steps for creating a working form with validation---it only highlights the steps needed to make a valid functioning form that will make a call outside your AmeriCommerce store and return results.

Step 1: Create a HTML file containing a form

Using Notepad or your favorite HTML editor, create an HTML page containing a form as shown below:

In this example, we're creating a custom HTML page that allows our customers to search Google. Their search results will be displayed in a pop-up window. The most important tag in our example is the <form> tag. It has four important properties: name, method, action, and target.

  1. name: The is a name that identifies the form. You can use virtually any name except "MainForm", as this name is already used by AmeriCommerce.
  2. method: This sets the HTTP method for sending the form data. Possible values are "get" and "post".
  3. action: When the form is submitted, the form's data is sent to this URL.
  4. target: If it's omitted, the form will display its results in the current window. If you set the target to "_blank", the form will display its results in a new window.

The other crucial tag is the closing </form> tag. Any information such as textboxes, drop-down menus, and buttons must be placed between the opening and closing form tags.

Once the HTML page and its form have been created on your local system, you will need to save the document. You are now ready to proceed to Step 2.

Step 2: Upload the form

If you have been provided a form from a third party or have followed the instructions in Step 1, you are now ready to upload your form.

From the Stores menu, select your store then select "File Browser (FTP)" as shown below:

Once the AmeriCommerce File Explorer has opened, select the column on the left to which you want to upload this file.  Remember this location because you will need it in Step 3.

Now you will need to click on the “Browse...” button.  Within the “Choose file” dialog box, locate the file you want to upload on your local system.  In this example we are selecting the file “MyExternalHTMLFile.html”.  Once we have the file selected, we click “Open” and the “Choose File” dialog box will disappear.  Now click the “Upload” button to upload the file. These steps are illustrated in the image below.

 

When all these steps have been completed, you should be able to see your uploaded file in the folder you chose as shown in the image below. In this example, we chose the root folder of our store.

You may close the Americommerce File Explorer. You are ready to continue to Step 3.

Step 3. Using either Custom HTML Snap-In or Content Page

For the next step, we are ready to add the setting to your AmeriCommerce website that will allow you to use the “MyExternalHTMLFile.html” form that we uploaded in Step 2.

You can set up your AmeriCommerce store to use this file in a Custom HTML Snap-In and/or a Content Page. For this example, we will set up a Content Page.

Select “Content Page Editor” from your Store menu as shown below.

Once the “Content Page Editor” is open, enter a “Title” for the Content Page. For this example, our title will be “Google Search”.  Next you will need to enter the "iframe" tag that will load and display our “MyExternalHTMLFile.html” file, as shown in the image below.

 

The "iframe" tag loads the form inside your content page, and you can now link to it like any other content page.

Have more questions? Submit a request

Comments

Please sign in to leave a comment.