Guide to Creating and Editing Forms

The “Pro” version has several additional options for forms and form fields you can use in your registrations. Use this guide for help with how to use the basic form builder.

Basic Set Up

The form builder can be reached through a link on the “Form” tab labled “Create/edit registration forms”. Here you can make changes to the default form, add new forms that you can assign to specific events, and create and modify form fields. Clicking on the edit icon will reveal forms and form fields to edit the nearby elements.

Make sure to save your changes and save your form before leaving the page.

Guide to using Form builder

Creating a New Form

Click on the dropdown select box near the top of the page to select a form to edit. Select “Create a new form” to create a form from scratch. After selecting, click the “Go” button. You can now add existing fields from the right hand column by clicking on the left arrow button. Fields included in the form will be highlighted. If you want the field to be required for that specific form, check the box to do so.

Creating a New Field

If you need a new custom field, click on the big green button at the bottom of the right hand side of the page labled “Create New Field”. A new field will be added to the bottom of the list with a default label “Label”. The options for this field will automatically drop down for you to configure. Make sure to save your new field. New fields added to a form will automatically be saved as well.

Editing New or Existing Fields

Click on the edit icon (see first screenshot) next to the field to make changes to the label, field type, validation rules, and other options. Certain fields will only be available for certain field types.

What Field Types are Available for Custom Fields?

Text – For open ended responses of words or phrases
Number – For quantities of something
Select – Dropdown list an attendee can select from
Checkbox – List of options an attendee can choose multiple of
Radio – List of options an attendee can shooe one of
Textarea – For longer open ended responses of a paragraph or more

Assign Your New Form to an Event

You can assign your new form to be used for an event by visiting the WordPress dashboard. Then click on “Events”. Find the event you would like to assign the form to and click “Edit”. Scroll down the page to find the setting to change the registration form

Special Fields

Terms and Conditions Checkbox

To create a “accept terms and conditions” type of field, follow these steps:

Create a new field using the button on the bottom right
Change the label to “Terms and Conditions” or something similar
Change the “type” setting to a checkbox
Remove all but one option
Give that option the name of “I accept the terms and conditions”
Save your changes, add it to the form, make it a “required” field

Link to terms and conditions
You can add a link to a “terms and conditions page” using the html field at the bottom of the field options. This html will appear right below the form field on the front end. Change the “href” to link to whatever page you would like:

<a href="https://example.com/terms-and-conditions" target="_blank" rel="noopener noreferrer">view terms and conditions</a>

Screenshot of field in a form

Repeat Email Field

To create a field that asks the attendee to verify the email address by typing it again, follow these steps:

Create a new field using the button on the bottom right
Change the label to “Repeat Email” or something similar
Change the “Validation” to “Email”
Change the error message to something like “Email does not match”
Add the following snippet of html to the appropriate field (this allows the JavaScript to work)
Save your changes, add it to the form, make it a “required” field
After adding this field to the form, click and drag the field so it appears in the form just after the “Email” field.

On the “Form” tab, add the following to the “Custom JavaScript” area:

var repeatInput = $('#rtec_repeat_email').closest('.rtec-form-field').find('input'),
    emailInput = $('input[name=rtec_email]');

function rtecEmailsMatch() {
  var repeatVal = repeatInput.val(),
      emailVal = emailInput.val();
  if (repeatInput.val() !== emailInput.val()) {
      var $formField = repeatInput.closest($('.rtec-input-wrapper'));
      if (!$formField.find('.rtec-error-message').length) {
          $formField.append('<p class="rtec-error-message" role="alert">'+repeatInput.closest($('.rtec-form-field')).attr('data-rtec-error-message')+'</p>');
      }
      repeatInput.attr('aria-invalid','true');
  } else {
      repeatInput.closest($('.rtec-input-wrapper')).find('.rtec-error-message').remove();
      repeatInput.attr('aria-invalid','false');
  }
}

$('.rtec-form').submit(function() {
    rtecEmailsMatch();
});

repeatInput.keyup(function() {
    rtecEmailsMatch();
});
emailInput.focusout(function() {
    rtecEmailsMatch();
});

*Note – The form will still submit if the fields don’t match and the attendee has entered valid email addresses in both fields though having the “Repeat Email” field should help attendees avoid entering an incorrect email address.

Radio Fields with a Text Field for “Other”

To create a radio select field with the last option as an “Other” field. Follow these steps:

Create a new field using the button on the bottom right
Choose “Radio” for the feild type
Enter your selection choices with the last field being the “Other” option
Add the following snippet of html to the appropriate field (this allows the JavaScript to work)
Save your changes, add it to the form, make it a “required” field

On the “Form” tab, add the following to the “Custom JavaScript” area:

var pleaseSpecify = 'Please enter your choice here',
    $fieldWrapper = $('#rtec_add_other_field').closest('.rtec-form-field'),
    $lastOption = '',
    inputName = '',
    disabledInput = '',
    $allOptions;

if ($fieldWrapper.find('input[type=radio]').length) {
  $allOptions = $fieldWrapper.find('input[type=radio]')
  $lastOption = $fieldWrapper.find('.rtec-input-wrapper input[type=radio]').last();
  inputName = $fieldWrapper.find('.rtec-input-wrapper input[type=radio]').attr('name');
  disabledInput = inputName + '_na';
}


if ($lastOption !== '') {
  $allOptions.on('change',function() {
    if($lastOption.is(':checked')) {
      $allOptions.attr('name',disabledInput);
      $fieldWrapper.find('.rtec-input-wrapper').append('<input id="rtec-the-new-other" type="text" placeholder="'+pleaseSpecify+'" name="'+inputName+'">');
    } else {
      $allOptions.attr('name',inputName);
      $fieldWrapper.find('#rtec-the-new-other').remove();
    }
  });
}

Conditionally Revealed Fields

To hide a field unless a user selects a particular option on a prior field, follow the steps below:

Add this to the “HTML after field” setting for the field that will reveal the other field when “Yes” is selected:

Your settings will look something like this:
Add this to the “HTML after field” setting for each field you wish to reveal:

Add this to the “Custom JavaScript” field on the “Form” tab:

var revealValue = 'Yes',
$revealer = $('#rtec-revealer').closest('.rtec-form-field');

$('.rtec-hidden').each(function() {
   $(this).closest('.rtec-form-field').hide();
});

$revealer.find('select').change(function() {
 if ($(this).val() === revealValue){
   $('.rtec-hidden').each(function() {
     $(this).closest('.rtec-form-field').slideDown();
   });
 } else {
   $('.rtec-hidden').each(function() {
     $(this).closest('.rtec-form-field').slideUp();
   });  
 }
});