• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

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

60.6K

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 ,
May 28, 2013 May 28, 2013

Copy link to clipboard

Copied

@ShrimpWonder. I suggest you use jquery. There are lots of examples around. Google it or look in http://stackoverflow.com/ where there are several example given. Good luck.

Votes

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 ,
Jul 23, 2013 Jul 23, 2013

Copy link to clipboard

Copied

I followed the directions in "Setting up a form to email using Web Forms" and I'm getting the submissions, but my client wants to people to be able to attach a .pdf version of their job application.  Setting up the form as normal and adding a input type="file" field presents the user with the field, but it doesn't get included in the email.  Is there was a way to get this functionality to work? Thanks.

Votes

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
LEGEND ,
Jul 23, 2013 Jul 23, 2013

Copy link to clipboard

Copied

Go to the case in the CRM and you should see the file there. If not, then have you added the input field to the form in the admin, not just in the html?

Votes

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 ,
Jul 24, 2013 Jul 24, 2013

Copy link to clipboard

Copied

Thanks for your reply Liam, i am a little confused though! why would there be an input field on the form admin that i would need to include that would achieve what i am after?

Votes

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 24, 2013 Jul 24, 2013

Copy link to clipboard

Copied

When you create a custom form you need to include all the fields that make up that form in yur form definition. When you then insert that form into a page (if you insert the HTML) you can then edit the layout. You can't however simply add a new field into the form within the page that has not been already defined in yoru custom form - such as the attach file field. Simly having the input field in your page form code is not enough - that field must exist in the form definition in the custom web forms you rdefined from the admn console... Greg

Votes

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
LEGEND ,
Jul 24, 2013 Jul 24, 2013

Copy link to clipboard

Copied

Basically what Greg is saying is data and database.

How does BC know to save files and information from a form you make if you do not tell it so in the admin?

So you need to go to a web form int he admin, add the fields you want and then get the html to update your form or reset a forms html to insert into a page.

This part depends on how customised the form is, if it is inserted as a module etc.

Votes

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 ,
Jul 23, 2013 Jul 23, 2013

Copy link to clipboard

Copied

Hello,

I hope you guys can help me, i have a custom web form that i want people to be able to use as a quick Availability Checker for a B&B where a user can enter name, email, check-in and check-out date. When the user submits the form, is there any way i can have the web form confirmation appear within the same content area as the form, without redirecting the user away from the page?

lahcen.businesscatalyst.com here is the homepage and you can see the availability checker on the right hand side of the content area, i dont want the user to be taken away from this page when they have submitted this form, i simply want a message to appear where the form is...'Thank you for your enquiry, we will be in contact soon' something like that.

any ideas?

Votes

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 ,
Aug 12, 2013 Aug 12, 2013

Copy link to clipboard

Copied

Hi,

I would like to add a tickbox to my contact form with it checked so when people complete my contact form they will be added to my Mailing list unless they uncheck the tick box.  I would prefer it if they didn't have to double opt-in.  Can you please advise the code?  The form is on this page http://www.sunnysideinstantlawn.com.au/contact-us

Thanks,

Tammy

Votes

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
LEGEND ,
Aug 12, 2013 Aug 12, 2013

Copy link to clipboard

Copied

You add the &Optin=True on the end of your form action and they will only double opt in when they tick the tick option.

Votes

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 ,
Aug 12, 2013 Aug 12, 2013

Copy link to clipboard

Copied

Thanks Liam. Worked a treat.

Sent from my iPhone

Votes

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 ,
Oct 18, 2013 Oct 18, 2013

Copy link to clipboard

Copied

Hi, is there any way to get file attachements from a form sibbmission attached to the workflow notification? I need to let people at my clients different departments, who doesn't have access to back-end admin, have form submissions with file attachments.

I have also tried to make a "Form to email" (outside BC) but also this way the file attachment isn't attached to the e-mail the person in charge are getting.

Any help on this is highly appreciated.

Thanks

Joakim

Votes

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 ,
Oct 23, 2013 Oct 23, 2013

Copy link to clipboard

Copied

Maybe it's just me, but I can't get the "&SWE=False" to stop my secure zone login details email from going out. I've tried several times to add it to the end of the form action, but it never actually shows up in the live page html and the email gets sent out.

I've made sure that the page is actually published (not in draft mode, or something like that). Below is the actual action code for my web form:

"https://designersedge01.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=45756&OID=7255841&OTYPE=..."


I've tried to edit it to be the following: "https://designersedge01.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=45756&OID=7255841&OTYPE=..." but it hasn't actually worked for me.

Votes

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
Participant ,
Dec 18, 2013 Dec 18, 2013

Copy link to clipboard

Copied

Hi,

attaching the URL at the end of the action string to redirect to another page does not seem to work with the login form? It always stays at the same page...

Regards, Dennis

Votes

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
Guest
Mar 06, 2014 Mar 06, 2014

Copy link to clipboard

Copied

I guess it's not necessarily the most user-friendly tool on the web. Because of its close ties with jQuery, newbies to programming may feel intimidated by the way the interface requires the implementation of code-friendly language and knowledge of the way the form interacts with other programming. Companies Custom Web Application may want to leave implementation of reFormed to a more technical person on staff to ensure no form-building headaches occur.

