• Roundup WP
  • Products
    • Registrations for the Events Calendar Pro
      • Buy Now
      • Setup (Pro)
      • Demo
    • Stripe Extension
      • Buy Now
      • Setup
    • Mailchimp Extension
      • Buy Now
      • Setup
    • Mollie (iDEAL) Extension
      • Buy Now
      • Setup
    • Discount Codes Extension
      • Buy Now
      • Setup
  • Support
    • FAQs and Troubleshooting
    • Codex
    • Contact Support
  • My Account
  • Get Pro

Guide to Creating and Editing Forms

Posted on April 25, 2017

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.

Form Builder Overview

The form builder can be reached through a button on the “Form” tab labeled “Create Forms and Fields”. You can also navigate to the form builder directly using he menu item “All Forms” under the “Registrations” menu. The form builder allows you to create and edit forms and form fields. Each event can be assigned a different form.

Guide to using Form builder

  1. Create New Fields
    Click the “Create New Field” button to reveal settings for a new field. You can create several types of fields. Take a look at the Create Form Fields section for more information.
  2. Edit Existing Fields
    Clicking the pencil icon next to an existing field will allow you to make edits. Changes affect all forms that use the field.
  3. Add a Field To A Form
    Clicking the left chevron arrow icon next to an existing field will add the field to your form. Reorder the fields in the form by clicking and dragging once it’s moved.
  4. Remove a Field From a Form
    Clicking the trash icon next to a field that has been added to the form will remove it from the form. The field will still be available for other forms.
  5. Advanced Form Options
    Clicking the “Options” button will open a modal to edit more advanced form settings like what fields are required. Take a look at the Form Options section for more information.
  6. Save Changes and Edit Form Label
    Save your changes to see any modifications for your event forms. Clicking the pencil icon next to the form title will allow you to change the name of the form.
  7. Create New Forms
    Use the items at the top of the page to create a new form, duplicate an existing form, and change which form you are editing.

Create Form Fields

You can create as many form fields as you’d like to use in your forms. Each form field is available for use in all of your forms so making changes to a form field will also make the same change to every form that uses that field.

Create new field

Form field create overview

  1. Edit a Form
    Click the gray button with the pencil icon on the right side of a field to toggle options for that field.
  2. Select a Field Type
    Depending on the type of response needed from your registrants, you can select the field type you would like to use. See the Field Types section below.
  3. Configure Field Specific Options
    Each field type has unique options that fit with the type of response expected from registrants.
  4. Add a Cost to a Selection
    Some form field types can have a cost attached to them when selected. Read our guide for form fields costs for more details.
  5. Advanced Field Options
    Clicking the “Show Advanced” button will reveal additional settings for the field like the validation type, costs, and HTML to be added after the field.

Form Field Types

There are several form field types that can be used in your forms. This includes some special fields that have been created by default.

Special Fields

  1. First and Last
    These fields are used to identify the registration in the backend as well as the default attendee list.
  2. Email
    The email field is used for all emails sent to the registrant. It’s required to be in your form if you plan to have emails sent to your registrants.
  3. Guests
    The response in this field counts toward the registration limit for an event.
  4. Phone
    This field will be specially formatted based on your chosen phone nunber format.
  5. What is (recaptcha)
    This field can be used as a simple math question or Google’s recaptcha “I am not a robot” challenge that must be correct for the form to submit.

Custom Field Types

  1. Text
    For open ended responses of words or phrases.
  2. Number
    For quantities of something
  3. Select
    Dropdown list an attendee can select from.
  4. Multiple Checkbox
    List of options that allows for multiple selections.
  5. Radio
    List of options an attendee can choose one of
  6. Single Checkbox
    Opt-in field that works for terms and conditions acceptance.
  7. Textarea
    For longer open ended responses of a paragraph or more.
  8. File Upload
    For uploading files such as images or spreadsheets.
  9. Date
    Uses an interactive calendar to select dates.

Form Options

Each form can have unique settings that will apply to any event’s registration that it’s assigned to. If your event uses our connected guests feature, you can configure what form fields are available and required for the main registration and the connected guest.

Individual Form Options

  1. Configure the “Main” Registration Fields
    Fields for the first “main” registration
  2. Configure the “Connected Guest” Registration Fields
    Fields for each additional “connected guest”
  3. Toggle Visible and Required Fields
    Toggle whether or not the form field appears for the “main” registration (green button) and whether or not it is required (blue)

