Creating your first form

This is a quick start guide to get you up and running as quickly as possible. You will build out a simple Contact Us form, that will consist of a single page with a few questions. When submitted it will send an email receipt to the customer.

As this is your first form we'll keep it high level for now, don't worry though we'll cover everything in more detail in other parts of this user manual. We'll also include links to the relevant sections as we go along.

  1. Begin by logging into the control centre. The control centre is where you'll create and manage forms.

  2. After logging into the control centre, Click XForms Pro on the menu bar and then Click Forms. This is where the form you create will be listed. There are a few things we can do on this page.

  3. On the forms list view click Create New Form. You may see options for different versions of the form builders, if you do choose Use New Form Builder (recommended).

  4. After the page loads you'll be in the form builder, this is the part of XFP that you will use to build your forms. The first thing we need to do is give the form a title. Go ahead and give the form a title by typing 'Contact Us' in the title field.

  5. Next you'll need to assign a category, click the Assign Categories button to load up the category chooser. Choose a category from the list on the left hand side of the popover and then click the Add: {category} button to add the category. You can add more than one category. Once you've added a category it will appear on the right hand side of the popover. Click Apply Categories to close the popover.

    For more information on categories and why they're needed see Form Settings - Categories.

  6. Next we'll set some metadata, metadata allows search engines to understand the form and decide if its relevant or not. Click Assign Metadata. There is only one required field here, description. Type 'Contact the organisation' into the description field. Now click Assign Metadata to close the popover.

    For more information on metadata see Form Settings - Metadata.

  7. Don't worry about the other settings, they'll be covered later. For now just click Save.

  8. You're now in the form structure view. This is where you can see the pages that make up your form. Let's start by adding a page. Click Add Page Template and then click Create New.

    For more information on the form structure view see Form Structure.

  9. You're now in the page builder. The first thing you need to do is name the page. Type 'Reason to contact us' into the Title field.

    Pages that we create are by default shared with other administrators and can be used on other forms. As this is our first form let's keep things to ourselves for now and make the page specific to just our form. Click the toggle next to Form Specific, it will go green when enabled.

    Now click Proceed to close the popover.

    For more information on pages see Working with pages.

  10. Our form is going to have 3 questions on it; Name, Email and Reason for contact. To add a question to the page you need to Click, Hold and Drag the page element from the left hand panel to the drop area on the right hand side.

    Let's add a 'Text field' question to capture the name. Click on Text Field, hold the left mouse button down and drag the page element to the drop area on the right hand side and then let go of the mouse button. When you let go of the mouse button the left hand panel will change to reveal the settings for the page element. Each page element has different settings.

    For more information on the different page elements see Page Elements.

  11. In the left hand panel, enter 'Name' into the 'Question text' field.

    We're also going to set some validation to the question, click the toggle next to Validation to enable the drop down of validation routines. Here you can see the different validation options a question can have. The first validation in the list is 'Alphabetic' which seems a sensible choice for our 'Name' question, so leave it set to the that.

    We'll also want our customer to provide an answer to this question so we know how to address them when we contact them back. To make the question required, click the 'Required' toggle. As with other toggles it will go green when enabled.

    Now click 'Add Question' to add the question to the page. You'll see a preview of the question in the page.

  12. Now add a second Text Field in the same way as you did in the previous step but this time enter 'Email' into the question text field and set the validation to Email Address and also make this question required. Click Save to add the question to the page.

  13. For our third question we're going to add a Text Area. Enter 'Reason for contact' in the question text field and make the question required. Click Save.

  14. Now we have our page created we can go and add it to the our form, Click 'Return to Form Structure' button which can be found on the right hand side towards the top of the page.

  15. You're now back in the form designer and our newly created page can be seen in the panel on the left hand side. The page is available for use on the form but hasn't been added to the form yet. Let's correct that by dragging the page into our form structure. Click and hold the mouse button down whilst you drag the page towards the right hand side, once you are over the right hand panel let go of the mouse button to drop the page into the form.

  16. After dropping the page you're presented with the 'Add New Page' settings, form here we can change the page title and instructions text. Let's add some page instructions now, type into the Page Instructions field some instructions such as:

    If you would like to contact us, please fill in the form below. We aim to respond to email enquiries as quickly as possible but please allow two working days for a reply.

    Now click Save.

  17. Congratulations - your form now has its first page! Next we're going to setup the receipt email. Above the form structure diagram there are some tabs, click on the Rules tab to open the rules engine.

  18. Rules are where you will setup what happens when a customer submits your form. From here we can define integrations with Jadu CXM or Bartec Collective, Send an email or set the thank you page content amongst other options. Click the Create Rule button to create our first rule.

    For more information on the rules engine see Rules and templates.

  19. Now give the rule a name to help us identify it from our other rules, type 'Send receipt email' into the name field.

  20. Leave the When clause as 'User submits the form' we don't want to change that! But we do set the Then action to 'Send Email', select Send Email from the drop down list next to Then. This will load a template chooser. From the newly appearing 'using template' drop down select Create new.

  21. The create action template popover will appear after clicking Create new. This is where we will set the content of our email receipt. Give the template a title so we can identify it later. Type 'Email receipt' into the 'Template title' field.

    In the 'To' field we're going to set this to use the 'Email' question that we added to the form. Click the # Variable button to the right of the 'To' field. This will show the variable chooser. The variable chooser gives you access to form answers. Click 'Answer' next to the 'Email' question. The variable will now be inserted into the To address field for you.

    In the 'From' field enter a from address for the email to be sent from. For the example let's set it the '' where is the domain name of your site. (Tip - you can get this from the address bar at the top of your browser).

    With the To and From addresses set we can give the email receipt a subject. Type into the Subject field 'Thank you for contacting us' and type into the Content field

    Thank you for contacting us, we will be in touch soon regarding your query.

    Now click Save.

  22. The email template you just created will automatically be added to the rule. Now click Save on the rule to save the rule.

  23. Now your form is setup you'll want to publish it on the website. Click the Publish tab to open the publishing options.

  24. To make your form live click the toggle next to 'Live', again the toggle will go green when it's enabled. Congratulations - the form is now live. Test your form by clicking the 'View live' link which will open the form up in a new window.

results matching ""

    No results matching ""