This contact form enables a visitor to compose an email from your contact page.
When the visitor clicks send, the email opens in the user’s email program, ready to be sent.
This technique avoids several problems with traditional email forms:
- there is no possibility of the email going to spam
- the user retains a copy of the sent message
- no server configuration is necessary
Your site came with working contact pages. What follows explains how to create a new one from scratch.
To add a contact form to any page
Go to any page and add a new Script Set (Script Sets are the last element on the page settings page):
Script Sets (Show ▸)
Choose Mailto Contact Form.
The form is already functional; everything that follows shows how to customize it.
Verify that the contact form is loaded
When you reload the page, you should see the form in the upper left corner of your page.
Making the form easy to see
Go into the Page settings for your contact page, and add an ADDITIONAL SCRIPT (the third black bar):
- active: checked
- name: Debugging
- type: body JS
- load order: 1
- content: contact_debug=1;
Click Save and continue editing.
Reload the contact page — you should now see a faint green box for each field, containing the name of the field.
Tip: turn on Snap to Pixel in the View menu and the next step will be much easier.
Building the form in Illustrator
If it is not already done, build the contact form in the Illustrator file for your page (or modify the file Contact.ai that came with your website):
- create a new layer called “form” containing rectangles representing the form fields
The fields template layer rectangles should match the placement of the text, with only a 2-3 pixel margin on each side.
Except for the send button. The send button in your HTML template layer should reflect the size and color of the final form.
Collecting the Illustrator Field dimensions
Go get the form field information from Illustrator:
- open the Transform panel (Window › Transform)
- click in the upper left corner of the 3×3 grid
- select a form field from your fields template layer
- make a capture of the Transform panel*
- repeat for each form field
*type cmd-shift-4 then space, then click on the Transform panel. You’ll find the capture on your Desktop.
Converting the Illustrator Dimensions to CSS
Open the conversion tool by clicking on this link.
Using the captures of the dimensions of your panels, fill out the form then click “convertir”.
In the Page Settings, add a second ADDITIONAL SCRIPT with the following values:
type: CSS
active: checked
load order: 2
name: placement
content: [CSS code copied from the previous step]
Click Save and continue editing, then reload the page.
You should see that the form fields are now positioned correctly.
Collecting the Font Information for the Form
The process is the same as for collecting the form field dimensions:
- open the Character panel (Window › Character)
- select a text block from your fonts template layer
- make a capture of the Character panel*
- repeat for each form field
*type cmd-shift-4 then space, then click on the Transform panel. You’ll find the capture on your Desktop.
Make a new text document, and go through the captures noting the information in the following format:
capture Helvetica convert to font-family: Helvetica;
Bold font-style: Bold;
size 16px font-size: 16rem;
leading 19.2px line-height: 19.2rem;
Adding the Field Names
To finish the code for the fonts, just add the field names and braces:
#contactName{
font-family: Helvetica;
font-style: Bold;
font-size: 16rem;
line-height: 192rem;
}
When done, you should have a list of six blocks, for:
- #contactName
- #contactEmail
- #contactBusiness
- #contactMessage
- #contactStatus
- #contactSendButton
Adding Font Information to the Script
In the Page Settings, add a third ADDITIONAL SCRIPT with the following values:
type: CSS
active: checked
load order: 3
name: fonts
content: [the list of blocks from the previous step]
Click Save and continue editing, then reload the page.
You should see that the form fields have the correct fonts.
Your fonts should be part of the page
To work correctly, the fonts you use in your form should be fonts that are already on the page. If necessary, add a hidden character with the correct font to make sure the font that it is included.
Svija Cloud Settings
The form text is set in the Languages settings in Svija Cloud:
Email parameters:
- Destination address: who will receive the email
- Email subject: the subject of the message
- Return address label: not used by this script
Contact form labels:
- Name: initial value of the name field
- Business: initial value of the business field
- Email: initial value of the email field
- Message: initial value of the message field
- Send button: initial value of the send button
Status messages:
- Initial value: initial value of status message
- While sending: not used
- Sending failed: not used
- Once sent: not used
- Once sent (alert): not used
Once you’ve configured these settings, your form is complete.
If It Didn’t Work
If your form does not display correctly, verify that
- the pound signs and semicolons are not missing from your CSS fields: # ;
- the left and top coordinates are not mixed up
- the width and height coordinates are not mixed up
- the font-family matches the SVG name in the font settings of Svija Cloud
- the Illustrator page contains at lease one example of each font used