Customizing Web Forms

Jul 02, 2012 Jul 02, 2012

Copy link to clipboard

Copied

Customizing an Auto Responder

You can customize the way that auto-responder emails are sent to people filling in your web forms.

Within the Site Manager options you need to go to Web Forms, click on the relevant Web Form and click on Setup Auto Responder.

Fill in the following fields:

  • Email From Address - Use the following format: "John Smith" johnsmith@yourdomain.com
  • Email Subject
  • Email Format - HTML or Text (Text emails are less likely to be blocked by a spam filter)
  • Template - You can choose an HTML template. Edit these in Admin -> Manage Site-Wide Templates

To personalise the response, you can use the following tags (click on the "Tag Manager" icon in the editor):

  • {tag_emailaddress} Email address of the recipient (email address must be present on form)
  • {tag_recipientname} Full name of the recipient (firstname and lastname must be present on form)
  • {tag_webformresults} Summary of the form that was filled out (only use if email format is HTML)
  • {tag_recipientfirstname} First name of the recipient (first name must be present on the form)
  • {tag_recipientlastname} Last name of the recipient (last name must be present on the form)
  • {tag_verificationurl} The verification URL for customer to select and opt-in to your newsletter

Disabling an Auto Responder

You can disable the auto responder if desired. To do this, you will need to alter the form action URL by adding &SAR=False

For example:

action="/FormProcessv2.aspx?.....&SAR=False"

Disabling the Secure Zone login details email

Upon creating a webform which collects the username and password fields and subscribes the submitting contact to a Secure Zone an email is sent to the submitter with the login details he can use for that secure zone. If you wish to disable the sending of this email simpy append the following to the action URL of the webform:

action="/FormProcessv2.aspx?.....&SWE=False"

Customizing your Web Form after inserting

Use this method when customizing an individual form, used only in one place. Web forms are customized  after they are inserted on a web page and you can then customize it by  editing the HTML code, adding CSS classes or replacing buttons with images. You can also re-arrange the  fields. Any customizations you make will only affect the copy of the web  form on the page.

Note: Its important that you test the web form after making  changes to it by making a few submissions through it. This ensures that  whilst customizing the web form you have not broken the form.

If you make changes to your web form via Modules -> Web Forms  then you must re-insert your web form on any web page where the web form  was previously placed.

Collecting anniversary dates using a date picker

For each customer you can store up to 5 anniversary dates.                 These dates are used for                 loyalty email campaigns. Refer to an earlier section for more details. To capture this information, include the following your web form:

<input name="Anniversary1" id="Anniversary1" readonly onfocus="displayDatePicker('Anniversary1);return false;">

You can also replicate the above for anniversaries 2 to 5, e.g. Anniversary2, Anniversary3 and so forth

Customizing your Web Form using the 'Customize Web Form' option

Use this method when you have inserted the Web Form as a module. This method allows you to make a change to the form via the 'Customize Web Form' option and have this automatically update throughout the site where you have inserted the web form as a module:

customize_webform.png

When updating the web form via the 'Customize Web Form' option, this allows you to update all instances of this form from one central place.

Note: You can not insert a web form as a module in your Registration(buy) layout for your ecommerce shop as this must be inserted as HTML.

Combining the first name and last name into a full name

You can combine the First Name and Last Name fields of a web form as a single 'Full Name' field by modifying the Form HTML Code, and changing the First Name input HTML Code to 'Fullname'....

For example, this field:

<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /></td>
</tr>

Can be updated like this:

<tr>
<td><label for="FullName">Full Name <span class="req">*</span></label><br />
<input type="text" name="FullName" id="FullName" class="cat_textbox" maxlength="255" /></td>
</tr>

Then delete the 'Last Name' input field alltogether.

You will need to update the javascript validation at the bottom of the form. You will need to look for the following:

if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");

You need to remove the last name part completly. Delete:

if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");


You will then need to update the FirstName references to FullName as below:

