The contact us page usually holds the address, phone numbers and emails for a company like the one we created, but also a form for feedback. This page will show how to create a simple feed back form that is send as email to one of the staff.

Fields in DG3

In DG3 you can always use raw html to make fields and forms, but if you want to connect the fields to data, it is better and easier to use the built in field snippets. This will help you with all the data exchange with the server, so all you need to worry about is the do the connection right. 

Add the contact fields to the contact page

Open the contact page and go into the html editor. To add a field click the "Edit field" icon and give it a name. If you connect to a field, the field will be used as the default name, but for the contact field, we will only use standalone fields with no data connection, so her we must give our own names. We will use these names later, so it is important that we use proper names. For the contact form we will have 4 fields: name, email, subject and message. To help us with the styling of the form we will use the bootstrap form styles.

Edit field button

Create new field dialog

Change field properties by clicking on the field snippet

Change field type

Use the extra field on the bottom to change textedit specific values

<div class="row">
	<div class="col-md-12">[! image contactheader !]</div>
</div>
<div class="row">
	<div class="form-group">
		<label for="">Your name</label>
		[! field name !]
	</div>
	<div class="form-group">
		<label for="">Your email</label>
		[! field email !]
	</div>
	<div class="form-group">
		<label for="">Subject</label>
		[! field subject !]
	</div>
	<div class="form-group">
		<label for="">Message</label>
		[! field message !]
	</div>
</div>

The code added now have one image heading centered on the row, tree standard field and a textedit field with 10 rows. The next step is to make this sending email back to us. To do that we have to activate the mailing module and add a button that creates and sends a mail.

Activate mail modules

In DG3 most of the none core functionality is off by default. This is to not make a bloated web application. In this way we can have a lot of modules doing any odd functionality that only are pulled in when needed. Mail sending from a web form is one of these. To activate it, you need to go to the settings section, locate the modules and activate and configure the mailhandling modules. This module gives you the ability to send mail from DG3 by using an external SMTP server. DG3 do not have a build in mail server as this requires a lot of tuning and careful work to avoid spam and also to avoid being recognized a valid mail server and thereby not stopped by spam filters. Instead you are required to use your standard SMTP server and set up an account on this one for use by DG3. In this way all mails sent from DG3 will be recognized as coming from a real mail server an less prone to be tagged as spam.

You must set up the mail module the same way you do you other mail accounts. Then you have to go to actions and activate the mailsend actions. Once that is activated and the mailhandling module is set up to send mail, you can use this action to send mail from your form, using a button.

Button in DG3

The same way as images and fields, we have button snippets in DG3. This can be in the form of real buttons, images and links. All of them are made from the Button icon. A button is then connected to a ajax method. All form action in DG3 are ajax based, so we do not use any of the traditional form submit you find in traditional web development except in the login form (more about that in the next chapter). 

So what is ajax: ajax is an technique where you use javascript to call to the server and do the data exchange. This means that you can do data exchange without having to leave the page behind and load a new page on a button click as in traditional web forms. This means that you can use buttons for manipulating elements inside the page or open dialog like elements or send data to the server all without leaving the page.

Because of the ajax based approach, we have much more control of what is happening when a button is clicked.

Send mail button

Then you just add a button using the button icon.

create a button button, image button or link button.

So to create a mail that are sent back to our self, we create a button. Add a proper name so we recognize it in the code. Add the style btn and btn-default to make a nice looking bootstrap button. Then add a the button text in the Text field. Then select the action that is going to be used with the button. If mailsend is not in the list, you either have forgotten to save the settings or the action need to be re cached. To re cache, just save the page, close it and reopen. Then we come to the interesting part of the action, the parameters. First we add a constant value in the To field. This is the mail address to receive the mail. Next we see the use of LiveLive fields in DG3. The LiveLive fields are exchanged with values in live form fields in the html page, so we read the subject, message and build out the from user field by using LiveLive field. The rest of the parameters we leave blank as that will result in using the default mail server setting in the mailhandling module. That's all there is to it.

The final touch

As a final touch we can change the button from the very neutral default type to a more colorful and add a icon to the button. Bootstrap comes with a few nice glyph icons that can be added to all kinds of elements. 

So what we did here is first to click on the button snippet found in the page code and change the btn-default style to btn-primary. This will give us a blue button in the default theme of Bootstrap. Then we use a trick by using the Tag tail field. The tag tail adds any html code into the tag element generated by DG3. You can use it to set attributes not available in the element settings, but also to inject code like we do. So by adding

><span class="glyphicon glyphicon-envelope"></span

to the tag tail element, we first closed the generated button element by the end tag >, then we added out own <span> tag with the glyph icon without tag end. This way ensure that the generated code is valid html. Last we add a space in from of the button text to get a little space between the icon and the button text.

<div class="container">
<div class="row">
	<div class="col-md-12">[! image contactheader !]</div>
</div>
<div class="row">
	<div class="form-group">
		<label for="">Your name</label>
		[! field name !]
	</div>
	<div class="form-group">
		<label for="">Your email</label>
		[! field email !]
	</div>
	<div class="form-group">
		<label for="">Subject</label>
		[! field subject !]
	</div>
	<div class="form-group">
		<label for="">Message</label>
		[! field message !]
	</div>
	[! button sendmessage !]
</div>

The code for all of the page.

The finished contact page v1.

LiveLive fields

This is one of the many important concepts found in a DG3 application. Later we will also encounter the LiveText, but fist LiveLive fields. The LiveLive fields will collect a value form a field only found in the DOM (memory tree) of the browser running the web page. The syntax are:

[[ subject ]]

This consist of the [[ start tag and ]] end tag, and the value that corresponds to the name given to the field. This is not the column names for the tables, but the name of the fields as viewed in the browsers DOM. If you look at the field snippet it is the value after the [! field thisone !].

Bootstrap forms

Bootstrap helps you with making forms look good with sizing, borders and focus. To make this work you add a class "form-group" in the <div> around the form and "form-control" on the form. This will make a form with the labels over the form element and make the form elements take the full with of the box. You can make the form a inline form or a horizontal form by adding classes "form-inline" or "form-horizontal" in a div outside the "form-group" element. Each <input> tag must be styled with the class ""form-control. You can size the input elements horizontally by adding "input-lg", "input-sm" etc. and size the columns using the classes "col-xs-xx" classes where xx is 1-12. For more about forms in bootstrap, have a look at http://getbootstrap.com/css/#forms.

Bootstrap icon

You can add icons to any button, text or field by using a span tag and a class="glyphicon someiconclass". A button with class="glyphicon glyphicon-chevron-down" will make the down arrow of a dropdown. Others can be found at http://getbootstrap.com/components/.