Updated

Contact Form Script · Note Text

This might be easier to read in a web page: https://tech.svija.love/linked/contact-form-script

This contact form will enable a visitor to compose an email from your contact page.

When the visitor clicks send, the email will open in the user’s preferred email program to be sent.

This technique avoids the necessity of SMTP and domain-name configuration.

You can use a traditional contact form with Svija, but this script is not it.

How to use your contact form:

Activate this form by going to any page and adding the script Contact Form.

Scripts are the 7th black bar, just after ILLUSTRATOR SVG FILES.

The form is already functional; everything that follows explains how to make it look the way you want.


Verify that the script is loaded

When you reload the page, you should see the form field text in the upper left corner of your page.

This means that the script is working.


Making the form easy to see

Go into the Page settings for your contact page, and add an ADDITIONAL SCRIPT (at the very bottom):

      type: body JS
    active: checked
load order: 1
      name: debugging
   content: contact_debug=1;

Click Save and continue editing.

Reload the contact page — you should now see a faint box for each field, containing the name of the field.


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 Template layer called fields containing rectangles representing the form fields
  • create a Template layer called fonts containing sample text for 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.

Tip: turn on Snap to Pixel in the View menu and the next step will be much easier.


Collecting the Illustrator form-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.

Make a new text document, and go through the captures noting the information in the following format:

capture X:140 W:918   convert to   left:14.0rem;  width:91.8rem;
        Y:950 H: 21                 top:95.0rem; height: 2.1rem;

Notice that the values are divided by 10, for this reason.

The text in this example is aligned for readability, but the spacing has no effect.


Adding the Field Names

To finish the code for the dimensions, just add the field names and braces:

#contactName{
left:14.0rem;  width:91.8rem;
 top:95.0rem; height: 2.1rem;
}

When done, you should have a list of six blocks, for:

  • #contactName
  • #contactEmail
  • #contactBusiness
  • #contactMessage
  • #contactStatus
  • #contactSendButton

Adding the Placement Information to the Script

In the Page Settings, add a second ADDITIONAL SCRIPT with the following values:

      type: CSS
    active: checked
load order: 2
      name: placement
   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 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:   1.6rem;
        leading 19.2px           line-height: 1.92rem;

Notice that the values are divided by 10, for this reason.


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:   1.6rem;
  line-height: 1.92rem;
}

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 Admin Settings

The form text is set in the Languages settings in Svija Admin:

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 Admin
  • the Illustrator page contains at lease one example of each font used

Leave a Reply

Your email address will not be published.