if (theForm.Fullname) why += isEmpty(theForm.Fullname.value, "Full Name");

A quick example of this can be found here: http://jsfiddle.net/yeqgU/2/

Once completed, the system will separate a fullname (i.e. Tom Jones) into a first and last name (i.e. Firstname-Tom, Lastname-Jones) upon form submission.

Attaching web forms to Contacts instead of Cases

Sometimes you want to attach a custom web form field to the customer  record rather than the case. You can do this by simply appending a  variable to the action URL  of the web form

Append ECRM=1 to the action URL of the web form

Example:

action="/FormProcessv2.aspx?WebFormID=11557&OID=248384&OTYPE=1&EID=0&CID=0&ECRM=1

Adding multiple file attachment fields to the web form

To add multiple file attachment fields to your form, you can simply copy  the HTML code of the original field and paste it between the  <form> tags.

This is the example of the code:

<input name="FileAttachment" class="FileAttachment" class="cat_textbox" type="file">

You can also change the name and id of the new field in the following  manner:

<input type="file" name="FileAttachment1" id="FileAttachment1" class="cat_textbox" /><input type="file" name="FileAttachment2" id="FileAttachment2" class="cat_textbox" />

This will then allow you modify the JavaScript validation if you would  like to make any of these fields mandatory.For example, where you see:

if (theForm.FileAttachment) why += isEmpty(theForm.FileAttachment.value, "File Attachment");

You can change the (theForm.Fileattachment1) to look like below:

if (theForm.FileAttachment1) why += isEmpty(theForm.FileAttachment1.value, "File Attachment");

duplicate this for fileattachment2.

Please have in mind that the upload cannot exceed 150 MB and only  the first file will be included in the workflow notification even though multiple files  are uploaded.

Preventing autocomplete on web form fields

A lot of browsers have an 'AutoComplete' function which enables them to 'remember' previously submitted information to that for firld.

If you don't want to the browser to pre-populate the field you need to place autocomplete="off" attribute into that field.

For Example -

<input type="text" maxlength="255" class="cat_textbox" autocomplete="off" id="FirstName" name="FirstName" />

Redirecting the Web Form confirmation page

To redirect a Web Form submission to the another page, you will need to go to the page you have placed the Web Form on and view the HTML of this page. Find the form action URL, this should looks similar to the below:

Change this by appending the below to the action URL:

&PageID=/Results.htm

Where Results.htm is the URL of the page of the next Web Form

For example:

Pre-populate web form fields

You can use the following module tags to pre-populate the form:

                                                                                                                                                                                                                                                                                                                                                                          
{module_fullname}{module_emailaddress}
{module_firstname}{module_lastname}
{module_title}{module_company}
{module_homeaddress}{module_homecity}
{module_homezip}{module_homestate}
{module_homecountry}{module_workaddress}
{module_workcity}{module_workstate}
{module_workzip}{module_workcountry}
{module_webaddress}{module_workphone}
{module_workfax}{module_homephone}
{module_homefax}{module_cellphone}
{module_dob}{module_username}
{module_password}{module_shippingaddress}
{module_shippingcity}{module_shippingzip}
{module_shippingstate}{module_shippingcountry}
{module_billingaddress}{module_billingcity}
{module_billingzip}{module_billingstate}
{module_billingcountry}

Note: This only works inside Secure Zones, because the subscriber must be logged into a site in order for the system to recognize them and populate the form with the relevant data.


For security purposes, the billing address of a customer is always stored with the order information (and is never stored with the customer detail records).


When the system displays the billing address using the {module_billingaddress} tag, the system always displays the last billing address that the customer used when placing their most recent order.

You can pre-populate a form's fields using the module tags listed above. Edit the form and place the desired module tags inside the field values.

Editing form fields to insert module tags

Follow these steps to update an existing form's fields to prepopulate the data with the system's data.

Edit the web page that contains the form. Click the HTML tab to view the source code.

Scan the code to locate the field that you want to prepopulate. In the example below, the line of code that creates the text field that contains the subscriber's user name is displayed:

<input class="cat_textbox_small" type="text" name="Username" maxlength="255"/>

To prepopulate this field, add value="{module_username}" to the end of the field code, like this:

<input class="cat_textbox_small" type="text" name="Username" maxlength="255" value="{module_username}" />

Setting up a form to email using Web Forms

You can configure a form to send the data to a user's email address, rather than storing it in the database. This strategy enables you to create simple web form with email functionality that forwards the details of a web form submissions to a pre-designated email address.

To set up a web form to forward the submitted data, follow these steps:

  1. Create and insert a web form on a page.
  2. Update the action URL in the source code of the form to use the format shown below:
       
    action="/Default.aspx?A=Form&Email=You@YourDomain.com&Subject=This+is+email+subject&EmailFrom=yourfromemail@YourDomain.com&PageID=/DesinationPage.html"

In the example above:

  • &Email=You@YourDomain.com - The email adddress to which the submission is sent. Replace “You@YourDomain.com” with your email address.
       
        Note: The email address that will be receiving the form submission must exist in either your sites CRM (customer database) or be a admin/email user of the site.
       
        If the email address being used to receive these form submissions does not exist as a site user or in the CRM, then the email will not be sent. A notification will be sent to the partner of the site advising them of this requirement.
       
  • &Subject=This+is+email+subject - The subject of the email. Make sure you separate each word in the subject with the + (plus) sign.
  • &EmailFrom=yourfromemail@YourDomain.com - The from email address. Replace yourfromemail@YourDomain.com with the email address you want to use for the submission.
  • &PageID=/DestinationPage.html -  The URL of the landing page presented to the visitor after the web form has been submitted.

For more details, see the KB article.

TOPICS
Documentation

Views

59.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 02, 2012 Jul 02, 2012

Copy link to clipboard

Copied

I am impressed by your post.

I've looked around and scraped and lost many hours looking for a reference this nice.

It appears to me that the newer style forms getting generated are different than the old examples about disabling the double opt in process in some cases.

Could you touch on the correct way to do add the &optin=true to the new longer string please?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jul 03, 2012 Jul 03, 2012

Copy link to clipboard

Copied

Hey there,

You should be able to append "&optin=true" to a form's action URL no matter how long it is. it will still work. That hasn't changed.

Cheers,

-mario

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 15, 2012 Aug 15, 2012

Copy link to clipboard

Copied

Anyone know how to include web form results in a custom form results landing page? So rather than using the system page, use a custom page like 'results.html' and display the form results. Using {module_webformresults} did not seem to work. Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Aug 16, 2012 Aug 16, 2012

Copy link to clipboard

Copied

Hi Simon,

This is not possible as there is no such module in BC.

Cheers,

-mario

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 04, 2012 Sep 04, 2012

Copy link to clipboard

Copied

That's a surprise, it's a very common result of filling in a form online - it takes you to a page which lists your results. Preferable in many cases to sending an email confirmation.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 03, 2012 Oct 03, 2012

Copy link to clipboard

Copied

I have a free member section where I use a secure zone. Is it possible to have a opt in email with confirmation for a secure zone? Rignt now, visitor can subscribe and login whitout verification.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Oct 03, 2012 Oct 03, 2012

Copy link to clipboard

Copied

If you want to send a validation link to the user, so that they can confirm their email address before gaining access to the secure zone, that's not currently possible in BC.

-m

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 29, 2012 Oct 29, 2012

Copy link to clipboard

Copied

Hi Mario,

I have a quick question for you. We have a number of forms on the website Sweet Paul where when the user interacts with us via forms, we also put a checkbox there for them to subscribe to our newsletter. We noticed a number of users who checked the box are not receiving the verification email (maybe it went to spam, etc). So, what we're wanting to do is write code that ONLY IF the "Subscribe to newsletter" box is checked, it then opts them into the newsletter without verification. Is there some code we can put in there that achieves this opt-in, but ONLY if the user checked the subscribe to newsletter box?