http://mashable.com/2012/02/16/web-form-builders/

http://signalvnoise.com/posts/2609-customizing-web-forms-with-css3-and-webkit

I googled it and found few links which is helpful in someway.

Thanks!

James Judy

http://www.agileinfoways.com

Votes

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
LEGEND ,
Mar 06, 2014 Mar 06, 2014

Copy link to clipboard

Copied

Have you actually used any of those listed James?

I barley rate any of them, They do not do what I want, they do not really make nice forms easy, pretty basic crappy ones really.

This is the web though, if you want to do more complex functionality, conditional form functionality etc.. Like building a house, if you want the nice things, the fancy things and the quality, your not going to get that unless you know your trade.

Votes

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 ,
Mar 21, 2014 Mar 21, 2014

Copy link to clipboard

Copied

OK found this great page - so double thumbs up Daniel.

However what I would like to is auto forward a copy of the form to an external email address

In summary the website has a number of sections with infornmation from different providers. I have created a form for each section but i want any enquiries to be added into the CRM and my client be notified but I also want the content provider to be recive copies of the forms ? Possible

Votes

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 ,
Apr 23, 2014 Apr 23, 2014

Copy link to clipboard

Copied

I am trying to create a form that will allow users to download an pdf. I would like them to first download the pdf and then go to a thank you page where google and bing code will track them.

I redirected my form to the pdf so that the document will open/download when they will hit the submit button.

Any ideas on how to incorporate the thank you page to the process?

Many thanks for any help you may offer

Votes

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
LEGEND ,
Jul 29, 2014 Jul 29, 2014

Copy link to clipboard

Copied

You can not redirect like that to a file and then go to a landing page. You will still get your google tracking, on a thank you page, just fire off the download with javascript on the thank you page.

Votes

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
Participant ,
Dec 01, 2014 Dec 01, 2014

Copy link to clipboard

Copied

Multiple Auto-Responders for form?

I wonder if anyone can help me? I have a web form with with two office locations (Office A + Office B).  I have used this information  (Business Catalyst Help | Set up workflow notifications ) to set up separate workflows for each location.  Therefore if customer selects Office A, then that office will receive the email.  If they select Office B, then Office B will receive the email.
At the moment though, Office A is away on holiday so I would like to create an "Out of Office" reply for any enquiries that are directed to that office?

Can this be done?
Thanks in advance!

Votes

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 ,
Dec 01, 2014 Dec 01, 2014

Copy link to clipboard

Copied

Brendon... I would suggest that you manage the out of office through your email client which would send a message advising the person that the office is closed and that the email has been forwarded through to Office B for action (which is also handled through the email client system). Your other choice is of course to change your workflow while Office A is closed and also set up the autoresponder as appropriate but I prefer the email client appropach as that way your client is managing all communications into Office A properly.

Votes

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 16, 2015 Jan 16, 2015

Copy link to clipboard

Copied

I have a form that is working great but the I am trying to change the font size of the titles so they are not so small.  I was able to get some fonts to be bigger but it did not effect all fonts.  See attached Image.  I edited the HTML in DreamWeaver but once it goes live it defaults to the small size again.  What am I doing wrong?

Here is a sample of the code I am using also:

<td align="center" valign="top" style="font-size: 18px"><label for="FirstName">First Name <span class="req">*</span></label><br /><input name="FirstName" type="text" class="cat_textbox" id="FirstName" maxlength="255" /> </td>

Screen Shot 2015-01-16 at 3.33.29 PM.png

Votes

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 18, 2015 Jan 18, 2015

Copy link to clipboard

Copied

I think I found my answer by removing the css code for the font size.

Votes

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
Engaged ,
Apr 01, 2015 Apr 01, 2015

Copy link to clipboard

Copied

About Fullname

Did anyone notice that the validation is not working anymore? I mean if the fullnema field is empty there is not alert msg...

I Checked the OP jsfiddle and the example Home:: UEC College, UEC Sixth Form College, UEC Professional Training School ::  World-Class Educati... with the same result. So i guess that I am not the only one with this issue

No popup alert message related to empty fullname field.

I have implemented this on many sites and didnt realize it until now, I am sure that it use to work...

Anyone else noticed??

img from UEC college ihIrYAu.png

Votes

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
LEGEND ,
Apr 01, 2015 Apr 01, 2015

Copy link to clipboard

Copied

Code is working fine.

You mention FullName - Not the default field on forms. For that you have to edit out the last name and first name fields and change it to FullName single input field. You also need to edit the javascript for those.

If it is not working then it will be the javascript element not changed correctly or removed.

In the case you linked the ID of the input field is FullName but the javascript is looking for id of Fullname - It is case sensitive.

Votes

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
Engaged ,
Apr 01, 2015 Apr 01, 2015

Copy link to clipboard

Copied

LATEST

Thanks for your replay Liam,

You are right. case sensitive ... Since it wasnt working I re-read the full post again and checked the OP example since it wasnt working there either I didnt check my validation script.

The worst thing is that I have been using this code for quite a long, Now I have to check all the sites that have this modification to asure that everything is working fine...

Votes

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