Migrating web forms from one site to another

Updated on 27-March-2018 at 3:27 PM

Business Catalyst End of life announcement - find out more details.

This is a step-by-step guide on how to migrate your Web Forms from one Online Business site to a new Online Business site. For the purposes of this article, the site you are migrating from is called the source site while the site you are migrating to is called the destination site.

Migrating web forms from one site to another is a manual process and will essentially require recreating the form on the destination site in the same way you have in your source site. This article will ensure you have covered all areas of recreating your web form. For best practice, ensure you have both your destination site and source site open in a browser.

Creating the web form

The first step would be to create a new form in your destination site. Site Manager > Web Forms and then click the Add Web Form.

Enter a name for the web form (you can optionally use the same name as the form on your source site), then click the Save button.

The next step requires you to select the system fields for the web form. Make sure to check all the fields in this section that are currently checked in your source web form. To check this, open your source site and choose Site Manager  > Web Forms. Select the form you are replicating and then click the 'Add system fields to web form' link on the right side.

Ensure that you have also checked the additional form fields .

 

Make sure that recreate the custom fields as shown in your source form. 

Once you have recreate all these custom fields in your destination web form, click Update .

The final step of recreating this form would be to recreate the auto responder, this step is relatively easy. To do so, firstly open your source form and click on the 'setup auto responder email ' . The following step will require us to copy and paste this auto responder from the source form to the destination form, the most precise way to do this would be to copy the HTML. To do this click on the HTML view button at the bottom of the editor as below:

Select all and copy the HTML code here, then open your destination form (which should already be on the auto responder page) and once again click on the HTML view button. Select all and paste the code here.

If you have made Customizations to your web form on your source site please see continue reading, if you have not, then that's it, your done.

Customizing your form

If you have made Customizations to your web form you want to migrate to your new site, these customizations will need to be be re-done in your destination form. First ensure that you have followed the steps above to recreate this form. The next step is to see what confirm what customizations you have made on your source form. To do this, open your source site and go to your web form via Site Manager -> Web Forms and select the form, click on the 'More Actions > Customize Web Form :

Make the necessary changes in your destination form. For system fields, you can simply copy and paste the whole field from your source site to your destination site because the <name> and <id> are the same, however do NOT copy the entire field for custom fields as the custom fields will have different Id's and names and therefore will not work on different forms.

For example, the screen shot below shows some customizations done to the Firstname and Lastname fields done in the source form which I will copy:

I will then open the destination form and paste these fields in place of the current Firstname and Lastname fields:

With custom fields however as mentioned above, you can not copy the entire field as this will copy over the Name and Id of the field which will break the new form. What you will need to do in this case is only copy the customized HTML from the custom fields.

For example, the screen shot below shows some customizations done to the Custom dropdown field in the source form which I will copy:

I will then open the destination form and paste these customizations in the Custom dropdown fields.

Re-Inserting the web form

If you have followed the correct procedure outlined in Site migration article for migrating your web pages from your source site to your destination site, then you will have noticed that your forms have also come across. You will need to replace these forms with the new forms you have just created in the steps above, to do this first find the web page that has the web form via Site Manager  -> Web Pages. For example, you more than likely have a contact form somewhere on your contact us page, so for this example you will need to go to Site Manager -> Web Pages and click on the 'contact us' page.

The next step is to firstly remove the current form, the best way to do this would be to go into the HTML view via the <> button at the bottom of the editor:

Select all the HTML between the <form> and </form> elements and delete this:

Now using the module manager, we can insert the new web form. Click on 'ToolBox ' -> Web Forms -> Select Web Form to insert and select your new form from the drop down list:

Click in the editor where you would like to insert this form and then click the 'insert' button.

See the Site migration article for more details.