Customize form elements in your form-generated emails

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge

4 ratings | Sign in to rate this tutorial | View comments

next section

What you need to start:

1. A dynamic site set up within Dreamweaver
   
2. Web Browser (Chrome, Firefox, Internet Explorer, etc.)
   
3. Dreamweaver CS3 or later
   
4. Data Bridge installed and activated in Dreamweaver

next section

Make your form

So you want to make a form that sends an email when it's submitted? Well, the first step in the whole process is making that form. For this, we're going to use the form tools built into the ever propitious Data Bridge.

For those of you still unsure if Data Bridge was worth the purchase: it was.

Configure the form

1. In Dreamweaver, make sure your site is selected.
   
2. Open a PHP page within your site.
   
3. In the menu bar, click WebAssist > Forms > Insert New Form.
   
   This Opens the Form Builder Add Form Wizard. This is where we will make our form. You can configure your form however you wish, but for this tutorial, we will use, and make references to, the Appointment Request form.
   
   
4. Under "Choose a form", change the first dropdown menu to "Contact".
   
5. Change the second dropdown menu to "Appointment Request".

Configure email

1. Click the form function tab.
   
2. Click the "Send the form contents in an email" checkbox.
   
3. Next to the From field, click the bindings lightning bolt.
   
4. Expand the Current Working Form list.
   
5. Select the Email_Address binding.
   
6. Click OK.
   
7. Enter your email address in the To field.
   
8. Enter "Appointment Request" in the Subject field.
   
9. Click Finish in the Form Builder Wizard.

Your form is being built with some fancy pants fields, and a basic copy of the Universal Email server behavior added on the page. This is what we'll use to send emails.

next section

Create a success page

Nothing makes someone feel more successful than someone or something telling them, "You've done it. You've inspired us all". We're going to create a basic success page so that people know they went the distance, and have really made it.

1. Click File > New in the menu bar.
   
2. Create a blank PHP page named form-success.php .
   
3. In the body of the page, enter the following text.
   Note that this is just for this tutorial. You may want to use something more personalized to your application.
   

   Thank you for your appointment request. We will contact you within the hour.

   
   
4. Save the page.

Now we have a rudimentary success page that will be shown once the form is submitted.

next section

Configuring email server behavior

Now that your form and success pages are created, you're going to want to edit the Universal Email Server Behavior that was created on your form page to send emails.

1. In the menu bar, click Window > Server Behaviors.
   
2. In the Server Behaviors panel, open the Universal Email 1 Server Behavior.
   
3. For the Go To Page field, click the Browse button.
   
4. Select the success page we created earlier.
   
5. Click OK.
   
6. For the From field, click the lightning bolt.
   
7. Expand the AppointmentRequest list.
   
8. Select Email_Address.
   
9. Click OK.
   
10. For the To field, enter the email address you want your emails going to ( usually your own email ).
    
11. For the Subject field, enter "Appointment Request".
    
12. Click Finish.
    
13. Save your page.

This step has created a template that will be used by your emails.

next section

Edit your email template

The last step created a template for your emails. We're going to edit the template to hide certain fields we just don't want anymore.

1. In the file browser, expand webassist > email > templates.
   
2. Open the template that was created just a moment ago.
   
3. Switch to Split View.
   
4. Scroll to the top of the page.
   
5. Notice the php lines referencing remove.
   
6. These will remove specified information from the email body instead of showing it based on the name supplied. There are no fields called x or y, so no fields are being filtered yet.
   
7. At the top of the email page, copy the line:
   

   $remove[] = "y";

   
   
8. Paste a copy of the line under the it.
   
9. Open the form page.
   
10. Select the Terms field.
    
11. Talk to a stranger and make a new friend.
    
12. Copy the name of the field. This will be Terms assuming it wasn't customized in the form.
    
13. Return to the email page.
    
14. Paste the name of the Terms field in the place of the y, like so:
    

    $remove[] = "Terms";

    
    
15. Repeat these steps for each element you wish to remove.
    
16. Save your page.

next section

Add select form elements

Now we're going to get into removing the repeating region that has been displaying our data, and only showing what we specifically want to show.

1. In the email body, click in one of the cells below where you want to insert the data.
   
2. Right click in the area.
   
3. Select Table > Insert Rows or Columns.
   
4. Set Number of Rows to 2.
   
5. Click the Above the Selection radio button.
   
6. Click OK.
   
7. For the sake of the demo, we are only inserting the First Name and Email. You can show whatever fields you feel comfortable showing.
   
8. Enter labels for the freshly inserted rows: First Name and Email.
   
9. In the menu bar, click Window > Bindings.
   
10. Click Plus ( ).
    
11. Select Form Data.
    
12. For the Form page field, click the Browse button.
    
13. Select the the form page we created earlier.
    
14. Click OK.
    
15. In the Bindings panel, click on the First_Name Binding.
    
16. Drag the Binding onto the page next to the First Name label.
    
17. In the Bindings panel, click on the Email_Address Binding.
    
18. Drag the Binding onto the page next to the Email label.
    
19. Save your page.

And there you have it! Your email is only showing the fields you want it to show!

What to do next...

Bravo, my good friend. You have done well. Your form is sending you emails, and you're only seeing what you should be seeing in those emails.

For a greater challenge, try creating a completely custom email body that shows information pulled from a database as well as from the form.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

4 ratings | Sign in to rate this tutorial