Recherche avancée

Médias (91)

Autres articles (92)

  • MediaSPIP 0.1 Beta version

    25 avril 2011, par

    MediaSPIP 0.1 beta is the first version of MediaSPIP proclaimed as "usable".
    The zip file provided here only contains the sources of MediaSPIP in its standalone version.
    To get a working installation, you must manually install all-software dependencies on the server.
    If you want to use this archive for an installation in "farm mode", you will also need to proceed to other manual (...)

  • Multilang : améliorer l’interface pour les blocs multilingues

    18 février 2011, par

    Multilang est un plugin supplémentaire qui n’est pas activé par défaut lors de l’initialisation de MediaSPIP.
    Après son activation, une préconfiguration est mise en place automatiquement par MediaSPIP init permettant à la nouvelle fonctionnalité d’être automatiquement opérationnelle. Il n’est donc pas obligatoire de passer par une étape de configuration pour cela.

  • HTML5 audio and video support

    13 avril 2011, par

    MediaSPIP uses HTML5 video and audio tags to play multimedia files, taking advantage of the latest W3C innovations supported by modern browsers.
    The MediaSPIP player used has been created specifically for MediaSPIP and can be easily adapted to fit in with a specific theme.
    For older browsers the Flowplayer flash fallback is used.
    MediaSPIP allows for media playback on major mobile platforms with the above (...)

