Home > Administrative Offices > Information Technology > Web Services > VSU Web Services Guides > Creating forms with Expression Web 3
Creating Forms with Expression Web 3 - Part 5
Previous: Part 4 - Downloading and setting up processform_adv.php
Part 5 - Adding and modifying form code to your form
In this part you will be setting up the code in your form so that it will reference and use processform_adv.php
Step 1 - Download the informcode.txt file
Click the following link to view formcode.txt. Highlight all of the text, right click, and select Copy from the menu.
In Expression Web 3, open your contact form page (contactform.php in this tutorial). In the Site view tab, click on Code in the lower left hand corner. This will show you the code behind your form.
In your contact form’s code, locate the line that says:
<form action="" method="post">
Highlight this line, right click, and select paste from the menu. This will replace the line with the copied formcode.txt
Save your contact form
Step 2 – recipient
In the next few steps you will be adding to the code you’ve just pasted into your contact form.
Still in the Code view, go to the line that reads:
<input type=”hidden” name=”recipient” value=”VALUE_HERE”>
This line controls who will receive the submitted form results. In Part 4, you assigned certain emails to certain numbers in processform_adv.php
In our example, we assigned janedoe@valdosta.edu to 0, and johndoe@valdosta.edu to 1
Now you need to replace VALUE_HERE with the numbers. For example:
<input type=”hidden” name=”recipient” value=”0”>
The above would send the form to janedoe@valdosta.edu, since that email address is set to 0.
If you want to have multiple recipients, you simply put both numbers in the VALUE_HERE space, separated by commas. There cannot be any spaces.
<input type=”hidden” name=”recipient” value=”0,1”>
In our example we used the second one.
Save your changes.
Step 3 – subject
Still in the Code view, go to the line that reads:
<input type=”hidden” name=”subject” value=”VALUE_HERE”>
In this line you will replace the VALUE_HERE line with a subject line. This will be what appears in the subject line of emails received from the form. You may use spaces. For example:
<input type=”hidden” name=”subject” value=”Contact Form”>
Save your changes.
Step 4 – required
You may want some of your form fields to be required. This means that the user must complete them, or the form will not submit. In our example, we will make the fields for Name and Email be required.
Go to Design view (bottom left hand corner of the tab). Double click the text box to the right of Name (the box is highlighted in the screenshot below).
The Text Box Properties box will appear. Copy the text in the Name field. In this case, the text is Name
Select OK or Cancel to close the Text Box Properties box.
Return to the Code section of your contact form, and go to the line that reads:
<input type=”hidden” name=”required” value=”VALUE_HERE”>
Highlight the VALUE_HERE part in this line and select paste. Your line should now read:
<input type=”hidden” name=”required” value=”Name”>
Repeat the same process for the Email field. After doing this, your line will read something like this:
<input type=”hidden” name=”required” value=”Name,email”>
The two fields are now set to be required. For this you need to make sure not to include spaces, and separate each value with a comma.
Save your changes.
Step 5 – email_only and sender_email
In the Code section of your contact form, and go to the line that reads:
<input type=”hidden” name=”email_only” value=”VALUE_HERE”>
In this line you will need to place the email field’s name in the VALUE_HERE section. If you made the email field required, then you have already copied it. In this case, it is “email”
<input type=”hidden” name=”email_only” value=”email”>
Go to the line that reads:
<input type=”hidden” name=”sender_email” value=”VALUE_HERE”>
This line also needs to have the email field’s value. It will be the same as the line above:
<input type=”hidden” name=”sender_email” value=”email”>
Step 6 – sender_name
Go to the line that reads:
<input type=”hidden” name=”sender_name” value=”VALUE_HERE”>
This line will need to have the name field’s value. This is the same thing you put in the required line if you made the sender’s name a required field. Your line will read like:
<input type=”hidden” name=”sender_name” value=”Name”>
Save your changes.
Step 7 – link_url and link_text
Go to the line that reads:
<input type=”hidden” name=”link_url” value=”VALUE_HERE”>
This line’s value is the link that users will be given after completing the form. You will likely use your homepage as this link.
In our example will be http://www.valdosta.edu/~usernamehere
The line should read:
<input type=”hidden” name=”link_url” value=”http://www.valdosta.edu/~usernamehere”>
Go to the line that reads:
<input type=”hidden” name=”link_text” value=”VALUE_HERE”>
This line’s value is the link’s text that users will be given after completing the form.
In our example will be Return to my homepage
The line should read:
<input type=”hidden” name=”link_text” value=”Return to my homepage”>
Save your changes.
Step 8 – exclude
The exclude line needs to have the values of the submit and reset button listed.
Go to Design view (bottom left hand corner of the tab). Double click on the submit button. The Push Button Properties box will appear.
Copy what is in the Value/label field of the box. In this case it is submit
Go to Code view and go to the line that reads:
<input type=”hidden” name=”exclude” value=”VALUE_HERE”>
Highlight where it says VALUE_HERE, right click, and paste. The line should now read:
<input type=”hidden” name=”exclude” value=”submit”>
Now do the same for the reset button, separating both values with a comma. The line will read like this:
<input type=”hidden” name=”exclude” value=”submit,reset”>
Save your changes.
Step 9 – recipient_name
In Code view, go to the line that reads:
<input type=”hidden” name=”recipient_name” value=”VALUE_HERE”>
This line tells the name of who receives the form to person completing the form. This would typically be your name. You may use spaces. In this example, we are using Your Name Here
<input type=”hidden” name=”recipient_name” value=”Your Name Here”>
Step 10 – sort
In Code view, go to the line that reads:
<input type=”hidden” name=”sort” value=”VALUE_HERE”>
This line needs to include all of the form field values from the form, except for the ones that are in the exclude line (the submit and reset buttons).
In this case, it will need to include the Name, Email, Choose one, If a student, and the Comments fields. You will want to copy these into a list so that you will not have to keep switching back and forth between the Design and Code views. In my example, I’ve copied them all into Notepad:
Go to Design view. You already know how to copy the text box fields (from Step 4). Copy them into Notepad, separated by commas, no spaces.
For the radio button list, you will only need to copy the Group name associated with the list. Double click one of the radio buttons. The Option Button Properties box will appear.
Copy what is in the Group name field and paste it into Notepad.
Now you will do the same thing for the drop down box. Double click the drop-down box. The Drop-Down Box Properties box will appear.
Copy what is next to the Name field. In this case, it is If_a_student
Paste it into your list.
Double click the comment textarea. The TextArea Box Properties box will appear.
Copy what is next to the Name field. In this case, it is comments
Paste it into your list.
Your list in Notepad should now read:
Name,email,User_Type,If_a_student,comments
Go to Code view, and go to the line that reads like:
<input type=”hidden” name=”sort” value=”VALUE_HERE”>
Replace VALUE_HERE with your list. Remember there should be no spaces, and the values need to be separated by commas.
<input type=”hidden” name=”sort” value=”Name,email,User_Type,If_a_student,comments”>
Save your changes.
Your edited code should now look something like this:
Go to Part 6 - Adding security recaptcha code