Here's a page where this is the case:

http://sweetpaul.tinymilltrial.com/latest-news/signed-copies-of-small-plates-sweet-treats-by-aran-go...

Thanks for a great post here, very helpful stuff.

Brandon

tinymill.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Oct 30, 2012 Oct 30, 2012

Copy link to clipboard

Copied

Hey Brandon,

There's a way to bypass opt-in, by appending &Optin=True to the form's action URL. You can attach onclick javascript event to that checkbox which will append that parameter to the action URL and customer will be automatically opted-in and won't have to click verification link.

Cheers,

-mario

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 28, 2013 Jan 28, 2013

Copy link to clipboard

Copied

Hi Mario - can you explain the &Optin=True a little more. Where exactly does it go on the form and if you have more than one email list, how do you opt them into a particular list?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jan 28, 2013 Jan 28, 2013

Copy link to clipboard

Copied

Opt-in is appended to form's action url and it opts in customer in general.

It's not related to a particular list

On 28 Jan, 2013 7:54 PM, "Fenwick_Snowdon32" <forums_noreply@adobe.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 10, 2013 Aug 10, 2013

Copy link to clipboard

Copied

HI Mario

Could you please explain or povide the "onclick javascript" you mentioned October 30, 2012? I too am looking for a way to only force opt-in those who check the subscribe box included in the Contact Us form, and not everyone.

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 10, 2013 Aug 10, 2013

Copy link to clipboard

Copied

If you put a subribe option on a web form that is the default behavior. It wont be checked unless you change the html and only people who tick it will be subscribed. You do not need any javascript.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 11, 2013 Aug 11, 2013

Copy link to clipboard

Copied

Thank you Liam. Could you please confirm then that all I need to do is add &Optin=True to the form's action url to force opt-in only those who tick the subscribe box.

Cheers

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 27, 2012 Nov 27, 2012

Copy link to clipboard

Copied

Is there a way that I can set a user's email to be their username as well? I would like them to be able to enter their email address into the web form and then have that email be their username to login to the site in the future.

Right now, the username is generated automatically by appending the First and Last Name fields entered by the user.


Thanks,

Justin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 10, 2013 Jan 10, 2013

Copy link to clipboard

Copied

I have multiple paying secure zone, When I select Sell ongoing membership access in my webform, it gives me all the list. How can I reduce this list to one secure zone?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 17, 2013 Jan 17, 2013

Copy link to clipboard

Copied

I am trying to autopopulate one field in my form on this page. http://newportclassiccars.businesscatalyst.com/car-interest-form  Specifically the "

I would like to grab a tag from the previous page http://newportclassiccars.businesscatalyst.com/collection of the vehicle so the user doesn't have to select or type anything.  Is this possible?  Not sure how to do it with the BC forms. trying to use this tag {tag_name} to possibly add as a string for the field on the next page...  am I making sense?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 17, 2013 Jan 17, 2013

Copy link to clipboard

Copied

Maybe jquery and cookies. Google around and you'll find an example, like this ... http://stackoverflow.com/questions/10532421/html-jquery-how-to-retrieve-data-from-previous-form

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 17, 2013 Jan 17, 2013

Copy link to clipboard

Copied

I found this thread.  http://forums.adobe.com/message/5002609#5002609

But so far the method isn't working for me.

My problem is I'm trying to pull from a field in a web app to create the URL...  The curly brackets are becoming an issue.  I have my issue with weblinks on the forum linked above.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jan 17, 2013 Jan 17, 2013

Copy link to clipboard

Copied

Hi QreusJorj, 

You can try using BC's {module_URL} to achieve this.

The below article explains how you can take advantage of it but basically, you can add parameters to a URL string and retrieve it on another page using this module:

http://helpx.adobe.com/business-catalyst/partner/passing-data-url-string-pre-populate.html

Hope it helps,

Danny

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 25, 2013 Feb 25, 2013