Sur d’autres sites (4310)

  • VP8 And FFmpeg

    18 juin 2010, par Multimedia Mike — VP8

    UPDATE, 2010-06-17 : You don’t need to struggle through these instructions anymore. libvpx 0.9.1 and FFmpeg 0.6 work together much better. Please see this post for simple instructions on getting up and running quickly.

    Let’s take the VP8 source code (in Google’s new libvpx library) for a spin ; get it to compile and hook it up to FFmpeg. I am hesitant to publish specific instructions for building in the somewhat hackish manner available on day 1 (download FFmpeg at a certain revision and apply a patch) since that kind of post has a tendency to rise in Google rankings. I will just need to remember to update this post after the library patches are applied to the official FFmpeg tree.

    Statement of libvpx’s Relationship to FFmpeg
    I don’t necessarily speak officially for FFmpeg. But I’ve been with the project long enough to explain how certain things work.

    Certainly, some may wonder if FFmpeg will incorporate Google’s newly open sourced libvpx library into FFmpeg. In the near term, FFmpeg will support encoding and decoding VP8 via external library as it does with a number of other libraries (most popularly, libx264). FFmpeg will not adopt the code for its own codebase, even if the license may allow it. That just isn’t how the FFmpeg crew rolls.

    In the longer term, expect the FFmpeg project to develop an independent, interoperable implementation of the VP8 decoder. Sometime after that, there may also be an independent VP8 encoder as well.

    Building libvpx
    Download and build libvpx. This is a basic ’configure && make’ process. The build process creates a static library, a bunch of header files, and 14 utilities. A bunch of these utilities operate on a file format called IVF which is apparently a simple transport method for VP8. I have recorded the file format on the wiki.

    We could use a decoder for this in the FFmpeg code base for testing VP8 in the future. Who’s game ? Just as I was proofreading this post, I saw that David Conrad has sent an IVF demuxer to the ffmpeg-devel list.

    There doesn’t seem to be a ’make install’ step for the library. Instead, go into the overly long directory (on my system, this is generated as vpx-vp8-nopost-nodocs-generic-gnu-v0.9.0), copy the contents of include/ to /usr/local/include and the static library in lib/ to /usr/local/lib .

    Building FFmpeg with libvpx
    Download FFmpeg source code at the revision specified or take your chances with the latest version (as I did). Download and apply provided patches. This part hurts since there is one diff per file. Most of them applied for me.

    Configure FFmpeg with 'configure --enable-libvpx_vp8 --enable-pthreads'. Ideally, this should yield no complaints and ’libvpx_vp8’ should show up in the enabled decoders and encoders sections. The library apparently relies on threading which is why '--enable-pthreads' is necessary. After I did this, I was able to create a new webm/VP8/Vorbis file simply with :

     ffmpeg -i input_file output_file.webm
    

    Unfortunately, I can’t complete the round trip as decoding doesn’t seem to work. Passing the generated .webm file back into FFmpeg results in a bunch of errors of this format :

    [libvpx_vp8 @ 0x8c4ab20]v0.9.0
    [libvpx_vp8 @ 0x8c4ab20]Failed to initialize decoder : Codec does not implement requested capability
    

    Maybe this is the FFmpeg revision mismatch biting me.

    FFmpeg Presets
    FFmpeg features support for preset files which contain collections of tuning options to be loaded into the program. Google provided some presets along with their FFmpeg patches :

    • 1080p50
    • 1080p
    • 360p
    • 720p50
    • 720p

    To invoke one of these (assuming the program has been installed via ’make install’ so that the presets are in the right place) :

     ffmpeg -i input_file -vcodec libvpx_vp8 -vpre 720p output_file.webm
    

    This will use a set of parameters that are known to do well when encoding a 720p video.

    Code Paths
    One of goals with this post was to visualize a call graph after I got the decoder hooked up to FFmpeg. Fortunately, this recon is greatly simplified by libvpx’s simple_decoder utility. Steps :

    • Build libvpx with --enable-gprof
    • Run simple_decoder on an IVF file
    • Get the pl_from_gprof.pl and dot_from_pl.pl scripts frome Graphviz’s gprof filters
    • gprof simple_decoder | ./pl_from_gprof.pl | ./dot_from_pl.pl > 001.dot
    • Remove the 2 [graph] and 1 [node] modifiers from the dot file (they only make the resulting graph very hard to read)
    • dot -Tpng 001.dot > 001.png

    Here are call graphs generated from decoding test vectors 001 and 017.


    Like this, only much larger and scarier (click for full graph)


    It’s funny to see several functions calling an empty bubble. Probably nothing to worry about. More interesting is the fact that a lot of function_c() functions are called. The ’_c’ at the end is important— that generally indicates that there are (or could be) SIMD-optimized versions. I know this codebase has plenty of assembly. All of the x86 ASM files appear to be written such that they could be compiled with NASM.

    Leftovers
    One interesting item in the code was vpx_scale/leapster. Is this in reference to the Leapster handheld educational gaming unit ? Based on this item from 2005 (archive.org copy), some Leapster titles probably used VP6. This reminds me of finding references to the PlayStation in Duck/On2’s original VpVision source release. I don’t know of any PlayStation games that used Duck’s original codecs but with thousands to choose from, it’s possible that we may find a few some day.

  • FFmpeg Concatenation Command Fails in Flutter App

    18 février 2024, par Petro

    I'm developing a Flutter application where I need to concatenate several images into a single video file using FFmpeg. Despite following the recommended practices and trying multiple variations of the FFmpeg command, all my attempts result in failure with an exit code of 1.

    


    FFMPEG Version : ffmpeg_kit_flutter: ^6.0.3-LTS

    


    All of the files are present when this happens...
enter image description here

    


    Environment :
Flutter app targeting Android
Using ffmpeg-kit-flutter for FFmpeg operations

    


    Objective :
To concatenate multiple images stored in the app's file system into a video.

    


    Code Snippet :