In this modal, you can also configure the attendee list, attendance count message, and the message that appears at the top of the registration form. Switch to the “Display” tab to see these options.

Display options

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

 


 

Field Customization Examples

Using some special settings for a field along with some JavaScript and CSS you can create some customized fields with special functionaliy.

Repeat Email Field

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

  1. Create a new field using the button on the bottom right
  2. Change the label to “Repeat Email” or something similar
  3. Change the “Validation” to “Email”
  4. Change the error message to something like “Email does not match”
  5. Add the following snippet of html to the appropriate field (this allows the JavaScript to work)
  6. Save your changes, add it to the form, make it a “required” fieldRepeat Email Settings
  7. After adding this field to the form, click and drag the field so it appears in the form just after the “Email” field.
  8. 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:

  1. Create a new field using the button on the bottom right
  2. Choose “Radio” for the feild type
  3. Enter your selection choices with the last field being the “Other” option
  4. Add the following snippet of html to the appropriate field (this allows the JavaScript to work)
  5. Save your changes, add it to the form, make it a “required” field
  6. 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:

  1. 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:
  2. Add this to the “HTML after field” setting for each field you wish to reveal:
  3. Add this to the “Custom JavaScript” field on the “Form” tab:
    var revealValue = 'Yes',
        revealerID = 'rtec-revealer',
        hiddenClass = 'rtec-hidden';
    
    var $revealer = $('#' + revealerID).closest('.rtec-form-field'),
        $hidden = $('.' + hiddenClass);
    
    $hidden.each(function() {
    	$(this).closest('.rtec-form-field').hide();
    	ruAddNaField( $(this).closest('.rtec-form-field') );
    });
    
    $revealer.find('select').change(function() {
    	if ($(this).val() === revealValue){
    		$hidden.each(function() {
    			$(this).closest('.rtec-form-field').slideDown();
    			ruRemoveNaField( $(this).closest('.rtec-form-field') );
    		});
    	} else {
    		$hidden.each(function() {
    			$(this).closest('.rtec-form-field').slideUp();
    			ruAddNaField( $(this).closest('.rtec-form-field') );
    
    		});
    	}
    });
    function ruAddNaField( $field ) {
    	if ($field.find('.ru-na-field').length) {
    		return;
    	}
    	if ($field.attr('data-rtec-type') === 'select') {
    		$field.find('select').append('<option class="ru-na-field" value="N/A" selected>N/A');
    	} else if ($field.attr('data-rtec-type') === 'radio') {
    		$field.find('.rtec-checkbox-option-wrap').append('<input type="radio" name="'+$field.find('.rtec-checkbox-option-wrap input').first().attr('name')+'" class="ru-na-field" value="N/A" checked>');
    	} else if ($field.attr('data-rtec-type') === 'checkbox') {
    		$field.find('.rtec-checkbox-option-wrap').first().append('<input type="checkbox" name="'+$field.find('.rtec-checkbox-option-wrap input').first().attr('name')+'" class="ru-na-field" value="N/A" checked>');
    	} else {
    		if (typeof $field.find('input').attr('data-rtec-valid-email') !== 'undefined') {
    			$field.find('.rtec-input-wrapper input').val('noemailgiven@no.com');
    		} else {
    			$field.find('.rtec-input-wrapper input').val('N/A');
    		}
    		$field.find('.rtec-input-wrapper textarea').val('N/A');
    	}
    }
    function ruRemoveNaField( $field ) {
    	$field.find('.ru-na-field').remove();
    	if ( $field.find('.rtec-input-wrapper input').length && ($field.find('.rtec-input-wrapper input').val() === 'N/A' || $field.find('.rtec-input-wrapper input').val() === 'noemailgiven@no.com') ) {
    		$field.find('.rtec-input-wrapper input').val('');
    	}
    	if ( $field.find('.rtec-input-wrapper textarea').length && ($field.find('.rtec-input-wrapper textarea').val() === 'N/A' || $field.find('.rtec-input-wrapper textarea').val() === 'noemailgiven@no.com') ) {
    		$field.find('.rtec-input-wrapper textarea').val('');
    	}
    }
Registrations for the Events Calendar Pro logo
Make managing your events pain free Our powerful backend features make editing, contacting, and exporting registrants simple. Learn More