Copy link to clipboard

Copied

Hi Danny,

Sure you would have done this - I've got a long form so want to do two things

1. Split it into two parts so collect name / email phone etc. before scaring them with the full form on the next page - I get how to redirect to the second page on completion of the first form, but how match the second form with the data ( name / email etc.) from the first form - is there a way to pre populate the second form but hide the fields so the user doesn't see those fields over again?

2. People get distracted on long forms or have to go collect information and return to the form later - is there a way to repopulate the the form up to the point they left it if they leave the site and return either atomatically or with a save and return later function.

Your thoughts on this would be appreciated.

Cheers,

Craig

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Feb 28, 2013 Feb 28, 2013

Copy link to clipboard

Copied

Hi Craig, 

The answer to both your questions is similar, you will be populating form fields using modules. I've added this info to the bottom of the document:

http://forums.adobe.com/docs/DOC-2363#Prepopulate_web_form_fields

Simply add value="{module_example}" in the form field to populate it with info from the CRM.  In regards to your specific scenarios: 

1. To be honest, I've never tried pre-populating multi-step forms. Try adding the modules to the form fields on the second form and see if this works (let us know how you go). 

2. To achieve this, you would need to have a username and password early in your form. You can then pre-populate the form fields with the modules as mentioned above, and when the customer returns they can first log in and the relevant fields will be pre-filled.

  Danny

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 28, 2013 Feb 28, 2013

Copy link to clipboard

Copied

I am sure this info is somewhere else. But along the lines of the questions pertaining to the optin=true...

Can one please clarify the following ?'s:

1. If optin=true is used, does the person get an autoresponder from the form? (By "an" I mean the one that is set up on the same page as the form, if one is...) (or, is it the case that the list autoresponder could over-ride precedence and send itself; rather than the form's auto-responder if the false option for sending list autoresponce is set?) And could one show the various options of form tuning in examples?

2. Or, does one get a confirmation of the list they joined (seem to recall an override)...

3. Does the landing page get set up on the form (in a customize this form section) or can one just use the code from another form without customizing the form using the "customize this form" options in the admin?

4. I've got a routine that takes the tables out and uses css however; it is tedious. Will there ever be a stock css form builder or does anyone have any fantastic solutions to this?

5. I also wonder if anyone has had luck building ajax forms or sliding forms. I have, but am always looking for pointers and easier, better, smarter ways of doing things.

6. What are the main variables that are unique on a form to form basis; meaning... if I have a good form template... can I output another form and input the uniques to activate it with the new form id?

7. What is the most creative use of forms you've seen?

8. Last question relates to not accepting information from minors... Any good solutions to boot the minors at the point they put in a birthday denoting they are under 18?

Thanks for your time, I wish you all a great day and appreciate you reading thus far. If you happen to have fantastic shares pertaining to any of the afore mentioned q's; please just note the number and respond to just the ones you care to. I look forward to your replies. - Tyson

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 28, 2013 Feb 28, 2013

Copy link to clipboard

Copied

Hey there.

Auto responder is not the same as the optin stuff. You can turn off auto responder in the admin directly if you want. As above the URL option is &SAR=False to disable it.

The confirmation page is one of the system layouts it is a confirmation page for all forms. If you want a custom confirmation page use the above infroamtion to setup the pageID in the action url to go to the page you want.

There are currently no plans by BC to update the web form system in BC.

Ajax forms is quite a bit of script knowledge level, not have any issues these days myself but it is just down to your knowledge and what you want to do. No real pointers you can give.

Creative use of forms? They are forms so you can do a lot with them. It is really up to you.

Any date driven Minors thing on the web can be bypassed and ignroed. You can do a date thing but it really does not matter Tyson. You can bypass it. You get things saying "you over 18" "enter your birthday to see this movie trailer" and you just make something up to get in.

You can do it to meet a legal requirement if you need to but really, you do not know their age so you may as well not do it. UI - keep it as simple as you can, if it is not needed, dont have it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines