Updated

Mailto Contact Form 1.0.2

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

Ask a Question...

Your email address will not be published. Required fields are marked *