If you ever need to create a new custom form on your website, the information below will help.
To set up the new form, first you need to create the content:
- Login to WordPress by adding ‘/sl-login/’ to the end of your website URL, and entering your login details
- Go to Forms > All Forms
- Add New
- Select the Template Field you'd like to add
Template fields explained
Textbox - This is a field used to capture details such as Name, Phone, Email.
Check Box - This allows you to add a set of options and then have the user check what is relevant.
List - This field is handy for allowing the user to select an office location for example. The field can be delegated a name and then the options appear as a dropdown menu.
Hidden Field - Will not be seen by the user on the front-end, this can include information for this form when submissions are being exported.
Submit - This field is required to allow the user to actually submit the form.
Anti-Spam - This can be a simple question, such as what's "What is thirteen minus 6?" and then you provide the answer. This prevents robots from crawling your site and completing fake submissions.
Timed Submit - This is similar to the submit button however, it allows you to set how long a user must wait to submit the form.
Textarea - Like a textbox field, but can accommodate more user input.
Password - This field is not supported by Siteloft.
Star rating - A Number of stars can be specified in relation to your service.
Calculation - This field is not supported by Siteloft.
Number - This allows you to set a range of values eg a price range. The user can nominate what price they are willing to receive information for around relevant listings.
Building the form
Having understood the building blocks, you can use a combination of them in your form depending on your requirements. The first name of the user, the user's email and the message would be necessary for a bare minimum contact form. So, add them to your form.
From the User Information Fields, click on First Name. The First Name field appears on the form on the right.
The label is "First Name". Note that if you had chosen to use a Textbox element, you would have had to change the label. Leave the placeholder blank.
From the User Information Fields, click on Email. The Email field after the First Name on the right. Check on Required under Restriction Settings.
From the template fields, click on Textarea for the message field. Change the label to Message. Check on Required under Restriction Settings.
From the template fields, click on Submit to add a submit field. Change the label to Send.
One of the tabs on the screen is the Preview tab. Click on this to preview your form on a new window. You will see something like this.
If you are happy with what you see, click on the blue save button to save the form. If you haven't already named your Contact form a popup appears asking you to give a name.
You have successfully created the contact form.
Alternately, there is a Contact Form that comes with the installation of the plugin. You can use this as is or customize this to your needs.
Click on Forms->All Forms on the left sidebar. You can see a form with the title Agent Contact. This is the default form. You can also see the Admin Contact Form that you just created.
From this screen, hover over the form title, and you can choose to Edit, Delete, Duplicate, Preview or View Submissions for each form.
Click on Edit to edit the form.
Emails & Actions
The second tab on the form editing screen is Emails & Actions. Once the form is built, click on this tab to enable actions to be taken based on certain events.
Click on the Add New button to add a new action.
Firstly. Specify an Action Name. For instance, once a user submits some details in a form, you may want to notify the admin of the site of this event. So, type Email to admin.
The next item is Type. Choose Email. The other options are to Redirect (redirect to a particular page) or Success Message (display a message indicating successful submission of form).
Click on the input box against From Name. From the list of fields and their IDs available, click on the First Name field.
From Address is similar; click on the input box and choose the email field. This can be filled with the Site Admin's email address.
Fill in a Subject and a Message in the next two input fields. You can use the form fields in the Email message. To insert a field, use the search box at the top of the rich text editor.
Check on the Submission CSV for the submission field values to be attached to the mail.
Under Advanced Settings, you can optionally specify the format of the email as HTML or Plain Text and also give the Reply-To, Cc and Bcc fields.
Click on Save. Click on Back to List to go to the Emails and Actions list.
You can add another action to show a message after successful submission by clicking on Add New.
Give Action Name as Submission Message. Choose the Type as Success Message. Type in an appropriate message and Save.
Settings
The third tab is Settings. Settings are grouped under two heads.
Display Settings
Here, you can specify if the Form Title should be displayed. You can add this form to any already existing page of your site by choosing a page from the dropdown box. You can choose to submit via AJAX, i.e., there will be no page refresh. Then you can choose to clear the fields after submission or even hide the form after a submission.
Restrictions
Under this, you can restrict that users should be logged in to view this form. If a user is not logged in, you can display a custom message. You can also limit the number of submissions that you want the form to accept. When the limit is reached, you can display a custom message.
Contact Page Creation
To create a Contact Page with your contact form, click on Forms->All Forms from left sidebar. Copy the Shortcode against your form.
Click on Pages->Add New on the left side bar to create a new page. Paste the copied shortcode into the body of this page.
Now, type a title for this page - e.g Contact us
Click on Publish to publish the page.
Click on the Permalink to see the page. You can see that your contact page is ready.
Verifying the Contact Form
To verify if it works, type out an imaginary name, email id and message and click on the Send button below.
If you give an invalid email address, you will get an error message.
If all fields are valid, your submission will be accepted.
Submissions
Now, go back to the dashboard, Click on Forms->All Forms, and Edit Admin Contact Form. Click on Submissions, the last tab of the screen. You will see the message that was submitted.
All messages that are submitted for each form will be collected here. You can Edit, Export, Trash or Duplicate the messages.
You can also download these submissions, search through them, perform bulk actions like export or filter them based on date.
Other options
By clicking on Forms->Import/Export on the left side bar, you can import or export forms or your favourite fields.
You can also change some of the settings that are set across forms, like date format and Currency symbol, by clicking on Forms->Settings.
Creating a contact form for your site is very simple. However, I have explained all the building blocks available so that you can create other types of forms.