What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Add to Calendar widget

    Asked by charitychallenge on May 26, 2015 at 11:22 PM

    Searching your forum, I don't think you have an Add to Calendar widget, but this would be a very handy add-on.

    In the meantime, can you suggest a way to manually integrate the following one, or alternatively, any other suggestions?

    https://addthisevent.com

    This appears to have very good support for adding an entry to a user's Outlook, Google, Apple, Facebook etc Calendars.

    According to their notes, the following components are required:

    Step 1:

     

    Copy and paste the code snippet into the bottom of your pages, between the <head> and the </head> tags. If your website uses templates you only need to copy the code into your main template.

     

    <!-- AddThisEvent -->
    <script type="text/javascript" src="https://addthisevent.com/libs/1.6.0/ate.min.js"></script>

     

    Step 2:

     

    Select the country / region where the event is located:

     

     

     

    Step 3:

     

    Copy and paste the code snippet into your page any place. You can add as many links on your website as you prefer.
    All link properties are not mandatory, take a look in the Parameters section.

     

     

    <div title="Add to Calendar" class="addthisevent">
        Add to Calendar
        <span class="start">06/18/2015 09:00 AM</span>
        <span class="end">06/18/2015 11:00 AM</span>
        <span class="timezone">Australia/Sydney</span>
        <span class="title">Summary of the event</span>
        <span class="description">Description of the event</span>
        <span class="location">Location of the event</span>
        <span class="organizer">Organizer</span>
        <span class="organizer_email">Organizer e-mail</span>
        <span class="facebook_event">https://www.facebook.com/events/703782616363133</span>
        <span class="all_day_event">false</span>
        <span class="date_format">MM/DD/YYYY</span>
    </div>
     
    -------------

    They also have Advanced Settings and Themes (for button choice)

     
     

     

    calendar widget template timezone analytics settings
  • Profile Image
    JotForm Support

    Answered by Charlie on May 27, 2015 at 12:56 AM

    Hi,

    Thank you for sharing your inputs on this.

    To confirm you wish to add an event to different calendar platforms like Google Calendar, Outlook, etc... Is that right? If you wish to use the widget "AddThisEvent" to your form, that is possible by injecting it directly to your Form's full source code. But you'll need to have your own landing web page for this because you'll embed these codes on it.

    If you are looking to add an event to your Google Calendar when a submission has been done, you can try integrating JotForm to Google Calendar via Zapier. Here' the page to it, you'll see different trigger events and actions that you can do between JotForm and Google Calendar: https://zapier.com/zapbook/google-calendar/jotform/.

    I hope this helps. Please do let us know if you need more information on this.

    Thank you.

  • Profile Image

    Answered by charitychallenge on May 27, 2015 at 02:01 AM

    Thanks for your reply.

    We typically use Jotform to create event registration forms and therefore would like to provide those registrants who complete the form a button (on the form) to be able to add an appt (i.e. the event date and details) into their Calendar of choice.

    So your first idea is correct - a widget like "AddThisEvent" would allow this.  However, we do not typically use external landing pages, so we would need to embed all code via Jotform.  But it sounds like this won't work from your comment:

    "If you wish to use the widget "AddThisEvent" to your form, that is possible by injecting it directly to your Form's full source code. But you'll need to have your own landing web page for this because you'll embed these codes on it."

    I'm assuming you mean that the <!-- AddThisEvent --> script is placed in the Jotform full source code, but you are also saying that all the other code <span class> cannot go into Jotform and would be required to be embeded from an external calling page.

    Can you please clarify?

    Also, if the above is the case and cannot be achieved based on how we operate our forms (no external landing page), do you believe an Add to Calendar widget such as AddThisEvent could be added to the Jotform wishlist?

  • Profile Image

    Answered by Sammy on May 27, 2015 at 04:51 AM

    From the above you will have to download the full source code of your form and incorporate the add event widget into the HTML.

    The code in the span can be added but if the widget depends on external JavaScript it wont work correctly since one cant embed JavaScript in the online version of the form.

     

    We can submit a feature request for the suggested widget, the availability timeline will be dependent on the developers milestones delivery.

     

  • Profile Image

    Answered by charitychallenge on May 27, 2015 at 06:10 AM

    "From the above you will have to download the full source code of your form and incorporate the add event widget into the HTML."

     

    What do you mean by "download"?  Are you saying that I copy the full source of the form, insert the additional code and then paste the all source back in?  And obviously this is subject to whether the widget depends on external Javascript.  I will also look for other complete solutions that include all source, but just checking that you are saying I can download and update the full Jotform form source and then paste it back in somewhere in Jotform?

     

  • Profile Image
    JotForm Support

    Answered by Boris on May 27, 2015 at 06:49 AM

    I am sorry, but you can not upload custom form source code to JotForm, especially one that contains scripts.

    What my colleagues are saying is that you can implement this widget feature for yourself, for example by hiring a third-party developer to do it for you. You can achieve this by downloading the Source Code of your JotForm form. Then, you or your developer would need to add the functionality to the downloaded source, and copy/paste that form code to your own website - not on JotForm.

    I would advise you to please consider the workaround that our colleague Charlie had suggested as an easier alternative, to try using Zapier to integrate your JotForm to your Google Calendar, if that is what you are ultimately trying to achieve.

    I hope this clarified any confusion. Thank you.

  • Profile Image

    Answered by charitychallenge on May 27, 2015 at 06:57 AM

    " would advise you to please consider the workaround that our colleague Charlie had suggested as an easier alternative, to try using Zapier to integrate your JotForm to your Google Calendar"

    Thank you but as I explained, that is not what I want to achieve.  The forms are for Event Registration purposes, so the date/time and event details are quite meaningful.

    We therefore want people to click on a button on the form and have the widget's date/time/details go into their calendar, be it Outlook, Google, Apple or other popular Calendars.

    Anyway, from what you explained, what I am after is not able to be done natively unless I embed the form separately from an external page which I am not doing, so I'll leave it at that.

  • Profile Image
    JotForm Support

    Answered by Boris on May 27, 2015 at 07:12 AM

    Yes, that is correct, we do not have such a feature available at this time.

    Thank you for your understanding. We strive to add many useful features to our JotForm forms, and I hope to see this feature one day in our collection, for everyone to use.

    Thank you. Please contact us again if you have any other questions or if you need help with your forms, we are here to help.

    Kind regards,
    Boris

  • Profile Image

    Answered by grade4pagasa on August 19, 2016 at 12:45 PM

    Hi everyone. 

    I found a free and awesome 3rd-party widget that has the add to calendar functionality - the AddToCalendarAddToCalendar is used for event page on website and email. You can create event button on page and allow guests to add this event to calendar. You can also generate static link to this event for the email newsletters, docs and blogs. AddToCalendar supports:

    - Outlook (.ics)
    - Google Calendar 
    - Apple (.ics)
    - Yahoo 

     

    USES:

    - allow users to save event from booking / appointment / class registration
    - include add events in newsletters or email

     

    STEPS:

    For the AutoResponder (or emails in general), we cannot use the button-dropdown effect since web-email & clients strip off styling and javascript codes (based on my searches). If we need to include an AddToCalendar functionality in our AutoResponser:

    1.) go to addtocalendar.com > scroll to the bottom and

    2.) click the Just fill in the form button to enter your event details (fig. 1).

    3.) click the Update then Copy button once you're done

    4.) paste the copied code snippet in your AutoResponder 

    You can then try the submitting an entry to test the AddToCalendar widget once you get your email autoresponder. 

     

    Additional info:

    * If you have your own Thank You page, a blog or website, you can use the icons, glow button, and / or classic dropdown button (fig. 2) since injecting javascript codes is allowed there.

    * If you click iCalendar or Outlook, an .ics file will be downloaded (desktop).

    A screencast is provided at the bottom. 

    You can try a working demo I did here

    Note: use an email address you can access. Otherwise, you won't be able to test the AddToCalendar widget inside the AutoResponder.

    Hope this helps.

     

    Randy, fellow JotForm user. 

     

    -------------------------------------------------

    P.S. 

    JotForm just announced the release of their newest feature - AutoResponder attachments

    With this, you can opt to attach .ics files created either in Apple Mail or Outlook. Gmail currently displays the ics file and gives the option to save the event to your calendar.

     

    -------------------------------------------------

     

    fig. 1

     

     

    fig. 2 

     

    fig. 3 

  • Profile Image

    Answered by Irshad on August 19, 2016 at 02:07 PM

    @grade4pagasa, Thanks for sharing those details. 

    If you face any issue or need assistance, feel free to revert back.