I'm generating a list of image paths, writing them to a file (ffmpeg_list.txt), and using that file with FFmpeg's concat demuxer. Here's a simplified version of my code :

    


    Future<void> _createVideoFromImages() async {&#xA;  final Directory appDir = await getApplicationDocumentsDirectory();&#xA;  final Uuid uuid = Uuid();&#xA;  final String videoFileName = uuid.v4();&#xA;  final String outputPath = &#x27;${appDir.path}/$videoFileName.mp4&#x27;;&#xA;  &#xA;  final Directory tempImageDir = await Directory(&#x27;${appDir.path}/tempImages&#x27;).create();&#xA;  final StringBuffer ffmpegInput = StringBuffer();&#xA;  int index = 0;&#xA;&#xA;  for (var image in _images) {&#xA;    String newFileName = &#x27;img${index&#x2B;&#x2B;}${Path.extension(image.path)}&#x27;.replaceAll(&#x27; &#x27;, &#x27;_&#x27;);&#xA;    final String newPath = &#x27;${tempImageDir.path}/$newFileName&#x27;;&#xA;    await image.copy(newPath);&#xA;    ffmpegInput.writeln("file &#x27;$newPath&#x27;");&#xA;  }&#xA;&#xA;  final String listFilePath = &#x27;${appDir.path}/ffmpeg_list.txt&#x27;;&#xA;  await File(listFilePath).writeAsString(ffmpegInput.toString());&#xA;&#xA;  if(await File(listFilePath).exists()) {&#xA;    String ffmpegCommand = "-v verbose -f concat -safe 0 -i $listFilePath -vsync vfr -pix_fmt yuv420p -c:v libx264 -r 30 $outputPath";&#xA;    // Additional commands tried here...&#xA;    await FFmpegKit.execute(ffmpegCommand).then((session) async {&#xA;      // Error handling code...&#xA;    });&#xA;  }&#xA;}&#xA;&#xA;Result Logs:&#xA;I/flutter: file exists at /data/user/0/com.example.app/app_flutter/ffmpeg_list.txt&#xA;I/flutter: FFmpeg command: -v verbose -f concat -safe 0 -i /data/user/0/com.example.app/app_flutter/ffmpeg_list.txt -vsync vfr -pix_fmt yuv420p -c:v libx264 -r 30 /data/user/0/com.example.app/app_flutter/58fdf92b-47b0-49d1-be93-d9c95870c733.mp4&#xA;I/flutter: Failed to create video&#xA;I/flutter: FFmpeg process exited with:1&#xA;I/flutter: FFmpeg command failed with logs: ffmpeg version n6.0 Copyright (c) 2000-2023 the FFmpeg developers...&#xA;</void>

    &#xA;

    Attempts :&#xA;-Simplified the FFmpeg command by removing -vsync vfr, -pix_fmt yuv420p, and adjusting -r 30 parameters.&#xA;-Tried using the -c copy option to avoid re-encoding.&#xA;-Tested with a single image to ensure basic functionality works.&#xA;-Checked file permissions and ensured all images and the list file are accessible.

    &#xA;

    Despite these attempts, the command fails without providing specific error messages related to the command's execution. The verbose logs do not offer insights beyond the FFmpeg version and configuration.

    &#xA;

    Questions :&#xA;Are there known issues with FFmpeg's concat that might lead to such failures ?&#xA;Are there alternative approaches ?

    &#xA;

    I appreciate any insights or suggestions the community might have. Thank you !

    &#xA;

    Full code :

    &#xA;

    Future<void> _createVideoFromImages() async {&#xA;    final Directory appDir = await getApplicationDocumentsDirectory();&#xA;    final Uuid uuid = Uuid();&#xA;    final String videoFileName = uuid.v4();&#xA;    final String outputPath = &#x27;${appDir.path}/$videoFileName.mp4&#x27;;&#xA;    final String singleImagePath = _images[0]!.path;&#xA;&#xA;// Create a directory to store renamed images to avoid any naming conflict&#xA;    final Directory tempImageDir = await Directory(&#x27;${appDir.path}/tempImages&#x27;).create();&#xA;&#xA;    final StringBuffer ffmpegInput = StringBuffer();&#xA;    int index = 0; // To ensure unique filenames&#xA;&#xA;    for (var image in _images) {&#xA;      // Generate a new filename by replacing spaces with underscores and adding an index&#xA;      String newFileName = &#x27;img${index&#x2B;&#x2B;}${p.extension(image!.path)}&#x27;.replaceAll(&#x27; &#x27;, &#x27;_&#x27;);&#xA;      final String newPath = &#x27;${tempImageDir.path}/$newFileName&#x27;;&#xA;&#xA;      // Copy and rename the original file to the new path&#xA;      await image!.copy(newPath);&#xA;&#xA;      // Add the new, safely named file path to the ffmpegInput&#xA;      ffmpegInput.writeln("file &#x27;$newPath&#x27;");&#xA;    }&#xA;&#xA;// Write the paths to a temporary text file for FFmpeg&#x27;s concat demuxer&#xA;    final String listFilePath = &#x27;${appDir.path}/ffmpeg_list.txt&#x27;;&#xA;    await File(listFilePath).writeAsString(ffmpegInput.toString());&#xA;&#xA;    //check if file exists&#xA;    if(await File(listFilePath).exists()) {&#xA;      print("file exists at $listFilePath");&#xA;&#xA;// Use the generated list file in the concat command&#xA;      String ffmpegCommand = "-v verbose -f concat -safe 0 -i $listFilePath -vsync vfr -pix_fmt yuv420p -c:v libx264 -r 30 $outputPath";&#xA;      String ffmpegCommand2 = "-v verbose -f concat -safe 0 -i $listFilePath -c:v libx264 $outputPath";&#xA;      String ffmpegCommand3 = "-v verbose -i $singleImagePath -frames:v 1 $outputPath";&#xA;      //print command&#xA;      print("FFmpeg command: $ffmpegCommand");&#xA;&#xA;&#xA;      await FFmpegKit.execute(ffmpegCommand).then((session) async {&#xA;        // Check the session for success or failure&#xA;        final returnCode = await session.getReturnCode();&#xA;        if (returnCode!.isValueSuccess()) {&#xA;          print("Video created successfully: $outputPath");&#xA;          //okay all set, now set the video to be this:&#xA;          _actual_video_file_ready_to_upload = File(outputPath);&#xA;          print ("video path is: ${outputPath}");&#xA;        } else {&#xA;          print("Failed to create video");&#xA;          print("FFmpeg process exited with:" &#x2B; returnCode.toString());&#xA;          // Command failed; capture and log error details&#xA;          await session.getLogsAsString().then((logs) {&#xA;            print("FFmpeg command failed with logs: $logs");&#xA;          });&#xA;          // Handle failure, e.g., by showing an error message&#xA;          showSnackBarHelperERRORWrapLongString(context, "Failed to create video");&#xA;        }&#xA;      });&#xA;&#xA;      //try command 2&#xA;      if(_actual_video_file_ready_to_upload == null) {&#xA;        await FFmpegKit.execute(ffmpegCommand2).then((session) async {&#xA;          // Check the session for success or failure&#xA;          final returnCode = await session.getReturnCode();&#xA;          if (returnCode!.isValueSuccess()) {&#xA;            print("Video created successfully: $outputPath");&#xA;            //okay all set, now set the video to be this:&#xA;            _actual_video_file_ready_to_upload = File(outputPath);&#xA;            print ("video path is: ${outputPath}");&#xA;          } else {&#xA;            print("Failed to create video");&#xA;            print("FFmpeg process exited with:" &#x2B; returnCode.toString());&#xA;            // Command failed; capture and log error details&#xA;            await session.getLogsAsString().then((logs) {&#xA;              print("FFmpeg command failed with logs: $logs");&#xA;            });&#xA;            // Handle failure, e.g., by showing an error message&#xA;            showSnackBarHelperERRORWrapLongString(context, "Failed to create video");&#xA;          }&#xA;        });&#xA;      }&#xA;      //try command 3&#xA;      if(_actual_video_file_ready_to_upload == null) {&#xA;        await FFmpegKit.execute(ffmpegCommand3).then((session) async {&#xA;          // Check the session for success or failure&#xA;          final returnCode = await session.getReturnCode();&#xA;          if (returnCode!.isValueSuccess()) {&#xA;            print("Video created successfully: $outputPath");&#xA;            //okay all set, now set the video to be this:&#xA;            _actual_video_file_ready_to_upload = File(outputPath);&#xA;            print ("video path is: ${outputPath}");&#xA;          } else {&#xA;            print("Failed to create video");&#xA;            print("FFmpeg process exited with:" &#x2B; returnCode.toString());&#xA;            // Command failed; capture and log error details&#xA;            await session.getLogsAsString().then((logs) {&#xA;              print("FFmpeg command failed with logs: $logs");&#xA;            });&#xA;            // Handle failure, e.g., by showing an error message&#xA;            showSnackBarHelperERRORWrapLongString(context, "Failed to create video");&#xA;          }&#xA;        });&#xA;      }&#xA;    }else{&#xA;      print("file does not exist at $listFilePath");&#xA;    }&#xA;  }&#xA;</void>

    &#xA;

  • 9 Form Optimisation Tips to Convert More Visitors

    15 février 2024, par Erin

    Forms might seem boring — that is, until you realise how powerful they are.

    No forms mean no leads.

    No leads mean no sales.

    No sales means you’ll run out of business.

    So, what do you do ?

    Optimise forms to land more leads.

    They’re a critical part of the sales funnel.

    Forms have many different purposes and can be used to :

    • Contact a company
    • Sign up for a newsletter
    • Request a demo
    • Start a free trial
    • And more

    If you want to get more leads (and ultimately more sales), then you need to optimise your forms.

    This guide will show you exactly how to do that (so you can start getting more conversions today). 

    What is form optimisation ?

    Before we dive into form optimisation, let’s back up a bit.

    Form conversion is our primary focus.

    Your form conversion rate is the percentage of visitors who submit a form divided by the total number of visitors who started the form times one hundred.

    For example, if 5,000 people started filling out your form this month and 350 submitted the form, the conversion rate would be : 

    350 / 5,000 x 100 = 7%

    So, what’s form optimisation ?

    What is form optimisation?

    It’s simply improving your forms to increase conversion rates.

    For most people, form conversion is all about increasing leads.

    Before you begin optimising your forms, it’s important you understand what’s good (and what’s not good) when it comes to form conversions.

    The average form conversion rate across all industries is 2.9%.

    This means you should expect about 3 out of every 100 visitors who start your form to submit it.

    If your form conversion is lower — or hovering around this number — then it’s important to start optimising now.

    With Matomo, you can track your form conversions with Matomo Form Analytics. Gain powerful insights into how your visitors interact with your forms with our intuitive dashboard.

    Why it’s important to optimise your forms

    Most people hear the word “forms” and think it’s boring.

    But forms are the doorway to leads.

    If you want to generate more sales, then you need to generate great forms.

    Here are five reasons you need to optimise your forms today :

    1. Improve conversions

    Form optimisation is really just conversion optimisation.

    But, instead of optimising and improving your site to directly improve sales conversions, you’re increasing lead conversions.

    Every smart website owner uses forms to draw people in further.

    The reality is that most of your website visitors will never return to your site.

    This means you need to do everything you can to grab their contact information so you can continue marketing to them day in and day out.

    Otherwise, you’ll lose them forever.

    When you know how to optimise your forms, you’ll be able to get a higher percentage of form viewers to fill it out.

    Higher conversions mean you get more leads, more customers, and ultimately more revenue.

    2. Capture more leads

    When you can increase your form conversion rate from 1% to 2%, it may seem insignificant.

    What’s a measly percentage point in conversions ?

    It’s a lot.

    When you’re dealing with traffic in the tens or hundreds of thousands each month, an increase in conversion rate by a whole percentile is massive.

    Let’s say you take your conversion rate from 2% to 3% on your form, and you have 70,000 visitors view the form each month.

    Well, if 1,400 people used to sign up to your email list each month at a 2% conversion rate, then at a 3% conversion rate, you’d get 2,100 new email signups every month.

    That’s a major difference.

    When you can improve your signup forms, you improve your lead generation (which is conversion rate optimisation). And the more leads you have, the more sales you’ll make in the long run.

    3. Get the most out of your traffic

    If your forms don’t perform well, then you’re wasting your time (and your traffic).

    By analysing your form data, you can quickly see what’s working and what’s not so you can optimise and improve the user experience (and your forms).

    For most people, this means getting more form viewers to fill out the form with their email and name.

    If 50,000 people visit your site each month, but only 1% of them fill out your form, you’re only getting 500 email signups per month.

    Rather than paying money to generate more traffic, why not just work on improving your website by implementing a better form ?

    If you can increase your form conversion rate to 2%, you will immediately go from 500 new subscribers per month to 1,000 per month.

    4. Spend less on acquisition

    If you’re able to get more form signups without having to generate more traffic, you just solved a pricey problem : acquisition costs.

    If you can now get 1,000 of your 50,000 visitors to sign up to your email list through a better form, then you doubled your signups.

    But that’s not all. You just cut your acquisition costs in half.

    If you spend $2,000 per month on acquisition but you’re able to get twice as many leads, then your acquisition costs are at 50% of what they used to be.

    This means you can pay the same amount but get twice as many leads.

    Or, you can pour even more money into acquisition since it’s now twice as effective so you can fuel growth even more.

    5. Grow revenue

    Forms generate revenue. It may not be direct (although, in some cases, it is). 

    But, forms will lead to sales.

    By placing optimised forms throughout your website at the right places, you will be able to capture a percentage of your visitors as leads, which means you’ll eventually make more sales.

    13 tips to optimise your forms for more conversions

    Now that you know what forms can do and why they’re important to grow your business, it’s time to dive into the best practices.

    Follow these 13 tips to ensure you’re getting the most out of your forms :

    1. Set form goals

    Your forms are hopeless without a goal.

    Before you set up a form on your website, ask yourself, “What am I trying to accomplish with this form ?”

    It could be :

    • Encouraging customers to reach out through a contact form
    • To get visitors to leave feedback on your product/service
    • Convert visitors into leads by giving you their email

    No matter what your goal is, make sure you’re clear on it ; otherwise, you won’t be as targeted and specific with your forms.

    Matomo Goals helps you set specific objectives for your marketing campaigns so you’re able to easily track conversions. Whether you’re looking to capture feedback or generate leads, you can leverage Matomo to see what’s working and what’s not in seconds.

    2. Remove or improve fields with high average time spent and high drop-off rates

    Delving into your Form Analytics provides invaluable insights into individual field performance. A crucial metric to focus on is the Average Time Spent. 

    If a field stands out with a significantly higher average time spent and experiences a high drop-off rate compared to others in the form, it’s a clear indicator that it’s causing frustration or confusion for your visitors.

    To address this, consider improving the field by converting it into a dropdown menu for easier completion or providing helpful text prompts. Alternatively, if the field isn’t essential, you might opt to remove it altogether.

    When you cut down on time spent and drop-offs, you’ll see your conversion rates go up.

    Matomo's Form Analytics dashboard displaying field timings

    Here’s a standout example from Matomo’s Form Analytics feature : the “Overview of your needs” field is taking on average 1 minute and 37 seconds to complete. 

    To streamline this, we might want to consider a simple fix like converting it into a dropdown menu. This change would offer visitors a clearer and quicker way to select from options.

    Screenshot of drop-off fields report in Matomo's Form Analytics feature

    Likewise, we observe that the “Overview of your needs” field experiences the highest drop-off rate, totaling 1,732 drop-offs. 

    With Form Analytics, it becomes clear what is needed to optimise forms and increase conversions.

    Try Matomo for Free

    Get the web insights you need, without compromising data accuracy.

    No credit card required

    3. Start with the CTA

    When crafting and optimising your forms, you need to start with the end in mind. That’s why you need to start with your business goals.

    What are you trying to do with this form ? If you want to capture more emails, then make sure that’s very clear with the call to action (CTA).

    Start building your form by beginning with the CTA.

    For example : “Sign Up Now.”

    Once you have the action you want your potential customers to take, place it on the form. Then, you can work towards crafting the rest of the form.

    4. Put it above the fold

    If your visitors can’t find your form, they won’t fill it out. It’s plain and simple.

    You need to make sure your form is visible above the fold. This is the part of the screen that’s visible to your visitors once they land on your site (without needing to scroll down).

    Always remember to test this out on both desktop and mobile to ensure anyone (using laptops or a mobile device) will see your form upon landing on your site or page.

    Don’t forget about your mobile users. More people view mobile forms than desktop forms. 

    5. Put a CTA in the headline

    Your form needs to be clear.

    You have 1-3 seconds to communicate with your site visitors what your form is all about.

    For example, if you’re trying to get email signups with a lead magnet, then tell them the benefit quickly and concisely with a CTA in the headline, like this one :

    “Subscribe to Save 10% On Your Next Order”

    This is a great example of a headline-CTA combo that tells the visitor what to do and what they get out of it.

    Matomo’s behaviour analytics features like Session Recordings let you see where visitors are clicking and spending time. For example, if people are reading the headline, but not scrolling down to read the form, it’s probably a sign you need to test a different headline.

    6. Ensure you have the right fields

    Your form fields matter.

    What information are you trying to capture from your audience ?

    One beginner mistake people make is requiring too much information and including many fields in a form.

    You want to get as much data on your audience as possible, right ? Wrong.

    If you ask for too much information, people won’t fill it out, and it will harm the user experience. You need to make it super easy.

    If you want more emails to grow your list, then stick with someone’s email (and possibly their name as well). One line for a name. One line for an email address. Keep it simple.

    If you’re after SMS as well, don’t include it on the form. Instead, create a two-step form that pops up an SMS form after someone fills out the email form.

    Multi-step forms enable you to capture those emails easily (and still get a percentage to fill out the second form) without making it seem like too much work for your audience.

    Another path is to include optional fields (that users don’t have to fill out to click submit).

    Just keep in mind that shorter forms perform better than longer ones.

    If you make them too long, it feels like work for the user and will lead to lower completion rates.

    7. Always capture email address

    If you’re unsure of what information to capture (i.e. name, number, email, occupation, age, etc.), always stick to email.

    Email is used by over 4 billion people every single day, and it’s not going away anytime soon.

    When determining which fields to include, start with email.

    Capture more leads with quality forms.

    8. Test different buttons and copy

    You need to track your form performance if you want to get the best conversions.

    One of the best form elements to start testing is your button copy.

    In most cases, form completion buttons will have the word “submit” on them.

    But you don’t have to stick with this word.

    You can (and should) experiment with different submit button copy.

    Here are a few examples of replacement words for your action button :

    • Complete
    • Sign Up
    • Join now
    • Get started

    Remember to experiment with your action button. Try a different copy. Just keep it short.

    You can also try A/B testing your form by experimenting with different colours, copy, and more.

    Matomo's A/B testing dashboard displaying results of CTA experiment

    In the example above from Matomo’s A/B testing feature, we found that changing the wording of our call to action made a big difference. The new “Apply Now” button performed much better, with a 3.6% conversion rate compared to just 1.7% for the original one.

    Try Matomo for Free

    Get the web insights you need, without compromising data accuracy.

    No credit card required

    9. Test static vs. popup

    There are various types of online forms.

    The most common is the static form that just sits in one place and is always there.

    Another popular form type is the popup.

    This is where a form will appear based on a certain trigger like :

    • A certain amount of time on page
    • A certain distance scrolling down the page
    • If someone is a new or returning visitor

    Depending on the form software you use, you may be able to add conditional logic.

    Start tracking your form conversions

    Form optimisation is all about conversion rate optimisation.

    If you want to increase your conversions and generate more revenue, then you need to test out different forms and know how to optimise them.

    With Matomo, you can easily track, manage, and A/B test your forms so you can improve your conversions. 

    Try Matomo free for 21 days. No credit card required.